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

   Caricato globalmente in templates/base.html: le classi qui sotto
   sono usate direttamente nell'HTML di tutti i template pubblici
   del sito (homepage, chi-siamo, contatti, corsi, galleria, sedi,
   blog) e attivate da static/js/animations.js quando l'elemento
   entra nel viewport (aggiunge .is-visible).
   ============================================================ */


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

/* Fade-in semplice — opacità da 0 a 1. Usato soprattutto sui piccoli
   "pretitoli" (.section-label) sopra i titoli di sezione: se si aumenta
   var(--transition-slow) la dissolvenza diventa più lenta su tutte le
   pagine che la usano. */
.fade-in {
    opacity: 0;
    transition: opacity var(--transition-slow);
}

/* Slide da sinistra — translazione + opacità. Usato sulle sezioni
   dispari della pagina (vedi logica in animations.js). Aumentando
   translateX(-30px) (es. -60px) l'elemento entra da più lontano —
   effetto più marcato ma anche più lento a "sentirsi" completo. */
.slide-from-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

/* Slide da destra — stessa logica di .slide-from-left, sezioni pari. */
.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 (es. card istruttori,
   card corsi, item della griglia galleria). Aumentando translateY(24px)
   le card "salgono" di più all'apparizione. */
.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 nei template, es. style="--delay: 0.1s"
   (usato per sfalsare l'entrata di card in griglia — corsi, istruttori,
   foto galleria). Se --delay non è impostato, l'animazione parte subito. */
.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;
    }
}