/* =============================================================================
   Hero: la fotografia in due livelli, col titolo in mezzo.

   Nodi di design 101:1905, 102:1920 e 102:1934 — tre stati della stessa
   schermata. Annotazione: «shrink opening».

   Stessa struttura a due layout degli altri moduli-scena: il default è statico —
   il riquadro 16/9 col titolo dentro e il claim 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-parallax {
    /* --- Valori guidati dal JS ------------------------------------------------
       Fotogramma zero: fotografia a tutto schermo senza angoli, titolo visibile,
       claim ancora fuori. */
    --card-x: 0%;
    --card-y: 0%;
    --card-w: 100%;
    --card-h: 100%;
    --card-radius: 0px;
    --title-o: 1;
    --claim-o: 0;
    --claim-y: 40px;
    --overlay-o: 0;

    /* Dove sta la fotografia: di quanto la sua cima è sopra **il centro del
       riquadro**, in percentuale della sua altezza. È la traccia della parallasse,
       e il default è il primo frame — misurato sul nodo 101:1905, dove la foto alta
       2268 ha la cima a −842 su un frame alto 982: (−842 − 491) / 2268 = −58,77%.

       Dal centro e non dal bordo perché il riquadro si restringe **attorno al
       proprio centro**: così la stessa traccia vale a pieno campo e dentro la card,
       ed è quel che dice il terzo frame — −1088 su una card alta 921, con la foto
       scalata a 2172: (−1088 − 460,5) / 2172 = −71,29%, cioè il valore d'arrivo
       del JS. In percentuale della foto e non in pixel perché la foto scala con la
       larghezza della finestra, e con lei l'altezza a cui stanno gli alberi. */
    --media-y: -58.77%;

    /* Quanto scroll dura la scena, oltre alla schermata che resta in pin: lo
       stesso di `hero-shrink-video`, perché il tratto finale è lo stesso e il
       primo — la foto che sale per 118px — non chiede di più.

       ⚠ **Questo numero non è nel design**, che dà tre stati e nessuna durata. È 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**, non sulla sezione: nel design le sezioni
   lasciano vedere il fondo pagina, e qui si vede alla fine della scena, quando la
   foto si è ristretta. Sul riquadro serve per il tempo in cui l'immagine non è
   ancora arrivata. */
.hero-parallax__panel {
    background-color: var(--color-scene-bg);
}

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

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

.hero-parallax__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;
}

/* Il riquadro. `container-type: size` serve ai due livelli qui sotto, che si
   misurano sulla sua altezza con `cqh` — ed è la ragione per cui la query sta
   **qui** e non sui livelli: un elemento non interroga se stesso (CLAUDE.md →
   *Passaggio fra scene*, il caso di `logo-wall`).

   ⚠ **Il contenimento di dimensione non rompe l'`aspect-ratio`**: con `size` il
   contenuto non conta più per la misura del riquadro, ma qui l'altezza viene dalla
   larghezza e dal rapporto, non dal contenuto. Nel layout animato la misura è
   dichiarata per intero. */
.hero-parallax__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-xl);
    container-type: size;
}

/* I due livelli: la stessa scatola, col rapporto esatto della fotografia.

   ⚠ **La larghezza è almeno quella del riquadro, e cresce se il riquadro è più
   alto della foto.** `max()` fra la larghezza del riquadro e la sua altezza per il
   rapporto: su uno schermo come quello del design vince il primo, e la foto è
   larga quanto la finestra; su uno schermo molto alto o con una foto orizzontale
   vince il secondo, e la foto non lascia una banda vuota sotto. Centrata in
   orizzontale, quindi l'eccesso si divide ai lati.

   ⚠ **La posizione verticale è la traccia, stretta fra due limiti.** `top: 50%`
   porta la cima al centro del riquadro, e `--media-y` la tira su della propria
   percentuale; il `clamp()` impedisce che il bordo alto scenda sotto la cima del
   riquadro (`−50cqh`) o che il bordo basso ci salga sopra (`50cqh − 100%`).
   Sul frame del design nessuno dei due limiti scatta — la foto è alta 2268 su 982
   — e servono agli schermi dove la foto non basta: lì la parallasse si accorcia o
   si ferma, invece di scoprire il fondo. I percento di `translate` sono
   dell'elemento stesso, quindi dell'altezza della foto; `cqh` è del riquadro.

   Si trasla, non si sposta con `top`: la traccia cambia a ogni fotogramma di
   scroll, e un `translate` non rifà il layout. */
.hero-parallax__layer {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: max(100cqw, 100cqh * var(--media-ratio));
    aspect-ratio: var(--media-ratio);
    translate: -50% clamp(50cqh - 100%, var(--media-y), -50cqh);
    pointer-events: none;
}

/* `height: 100%` esplicito: il reset di base.css impone `height: auto` alle
   immagini. La scatola ha già il rapporto della foto, quindi `cover` non taglia
   niente — c'è per il caso di metadati sbagliati, dove un taglio è meglio di una
   foto deformata. */
.hero-parallax__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Il ritaglio: appoggiato al fondo della foto e largo quanto lei, con l'altezza
   che gli dà il proprio rapporto. È tutto quel che serve perché combaci — vedi il
   PHP per cosa si chiede al file. `max-width: none` perché il reset di base.css
   limita ogni immagine al 100% del contenitore, e qui il contenitore è già la
   misura giusta: la riga c'è per il giorno che qualcuno ci mette un bordo. */
.hero-parallax__cutout {
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: 0;
    width: 100%;
    max-width: none;
    height: auto;
}

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

