/* ============================================================
   animations.css — CCF Balduina
   Scroll-triggered fade/slide effects via Intersection Observer
   ============================================================ */


/* === STATO INIZIALE (prima dell'entrata nel viewport) === */

/* Fade-in semplice — opacità da 0 a 1 */
.fade-in {
    opacity: 0;
    transition: opacity var(--transition-slow);
}

/* Slide da sinistra — translazione + opacità */
.slide-from-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

/* Slide da destra */
.slide-from-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

/* Slide dal basso — per card e elementi interni */
.slide-from-bottom {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}


/* === STATO VISIBILE (aggiunto da animations.js con Intersection Observer) === */

.fade-in.is-visible,
.slide-from-left.is-visible,
.slide-from-right.is-visible,
.slide-from-bottom.is-visible {
    opacity: 1;
    transform: translate(0, 0);  /* Torna alla posizione naturale */
}


/* === DELAY ANIMAZIONE per elementi in sequenza (card, list item) === */
/* Aggiunto inline su ogni elemento: style="--delay: 0.1s" */
.fade-in,
.slide-from-left,
.slide-from-right,
.slide-from-bottom {
    transition-delay: var(--delay, 0s);
}


/* === RISPETTA LE PREFERENZE DI ACCESSIBILITÀ === */
/* Utenti con prefers-reduced-motion: no animazioni */
@media (prefers-reduced-motion: reduce) {
    .fade-in,
    .slide-from-left,
    .slide-from-right,
    .slide-from-bottom {
        opacity: 1;
        transform: none;
        transition: none;
    }
}