/* =============================================================================
   Modulo: claim sopra un video.

   Stessa struttura a due layout degli altri moduli-scena: il default è statico —
   il fermo immagine e la frase sotto — e il layout animato sta dentro
   `@media (scripting: enabled) and (prefers-reduced-motion: no-preference)`.

   Il JavaScript scrive **due numeri**, `--overlay-o` e `--claim-o`, scrubba il
   filmato e accende una classe quando la battuta è arrivata. Non c'è nessuna
   geometria animata: è la scena più semplice del tema, ed è per questo che ci
   sono più righe di commento che di CSS.
   ========================================================================== */

.claim-video {
    /* --- Valori guidati dal JS ----------------------------------------------
       I default sono il fotogramma zero: filmato pulito, niente velo, niente
       frase. Se il JS non parte mai resta il primo fotogramma del filmato, che è
       una schermata sensata — non un velo nero orfano. */
    --overlay-o: 0;
    --claim-o: 0;

    /* Quanto scroll dura la scena. Nel Make il claim occupa il 45% di 800vh,
       cioè circa tre schermate e mezza. */
    --scroll-length: 300vh;

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

/* Il fondo scuro sta sul filmato, non sulla sezione: nel layout stretto la
   sezione lascia vedere il fondo pagina attorno al riquadro. */
.claim-video__media {
    background-color: var(--color-scene-bg);
}

/* -----------------------------------------------------------------------------
   Layout statico: nessun JavaScript, movimento ridotto, o viewport stretto.
   -------------------------------------------------------------------------- */

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

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

/* `height: 100%` esplicito: il reset di base.css impone `height: auto` a video e
   img, che qui annullerebbe il riempimento del riquadro. */
.claim-video__media {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-l);
}

/* Nel layout statico il velo non serve: la frase sta sotto il filmato, su fondo
   pieno, e non ha niente da rendere leggibile. */
.claim-video__overlay {
    display: none;
}

/* Frase e pulsante, con i 40 di stacco del design (nodo 845:3167). ⚠ **40 non è
   un passo della scala**, che va da 32 a 48 — come i 40 fra le voci dell'header,
   e per la stessa ragione sta scritto qui invece di diventare un token. */
.claim-video__content {
    display: grid;
    justify-items: center;
    gap: 2.5rem;
    text-align: center;
}

/* ⚠ **Dal 24 settembre questa frase è `title-upper-md`**, cioè lo stesso stile dei
   titoli di sezione: 40 su 40 in Black, maiuscolo, tracking zero. Fino a lì era 48
   in regular con tracking −0,01em, che venivano dal Make e portavano in CSS il
   commento «la scala del design va da 72 a 40 e i 48 di questo claim non ci sono».
   Adesso il design copre questa schermata (nodo 845:3168) e dice un'altra cosa: il
   corpo locale se n'è andato con la sua eccezione.

   ⚠ **Niente `margin` qui**: lo possiede `.display-gradient` (base.css), che ci
   mette un negativo per compensare il proprio padding. Il centraggio lo fa
   `justify-items` del gruppo, non un `margin-inline: auto`.

   ⚠ **Niente `text-wrap: balance`**, che c'era: nel design le righe non sono
   pareggiate — le prime due arrivano al bordo e la terza è un terzo di riga — e
   pareggiarle è una composizione diversa da quella disegnata.

   1338 è la misura del frame; il 90vw è la guardia per gli schermi più stretti. */
.claim-video__claim {
    max-width: min(83.625rem, 90vw);
    font-size: var(--text-title);
    line-height: var(--leading-solid);
    font-weight: var(--weight-black);
    text-transform: uppercase;
}

/* Nel design la rampa di questa frase è neutra. Il fill dichiarato è
   `rgba(32,29,46,.8)`, cioè il fondo della pagina About (`#201d2e`) all'80%, e non
   il blu della home. Misurato sui due render allo stesso corpo e sulla stessa
   spezzatura: il design va da `rgb(190,189,194)` in cima all'inchiostro a
   `rgb(245,245,246)` in fondo, il blu da `rgb(191,212,239)` a `rgb(243,247,252)`.
   **In chiaro-scuro combaciano** (il rosso a un punto a entrambe le estremità), e
   a divergere è la sola tinta.

   Fino al 30 settembre si teneva il blu per tutti. Da quel giorno la tinta di
   `.display-gradient` è il colore della pagina (base.css → `--color-display-tint`),
   quindi su un fondo `#201d2e` questa frase è quella del design, senza niente qui.
   ⚠ Ma la pagina About, in locale e su staging, non ha il colore compilato: resta
   sul blu di default, e con lui azzurrata. */

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

