/* =============================================================================
   Modulo hero: scena video col filmato in riproduzione automatica.

   ⚠ **Le regole di questo file sono identiche a quelle di `hero-scroll-video.css`
   a meno del prefisso delle classi** — cambiano solo i commenti — e le due
   differenze fra i moduli non sono in CSS: stanno nel JavaScript, dove uno scrubba
   il filmato e l'altro lo fa girare, e dove le tappe dell'apertura non sono le
   stesse. Il CSS non sa niente di come il filmato avanzi né di quando il testo
   compaia: scrive i default del fotogramma zero e consuma le property.

   La copia è deliberata: il tema non ha un layer condiviso e ogni modulo possiede i
   propri asset, che è la scelta su cui regge il caricamento condizionale
   (CLAUDE.md → *Nessun build step*). Il prezzo è che **una modifica alla
   composizione va fatta in entrambi i file** — e quando saranno tre, sarà il momento
   di ripensarla, non prima.

   Due layout nello stesso file, e l'ordine fra i due è deliberato.

   Il **default** — quello che si legge scendendo da qui — è la scena statica:
   una sezione normale, alta quanto il suo contenuto, con il video in un riquadro
   e le due headline impilate sotto. È quello che vede chi ha il JavaScript
   disattivato, chi lo ha rotto per un errore in un altro script, e chi ha chiesto
   di ridurre le animazioni.

   Il layout **animato** sta dentro
   `@media (scripting: enabled) and (prefers-reduced-motion: no-preference)`.
   Sono due condizioni in AND, non un `:not()`: un browser che non conosce una
   delle due query valuta falso e resta sul layout statico. Il verso è quello
   giusto — si degrada verso il leggibile, non verso lo schermo vuoto.

   Nel layout animato il pin è `position: sticky`, CSS puro, come nel Make. Il
   JavaScript non anima: scrive dieci custom property su questo contenitore e il
   CSS le consuma. Perciò i default delle property, qui sotto, sono lo stato
   iniziale della scena: se il JS non parte mai, la prima schermata è comunque
   composta correttamente invece di restare a `opacity: 0`.
   ========================================================================== */

.hero-autoplay-video {
    /* --- Valori guidati dal JS ------------------------------------------------
       I default sono il fotogramma zero della scena: video a tutto schermo,
       nessun raggio, prima headline visibile, seconda ancora fuori.

       In questo modulo il JS li **conferma** invece di scavalcarli: dal 9
       settembre la scena si apre col testo già presente, quindi `--h1-o`,
       `--h1-y` e `--overlay-o` a progresso zero valgono esattamente questi
       default. È la differenza dalla gemella, dove il primo `render()` porta
       l'opacità a zero e la headline entra scorrendo. Cambiare uno di questi tre
       default vuol dire cambiare anche la tappa a zero della sua traccia nel JS,
       altrimenti la scena scatta al primo frame. */
    --card-x: 0%;
    --card-y: 0%;
    --card-w: 100%;
    --card-h: 100%;
    --card-radius: 0px;
    --overlay-o: var(--hero-overlay-max, 0.4);
    --h1-o: 1;
    --h1-y: 0px;
    --h2-o: 0;
    --h2-y: 0px;

    /* Quanto scroll dura la scena, oltre alla schermata che resta in pin.

       ⚠ **Tre schermate e non quattro**, che è il valore del Make e quello della
       gemella `hero-scroll-video`. Dal 9 settembre questa scena si apre col testo
       già presente, quindi le due schermate d'ingresso della prima headline non
       ci sono più: tenendo 400vh, quello che era il tratto d'ingresso diventava
       **scroll morto** — 128vh di schermo fermo prima che qualcosa si muovesse.

       Le tappe nel JS sono state riscritte insieme a questo numero, e la
       riscrittura conserva la lunghezza in pixel di **ogni** battuta: sono le
       stesse di prima al decimo di vh, e cambia solo che la scena comincia dopo
       28vh invece di 128. Perciò i due valori vanno cambiati insieme — abbassare
       questo da solo accelera tutta la coreografia, alzarlo la rallenta. */
    --scroll-length: 300vh;

    position: relative;
    color: var(--color-scene-text);
}

