/* ═══════════════════════════════════════════════════════════════
   7 — ANIMAZIONI
   ═══════════════════════════════════════════════════════════════

   Due sole cose: l'entrata dell'hero al caricamento e la comparsa
   dei blocchi mentre si scorre.

   Il tema WordPress otteneva lo stesso effetto con quattro varianti
   quasi identiche sparse fra `site.css`, `front-page.php`,
   `page-la-storia.php` e `page-organigramma.php`, ciascuna con i
   propri ritardi scritti a mano fino al quarto o al settimo figlio.
   Qui la regola è una sola e la scalata dei ritardi è generata dal
   selettore, così una griglia con diciassette schede non richiede
   diciassette righe di CSS.

   Il contratto con il JavaScript è minimo:
     .reveal        sul contenitore, scritto a mano nell'HTML
     .reveal-item   sui figli, aggiunto da assets/js/reveal.js
     .rivelata      sul contenitore quando entra nello schermo

   Chi ha chiesto al sistema operativo meno animazioni non ne vede
   nessuna: in fondo al file la media query annulla tutto.
   ═══════════════════════════════════════════════════════════════ */


/* ─── Entrata dell'hero ─────────────────────────────────────────
   Parte al caricamento, non allo scorrimento: l'hero è già a
   schermo e aspettare un evento che non arriverà mai lo terrebbe
   invisibile. `both` mantiene lo stato iniziale prima dell'avvio,
   evitando il lampo di contenuto già a posto. */

@keyframes haennaEntrata {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-badge    { animation: haennaEntrata .75s var(--ease) .05s both; }
.hero-crest    { animation: haennaEntrata .75s var(--ease) .18s both; }
.hero-wordmark { animation: haennaEntrata .75s var(--ease) .30s both; }


/* ─── Comparsa allo scorrimento ─────────────────────────────────
   Traslazione verticale breve più dissolvenza: la stessa del tema,
   dove valeva 30px in `site.css` e 36px nella homepage. */

.reveal .reveal-item {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity   .7s var(--ease),
    transform .7s var(--ease);
}

.reveal.rivelata .reveal-item {
  opacity: 1;
  transform: translateY(0);
}

/* Scalata dei ritardi: 80 ms per posizione, fino all'ottavo figlio.
   Oltre, tutti insieme all'ultimo ritardo — su una griglia lunga
   una cascata infinita farebbe aspettare l'ultima scheda più di un
   secondo dopo la prima, che è irritante anziché elegante. */
.reveal.rivelata .reveal-item:nth-child(1) { transition-delay: 0s; }
.reveal.rivelata .reveal-item:nth-child(2) { transition-delay: .08s; }
.reveal.rivelata .reveal-item:nth-child(3) { transition-delay: .16s; }
.reveal.rivelata .reveal-item:nth-child(4) { transition-delay: .24s; }
.reveal.rivelata .reveal-item:nth-child(5) { transition-delay: .32s; }
.reveal.rivelata .reveal-item:nth-child(6) { transition-delay: .40s; }
.reveal.rivelata .reveal-item:nth-child(7) { transition-delay: .48s; }
.reveal.rivelata .reveal-item:nth-child(n+8) { transition-delay: .56s; }


/* ─── Variante laterale ─────────────────────────────────────────
   Il tema la usava dove il blocco è un discorso che si legge da
   sinistra — "Chi Siamo", il palmarès — invece di una griglia di
   pari. Passo più lento e ritardi più larghi, come nell'originale. */

.reveal.da-sinistra .reveal-item {
  transform: translateX(-42px);
  transition:
    opacity   .8s var(--ease),
    transform .8s var(--ease);
}

.reveal.da-sinistra.rivelata .reveal-item {
  transform: translateX(0);
}

.reveal.da-sinistra.rivelata .reveal-item:nth-child(1) { transition-delay: .10s; }
.reveal.da-sinistra.rivelata .reveal-item:nth-child(2) { transition-delay: .25s; }
.reveal.da-sinistra.rivelata .reveal-item:nth-child(3) { transition-delay: .40s; }
.reveal.da-sinistra.rivelata .reveal-item:nth-child(n+4) { transition-delay: .55s; }


/* ─── Variante schede persona ───────────────────────────────────
   Sull'organigramma il tema aggiungeva una scala impercettibile:
   le schede sembrano avvicinarsi anziché salire soltanto. */

.reveal.in-avanti .reveal-item {
  transform: translateY(30px) scale(.97);
}

.reveal.in-avanti.rivelata .reveal-item {
  transform: translateY(0) scale(1);
}


/* Le regole sopra nascondono i blocchi in attesa di una classe che
   solo il JavaScript aggiunge. Se non girasse, il testo statico
   delle pagine interne resterebbe invisibile: a quel caso pensa
   `7-senza-js.css`, che ogni pagina richiama dentro un <noscript>. */


/* ─── Movimento ridotto ─────────────────────────────────────────
   Chi soffre di disturbi vestibolari imposta questa preferenza nel
   sistema operativo. Il contenuto resta identico, solo fermo. */

@media (prefers-reduced-motion: reduce) {
  .hero-badge,
  .hero-crest,
  .hero-wordmark {
    animation: none;
  }

  .reveal .reveal-item,
  .reveal.da-sinistra .reveal-item,
  .reveal.in-avanti .reveal-item {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
}