/* ==========================================================================
   VIDIM — Reveal: stati iniziali delle animazioni di ingresso

   Coppia di js/reveal.js (l'API completa e documentata li, in cima al file).

   Due corsie separate, per due problemi diversi:

     A. INGRESSO ALLO SCROLL  -> `data-anim` / `data-anim-group`
        Stato iniziale in CSS, animazione in JS (GSAP + ScrollTrigger).
        REGOLA FONDAMENTALE: qui NON si nasconde nulla in modo
        incondizionato. Ogni stato iniziale sta dentro `html.js-reveal`,
        classe che aggiunge js/reveal.js solo dopo aver verificato che GSAP
        c'e e che l'utente non ha chiesto di ridurre il movimento. Se il JS
        non parte, questo foglio non ha alcun effetto: pagina completa.

     B. INGRESSO AL CARICAMENTO -> `data-anim-on="load"`
        100% CSS, nessun JavaScript coinvolto. Serve per i contenuti above
        the fold (Hero): un'animazione CSS parte insieme al primo disegno
        dell'elemento, quindi non puo esistere il lampeggio "prima visibile,
        poi nascosto dal JS, poi di nuovo visibile" che si avrebbe aspettando
        uno script in fondo al body. E anche l'unica corsia che continua a
        funzionare se GSAP non carica.

   Caricato per ultimo (dopo animations.css), vedi build.py.
   ========================================================================== */


/* ==========================================================================
   A. Ingresso allo scroll — stati iniziali (solo con JS attivo)
   ========================================================================== */

/* Vale sia per l'elemento singolo `data-anim` sia per i figli diretti di un
   contenitore `data-anim-group`: i figli non hanno l'attributo nel markup,
   glielo assegna il gruppo, quindi devono essere coperti dal CSS fin da
   subito, altrimenti comparirebbero un istante prima di essere nascosti.
   Gli elementi della corsia B sono esclusi: li non c'e nulla da nascondere. */
html.js-reveal [data-anim]:not([data-anim-on="load"]),
html.js-reveal [data-anim-group] > *:not([data-anim-on="load"]) {
  opacity: 0;
  will-change: opacity, transform;
}

/* --- Varianti -------------------------------------------------------------
   Movimenti volutamente piccoli: 24px di salita, 1.5% di scala. Devono
   leggersi come "l'elemento si e appena posato", non come un'entrata in
   scena. `fade` non dichiara transform: e la sola dissolvenza. */
html.js-reveal [data-anim="rise"],
html.js-reveal [data-anim-group="rise"] > * {
  transform: translate3d(0, 24px, 0);
}

html.js-reveal [data-anim="zoom"],
html.js-reveal [data-anim-group="zoom"] > * {
  transform: scale(.985);
}

/* Un figlio puo dichiarare una variante diversa da quella del gruppo.
   Queste tre regole hanno specificita maggiore e la fanno vincere sempre,
   in qualunque ordine siano scritte le varianti qui sopra. */
html.js-reveal [data-anim-group] > [data-anim="rise"] { transform: translate3d(0, 24px, 0); }
html.js-reveal [data-anim-group] > [data-anim="zoom"] { transform: scale(.985); }
html.js-reveal [data-anim-group] > [data-anim="fade"] { transform: none; }

/* --- Stato finale ---------------------------------------------------------
   Il JS aggiunge `is-revealed` e poi ripulisce gli stili inline: senza
   queste regole il CSS qui sopra tornerebbe a nascondere l'elemento.
   Vengono per ultime: a parita di specificita vince l'ordine. */
html.js-reveal [data-anim].is-revealed,
html.js-reveal [data-anim-group] > .is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* --- Sezioni con il pin ---------------------------------------------------
   #how-vidim e #core-capabilities restano bloccate mentre il contenuto
   interno avanza (js/animations.js). Un reveal dentro un contenitore pinnato
   misura posizioni sbagliate, quindi il JS le salta.
   Questa regola e la contropartita: se un attributo `data-anim` finisce li
   dentro per errore — oggi o su una pagina futura — l'elemento resta
   comunque visibile invece di sparire per sempre. */
html.js-reveal #how-vidim [data-anim],
html.js-reveal #how-vidim [data-anim-group] > *,
html.js-reveal #core-capabilities [data-anim],
html.js-reveal #core-capabilities [data-anim-group] > * {
  opacity: 1;
  transform: none;
  will-change: auto;
}


/* ==========================================================================
   B. Ingresso al caricamento — animazioni CSS, nessun JavaScript
   ========================================================================== */

@keyframes vidim-in-rise {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes vidim-in-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes vidim-in-zoom {
  from { opacity: 0; transform: scale(.985); }
  to   { opacity: 1; transform: none; }
}

[data-anim-on="load"] {
  animation-duration: .62s;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);   /* ~ power2.out */
  animation-fill-mode: both;
  animation-delay: 60ms;            /* ritardo minimo: il tempo di un respiro */
}

[data-anim-on="load"][data-anim="rise"] { animation-name: vidim-in-rise; }
[data-anim-on="load"][data-anim="fade"] { animation-name: vidim-in-fade; animation-duration: .55s; }
[data-anim-on="load"][data-anim="zoom"] { animation-name: vidim-in-zoom; animation-duration: .72s; }

/* Sfalsamento dichiarativo: `data-anim-step` = passi da 80ms.
   Non e `data-anim-delay` (che il JS legge in millisecondi) perche qui il
   valore deve finire in un selettore: attr() non e utilizzabile per i tempi. */
[data-anim-on="load"][data-anim-step="1"] { animation-delay: 140ms; }
[data-anim-on="load"][data-anim-step="2"] { animation-delay: 220ms; }
[data-anim-on="load"][data-anim-step="3"] { animation-delay: 300ms; }
[data-anim-on="load"][data-anim-step="4"] { animation-delay: 380ms; }


/* ==========================================================================
   Conteggio numerico
   ==========================================================================
   Attiva solo mentre il conteggio e in corso: la classe la mette e la toglie
   js/reveal.js. Le cifre tabellari hanno tutte la stessa larghezza, quindi
   nessun valore intermedio puo essere piu largo di un altro con lo stesso
   numero di caratteri.

   ATTENZIONE — perche non e una regola permanente: in Inter la cifra
   tabellare e larga 78px a 120px di corpo, quella proporzionale 74px.
   Lasciare `tabular-nums` acceso allargherebbe il box da 148 a 156px e
   sposterebbe a destra di 8px il suffisso ("%", "hours/year", "€"),
   cambiando la resa rispetto al mockup. Il JS compensa la differenza con
   una letter-spacing negativa calcolata a runtime, valida solo durante il
   conteggio, e a fine animazione rimuove tutto: l'ultimo fotogramma e il
   testo statico coincidono al pixel. */
html.js-reveal [data-anim-count].is-counting {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}


/* ==========================================================================
   Riduzione del movimento — nessuna animazione, tutto subito visibile
   ==========================================================================
   js/reveal.js non aggiunge nemmeno la classe `js-reveal` quando la
   preferenza e attiva, quindi la parte A qui sotto e una ridondanza (serve
   se la preferenza cambia a pagina aperta). La parte B invece e necessaria:
   quelle animazioni sono CSS e partirebbero comunque. */
@media (prefers-reduced-motion: reduce) {
  html.js-reveal [data-anim],
  html.js-reveal [data-anim-group] > * {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto !important;
    transition: none !important;
  }

  [data-anim-on="load"] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}