/* Il fondo scuro sta sul **riquadro del video**, non sulla sezione. Nel design le
   sezioni lasciano vedere il fondo pagina col suo pattern, e dipingerlo di nuovo
   lo coprirebbe: qui si vedrebbe alla fine della scena, quando il video si è
   ristretto alla card e il resto dello schermo è pagina. Sul riquadro invece
   serve, per il tempo in cui il filmato non è ancora arrivato. */
.hero-autoplay-video__panel {
    background-color: var(--color-scene-bg);
}

/* -----------------------------------------------------------------------------
   Layout statico: nessun JavaScript, oppure movimento ridotto.
   -------------------------------------------------------------------------- */

.hero-autoplay-video__viewport {
    padding-block: var(--space-section);
}

.hero-autoplay-video__scene {
    position: relative;
    display: grid;
    gap: var(--space-2xl);
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
    overflow: hidden;
}

.hero-autoplay-video__panel {
    position: relative;
    z-index: 1;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-l);
}

/* `height: 100%` esplicito: il reset di base.css impone `height: auto` a video e
   img, che qui annullerebbe il riempimento del riquadro. `object-fit: cover`
   ritaglia invece di deformare, ed è la ragione per cui la card più avanti si
   anima in larghezza e altezza vere e non con uno `scale()`: fra inizio e fine le
   proporzioni cambiano, e uno scale schiaccerebbe il filmato. */
.hero-autoplay-video__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-autoplay-video__overlay {
    position: absolute;
    inset: 0;
    background-color: #000;
    opacity: var(--overlay-o);
    pointer-events: none;
}

.hero-autoplay-video__headline {
    position: relative;
    z-index: 2;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
    /* `lnum` e `pnum` sono nel Make: cifre allineate e proporzionali. */
    font-feature-settings: "lnum", "pnum";
}

/* Ogni riga è un blocco, così l'interlinea del display si applica alla riga e non
   all'intero paragrafo. Le interruzioni arrivano dal campo ACF: sono scelte in
   redazione, non l'andare a capo automatico. */
.hero-autoplay-video__line {
    display: block;
}

/* Bianco pieno, e **non** `.display-gradient`. È l'unica headline in display del
   sito a non avere il riempimento sfumato: il design la fa così (nodo 649:2352).
   Vedi il commento su `.display-gradient` in base.css.

   Il corpo è `title-upper-xg` — 128 su 104, tracking −0,03em — e viene dal nodo
   436:3120, che è la hero nel formato con l'occhiello. Fino al 9 settembre era
   `title-upper-lg` (72 su 64, tracking zero), il valore del nodo 649:2352. Il
   centraggio al 50% non si tocca: è il centro dell'unità, non la sua altezza. */
.hero-autoplay-video__headline--first {
    font-size: var(--text-display-xl);
    line-height: var(--leading-display-xl);
    letter-spacing: var(--tracking-display-xl);
    font-weight: var(--weight-black);
}

/* L'occhiello: la riga che precede la headline, in un corpo più piccolo.

   Sta **dentro** l'h1, non accanto: nel design è una frase sola — "25 YEARS OF
   IMAGINATION POWERED BY ENGINEERING" — e così l'animazione lo muove con la
   headline in entrambi i layout, senza che il JS sappia che esiste.

   Due valori che l'h1 gli passerebbe sbagliati e vanno rimessi: il corpo, che è
   `title-upper-md` (40 su 40), e soprattutto il **tracking a zero** — l'h1 adesso
   porta −0,03em, che su una riga di 40px si vede. Lo stacco è 17px, misurato sul
   nodo 1125:2475 (40 di riga più 17 dà il 57 da cui parte la headline): non è un
   passo della scala, come i 40px fra le voci dell'header. */
