/* =============================================================================
   Hero: il filmato che si restringe.

   Nodi di design 528:3482, 528:3495 e 528:3509 — tre stati della stessa
   schermata. Annotazione: «shrink opening».

   Stessa struttura a due layout degli altri moduli-scena: il default è statico —
   il riquadro 16/9, il nome e il paragrafo sotto — e il layout animato sta dentro
   `@media (scripting: enabled) and (prefers-reduced-motion: no-preference)`.

   Il JavaScript non anima: scrive dieci custom property su questo contenitore e il
   CSS le consuma. I default qui sotto sono il **primo fotogramma**, quindi se il
   JS non parte mai la prima schermata è comunque composta.
   ========================================================================== */

.hero-shrink-video {
    /* --- Valori guidati dal JS ------------------------------------------------
       Fotogramma zero: filmato a tutto schermo senza angoli, nome visibile,
       paragrafo ancora fuori. */
    --card-x: 0%;
    --card-y: 0%;
    --card-w: 100%;
    --card-h: 100%;
    --card-radius: 0px;
    --title-o: 1;
    --title-y: 0px;
    --intro-o: 0;
    --intro-y: 40px;

    /* Il velo all'inizio è il 40% del massimo: nel design è nero al 20% sul primo
       nodo e al 50% sull'ultimo, e il massimo è un campo ACF. Vedi la traccia
       OVERLAY nel JS, che scrive la stessa frazione. */
    --overlay-o: calc(0.4 * var(--hero-overlay-max, 0.5));

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

       ⚠ **Questo numero non è nel design**, che dà tre stati e nessuna durata. Le
       gemelle stanno a 400vh, ma la loro scena ha molto più da raccontare — due
       headline che entrano ed escono e una card che attraversa lo schermo — mentre
       qui il movimento è un rientro di 32px per lato. Con 400vh si scrollerebbero
       quattro schermate per vedere 32px. Duecento sono tre battute da due terzi di
       schermata: il nome esce, il filmato si restringe, il paragrafo entra.

       È la manopola di questo modulo: se la scena sembra lunga o corta, si gira
       qui e le tracce del JS seguono da sé, perché sono frazioni. */
    --scroll-length: 200vh;

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

/* Il fondo scuro sta sul **riquadro del filmato**, non sulla sezione: nel design le
   sezioni lasciano vedere il fondo pagina col suo pattern, e qui si vede alla fine
   della scena, quando il filmato si è ristretto e attorno c'è pagina. Sul riquadro
   invece serve, per il tempo in cui il filmato non è ancora arrivato. */
.hero-shrink-video__panel {
    background-color: var(--color-scene-bg);
}

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

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

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

.hero-shrink-video__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-xl);
}

/* `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-shrink-video__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

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

/* `title-upper-lg`: 72px su 64 di interlinea, peso 900, maiuscolo, **bianco pieno**.
   Nel design l'apertura non ha il riempimento sfumato, come la headline della hero
   della home: è l'eccezione che il tema si porta dietro. */
.hero-shrink-video__title {
    position: relative;
    z-index: 2;
    font-size: var(--text-display);
    line-height: var(--leading-display);
    font-weight: var(--weight-black);
    text-transform: uppercase;
    text-align: center;
    /* `lnum` e `pnum`: cifre allineate e proporzionali, come nelle altre scene. */
    font-feature-settings: "lnum", "pnum";
}

/* `body-lg`: 24px su 40. Largo al massimo 979 su 1512, come nel design. */
.hero-shrink-video__intro {
    position: relative;
    z-index: 2;
    max-width: 61.1875rem;
    font-size: var(--text-body-l);
    line-height: var(--leading-body-l);
    font-weight: var(--weight-medium);
    text-align: center;
}

/* -----------------------------------------------------------------------------
   Layout animato: la scena in pin.
   -------------------------------------------------------------------------- */

/* 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 —
       zero se la hero non ha vicini che siano scene. */
    .hero-shrink-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-shrink-video__viewport {
        position: sticky;
        inset-block-start: 0;
        height: 100vh;
        padding-block: 0;
        overflow: hidden;
    }

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

    /* Il riquadro. 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-shrink-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;
    }

    /* Nome e paragrafo sono **entrambi centrati sull'asse verticale**, e non si
       vedono mai insieme: il nome esce prima che il filmato cominci a restringersi,
       il paragrafo entra dopo che ha finito. Sono i tre stati del design, in
       quest'ordine.

       `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-shrink-video__title,
    .hero-shrink-video__intro {
        position: absolute;
        inset-inline-start: 50%;
        inset-block-start: 50%;
        width: 100%;
        padding-inline: var(--gutter);
        pointer-events: none;
    }

    .hero-shrink-video__title {
        opacity: var(--title-o);
        translate: -50% calc(-50% + var(--title-y));
    }

    /* Il paragrafo tiene il `max-width` del layout statico, e non serve niente per
       centrarlo: con `width: 100%` più quel massimo la scatola è larga 979, e il
       `-50%` del translate la centra. Metterlo a `none` qui — che è la prima cosa
       che viene in mente — allargherebbe il testo a tutto lo schermo. */
    .hero-shrink-video__intro {
        opacity: var(--intro-o);
        translate: -50% calc(-50% + var(--intro-y));
    }
}