/* `title-upper-xg`: 104 su 96, peso 900, maiuscolo, tracking −3%, **bianco pieno**
   — lo stile di tutte le aperture di pagina del tema.

   Sta **dentro** il riquadro, fra i due livelli, ed è centrato su di lui e non
   sullo schermo: a pieno campo le due cose coincidono, e quando il riquadro si
   restringe lo fa attorno al proprio centro. Posizionato e senza `z-index`, quindi
   dipinge nell'ordine del DOM: dopo la foto, prima del ritaglio. */
.hero-parallax__title {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: 100%;
    padding-inline: var(--gutter);
    translate: -50% -50%;
    font-size: var(--text-display-xl);
    line-height: var(--leading-display-xl);
    font-weight: var(--weight-black);
    letter-spacing: var(--tracking-display-xl);
    text-transform: uppercase;
    text-align: center;
    pointer-events: none;
}

/* Il claim: centrato, largo al massimo 1248 come quello della variante di pagina di
   `hero-shrink-video` — 979 è la cornice del nodo, ma a 48px su quella misura la
   frase andrebbe a capo dove capita, e `balance` la divide meglio di lei.

   ⚠ **`position: relative; z-index: 2`**, come l'intro della hero gemella: il
   riquadro è posizionato con `z-index: 1`, e un elemento in flusso gli finirebbe
   sotto per quanto venga dopo nel DOM. */
.hero-parallax__claim {
    position: relative;
    z-index: 2;
    max-width: 78rem;
    font-weight: var(--weight-medium);
    text-align: center;
    text-wrap: balance;
}

/* «Introduction to»: `body-lg`, 24 su 40. */
.hero-parallax__claim-label {
    display: block;
    font-size: var(--text-body-l);
    line-height: var(--leading-body-l);
}

/* «M-Cube's ESG Commitment»: `title-lower-lg`, 48 su 56, tracking zero. Nel nodo le
   due righe sono a filo, senza stacco: la separazione è l'interlinea. */
.hero-parallax__claim-text {
    display: block;
    font-size: var(--text-title-lower-lg);
    line-height: var(--leading-title-lower-lg);
}

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

/* ⚠ **Nessuna soglia di larghezza, dal 1 ottobre**: la scena è animata anche da
   telefono, come la hero della home. Fra le due larghezze cambia dove finisce la
   card — i `--card-end-*`, nel blocco del telefono in fondo — e i corpi del testo.
   Non va contata fra le scene con la soglia dei 901px. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {

    /* La schermata 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-parallax {
        height: calc(
            100vh
            + var(--scene-enter, 0px)
            + var(--scroll-length)
            + var(--scene-hold, 0px)
        );
    }

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

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

    /* Il riquadro. Si animano `inset` e dimensioni e non uno `scale()`, come nella
       hero gemella: fra inizio e fine le proporzioni cambiano, e uno scale
       schiaccerebbe la foto. Qui c'è una ragione in più — i livelli si misurano
       sul riquadro con `cqw` e `cqh`, e uno scale non cambia la misura che una
       query vede. */
    .hero-parallax__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;
    }

    .hero-parallax__layer {
        will-change: translate;
    }

    /* Il titolo non esce salendo, come in `hero-shrink-video`: resta dov'è e lo
       coprono gli alberi, poi svanisce mentre il riquadro si restringe — nel terzo
       frame non c'è. */
    .hero-parallax__title {
        opacity: var(--title-o);
    }

    /* Il claim al centro dello schermo, come l'intro della hero gemella: nel terzo
       frame è a y 445 su una card che ha il centro a 492. `width: 100%` più il
       `max-width` del layout statico, e il `-50%` lo centra — metterlo a `none`
       allargherebbe il testo a tutto lo schermo. */
    .hero-parallax__claim {
        position: absolute;
        inset-inline-start: 50%;
        inset-block-start: 50%;
        width: 100%;
        padding-inline: var(--gutter);
        opacity: var(--claim-o);
        translate: -50% calc(-50% + var(--claim-y));
        pointer-events: none;
    }
}

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

   Il design mobile di questa schermata non c'è, e i valori vengono dalla hero
   della home da telefono (nodi 860:2264, 860:2600, 860:2882), che è la stessa
   famiglia di scene: la card finisce a `--gutter` — 24 — da **tutti e quattro** i
   lati, come sopra i 900px finisce a 32. Non alta quanto lo schermo come quella
   della home: là la card esce dallo schermo e il testo dei servizi arriva dopo,
   qui il testo sta **dentro** la card, e il rientro simmetrico è la scena.

   Il titolo resta grande, ed è il punto: è una parola che il bosco copre, e il
   minimo del suo clamp — 48 — da telefono c'era già. Il claim scende allo stile
   `h3`, 28 su 36, e la riga sopra a `body-sm`, 18 su 28.

   ⚠ **La parallasse regge il riquadro verticale da sola**: la foto è stretta in un
   `clamp()` di `cqh` (vedi `__layer`), quindi su un riquadro più alto che largo la
   corsa si accorcia invece di scoprire il fondo. Nel layout statico il riquadro
   passa da 16:9 a 4:5, che su un telefono è la foto che si vede. */
@media (max-width: 900px) {
    .hero-parallax {
        --card-end-x: var(--gutter);
        --card-end-y: var(--gutter);
        --card-end-w: calc(100% - 2 * var(--gutter));
        --card-end-h: calc(100% - 2 * var(--gutter));
    }

    .hero-parallax__panel {
        aspect-ratio: 4 / 5;
    }

    .hero-parallax__claim-label {
        font-size: var(--text-body-m);
        line-height: var(--leading-body-m);
    }

    .hero-parallax__claim-text {
        font-size: var(--text-body-xl);
        line-height: 1.2857;
    }
}