/* ⚠ **Nessuna soglia di larghezza, dal 1 ottobre**: la scena è animata anche da
   telefono, con lo stesso movimento — è stato chiesto, come per `cta-fullscreen`.
   Non va contata fra le scene con la soglia dei 901px. Quel che cambia sotto i 900px
   è in fondo al file. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {

    .claim-video {
        height: calc(
            100vh
            + var(--scene-enter, 0px)
            + var(--scroll-length)
            + var(--scene-hold, 0px)
        );
    }

    .claim-video__viewport {
        position: sticky;
        inset-block-start: 0;
        height: 100vh;
        padding-block: 0;
        overflow: hidden;
    }

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

    .claim-video__media {
        position: absolute;
        inset: 0;
        aspect-ratio: auto;
        border-radius: 0;
    }

    /* Il velo. `--overlay-o` è la frazione, il massimo è un campo ACF: il JS
       scrive quanto è arrivato, la redazione decide quanto è scuro. */
    .claim-video__overlay {
        display: block;
        position: absolute;
        inset: 0;
        background-color: #000;
        opacity: calc(var(--overlay-o) * var(--claim-overlay-max, 0.7));
        pointer-events: none;
    }

    /* ⚠ **Il gruppo è centrato, e fino al 24 settembre la frase era ancorata per
       la cima.** Il valore vecchio era 41,45% — i 407px del Make su un frame da
       982 — e ancorare la cima vuol dire che il blocco cresce verso il basso: con
       il pulsante sotto, la composizione scendeva di mezzo pulsante. Nel design
       (nodo 1256:3323) il gruppo è **centrato esatto** nella sezione: sta a 321 su
       un frame alto 850 ed è alto 208, quindi il suo centro cade a 425, che è
       850/2. Centrare regge anche una frase più lunga o senza CTA, che ancorare
       per la cima non fa. */
    .claim-video__content {
        position: absolute;
        inset-inline-start: 50%;
        inset-block-start: 50%;
        z-index: 2;
        width: min(83.625rem, 90vw);
        opacity: var(--claim-o);
        translate: -50% -50%;
        pointer-events: none;
    }

    .claim-video__claim {
        max-width: none;
    }

    /* ⚠ **Il pulsante si riprende i click, ma solo a battuta arrivata.** Un
       elemento a `opacity: 0` resta cliccabile: con un `pointer-events: auto`
       fisso ci si andrebbe a sbattere per tutta la prima metà della scena, dove a
       schermo non c'è che il filmato. `is-claim` è una **classe e non una rampa**,
       come `is-covered` in base.css — la scrive il JS quando `--claim-o` ha finito
       la sua corsa. */
    .claim-video.is-claim .claim-video__cta {
        pointer-events: auto;
    }
}

/* -----------------------------------------------------------------------------
   Telefono.

   ⚠ **Da telefono la scena è animata come sul desktop**, su richiesta e come la CTA
   in chiusura: il filmato a tutto schermo che scorre con la pagina, il velo che
   sale, e la frase con la CTA al centro.

   Dal 15 ottobre c'è il design dell'ultimo fotogramma (nodo 1604:3255), e cambia
   tre cose rispetto al desktop:

   - il gruppo è **largo quanto la colonna** — il 90vw del desktop è la guardia degli
     schermi stretti, e qui il margine di pagina c'è già;
   - la frase è **22 su 28**, cioè `--text-title-m` al suo minimo: non più il 28 a
     cui `--text-title` scende da sé, che a 392 faceva sette righe;
   - la frase è **bianca piena**, e sul desktop è sfumata. Campionato il massimo per
     riga sul render del nodo 1604:3326: 255 in cima e in fondo all'inchiostro di
     tutte e cinque le righe. Il riempimento di `.display-gradient` si spegne qui, e
     con lui lo sbordo che serve solo a un riempimento clippato.

   Fra la frase e il pulsante restano i 40 del desktop: fino al 15 ottobre erano 56,
   presi in prestito dalla CTA da telefono quando il design non c'era.

   ⚠ **Il filmato si scrubba anche da telefono** (`currentTime` dallo scroll), che su
   iOS è il caso inaffidabile: va guardato su un iPhone vero, come la CTA. */
@media (max-width: 900px) {
    .claim-video__claim {
        padding-block: 0;
        margin-block: 0;
        font-size: var(--text-title-m);
        line-height: calc(28 / 22);
        background: none;
        color: var(--color-scene-text);
    }
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) and (max-width: 900px) {
    .claim-video__content {
        width: calc(100% - 2 * var(--gutter));
    }
}

/* Il layout fermo del telefono, senza script o con movimento ridotto: il filmato
   col claim sotto. Il riquadro passa da 16:9 a 4:5 — a 392 di larghezza il 16:9 fa
   220, e il filmato diventava una striscia — e la frase perde il massimo al 90vw,
   che col margine di pagina non serve più. Le due condizioni sono il complemento
   del layout animato. */
@media (max-width: 900px) and (scripting: none), (max-width: 900px) and (prefers-reduced-motion: reduce) {
    .claim-video__scene {
        gap: var(--space-xl);
    }

    .claim-video__media {
        aspect-ratio: 4 / 5;
    }

    .claim-video__claim {
        max-width: none;
    }
}