.hero-autoplay-video__eyebrow {
    display: block;
    margin-block-end: 17px;
    font-size: var(--text-title);
    line-height: var(--leading-solid);
    letter-spacing: var(--tracking-normal);
}

/* La seconda headline il design non la mostra — la hero ne ha una sola, e questo
   campo resta per le pagine che ne vogliono due. I valori sono quelli del Make,
   ora espressi coi token della scala vera: 40px su interlinea larga, peso 500,
   senza maiuscolo. */
.hero-autoplay-video__headline--second {
    max-width: 66rem;
    margin-inline: auto;
    font-size: var(--text-title);
    line-height: 1.4;
    font-weight: var(--weight-medium);
    text-transform: none;
}

/* -----------------------------------------------------------------------------
   Layout animato.
   -------------------------------------------------------------------------- */

/* soglia scene: 901px — vedi base.css → "Passaggio fra scene" */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) and (min-width: 901px) {

    /* L'altezza del contenitore è ciò che crea lo scroll: la schermata che resta
       in pin, più la lunghezza della scena, più i due tratti del passaggio fra
       scene — la coda tenuta in pin mentre la scena successiva compare, e
       l'ingresso se una scena la precede. Sono zero se la hero non ha vicini.
       Vedi base.css → "Passaggio fra scene". */
    .hero-autoplay-video {
        height: calc(
            100vh
            + var(--scene-enter, 0px)
            + var(--scroll-length)
            + var(--scene-hold, 0px)
        );
    }

    /* Il pin. `sticky` e non `fixed`: si aggancia e si sgancia da sé ai bordi del
       contenitore, senza che nessuno debba calcolare quando. */
    .hero-autoplay-video__viewport {
        position: sticky;
        inset-block-start: 0;
        height: 100vh;
        padding-block: 0;
        overflow: hidden;
    }

    .hero-autoplay-video__scene {
        display: block;
        height: 100%;
        max-width: none;
        margin-inline: 0;
        padding-inline: 0;
    }

    /* La card. Si animano `inset` e dimensioni, non un transform, per la ragione
       nel commento su `object-fit` qui sopra. È un elemento fuori dal flusso,
       quindi il ricalcolo è confinato a lui; `contain` lo dichiara al browser
       invece di lasciarglielo dedurre. */
    .hero-autoplay-video__panel {
        position: absolute;
        inset-inline-start: var(--card-x);
        inset-block-start: var(--card-y);
        width: var(--card-w);
        height: var(--card-h);
        aspect-ratio: auto;
        border-radius: var(--card-radius);
        contain: layout paint;
        will-change: width, height;
    }

    /* Le headline sono sovrapposte alla scena, centrate sull'asse verticale
       indicato dal design: **50%** la prima, 62,5% la seconda.

       Il 50% viene dal file di design e corregge il 37,5% del Make: la headline
       della home sta a y=395 alta 192 su una scena di 982, cioè col centro
       esattamente a metà schermo. La seconda resta dov'era, perché il design non
       la mostra — e le due non si vedono mai insieme, quindi il 62,5% non deve
       accordarsi col 50%.

       `translate` è una property a sé, non dentro `transform`: così il
       centramento (-50%) e lo spostamento animato dal JS convivono in una sola
       dichiarazione, senza un elemento wrapper in mezzo il cui unico compito
       sarebbe tenere il -50%. */
    .hero-autoplay-video__headline {
        position: absolute;
        inset-inline-start: 50%;
        width: 100%;
        padding-inline: var(--gutter);
        pointer-events: none;
    }

    .hero-autoplay-video__headline--first {
        inset-block-start: 50%;
        opacity: var(--h1-o);
        translate: -50% calc(-50% + var(--h1-y));
    }

    .hero-autoplay-video__headline--second {
        inset-block-start: 62.5%;
        width: min(100%, 70rem);
        opacity: var(--h2-o);
        translate: -50% calc(-50% + var(--h2-y));
    }
}