/*
 * Babajaga V2 - composizione Hero.
 *
 * Il componente possiede composizione, voce, segnali e regia motion dell'Hero.
 * Consuma dalle fondazioni soltanto primitive e contratti condivisi con il
 * campo atmosferico e Selected Works.
 */

:where(body.pagina-home-v2, [data-babajaga-tema="v2"]) {
    --colore-impulso-rosa: var(--colore-rosa-segnale);

    /* Wordmark Hero: scala, voce e compensazione ottica. */
    --dimensione-wordmark-hero-minima: 2.25rem;
    --dimensione-wordmark-hero-fluida: 12.6vw;
    --dimensione-wordmark-hero: clamp(
        var(--dimensione-wordmark-hero-minima),
        var(--dimensione-wordmark-hero-fluida),
        var(--dimensione-display-massima)
    );
    --interlinea-wordmark-hero: 0.84;
    --allungamento-wordmark-hero: var(--allungamento-display-editoriale);
    --asse-larghezza-wordmark-hero: var(--asse-larghezza-display-editoriale);
    --peso-wordmark-hero: var(--peso-display-base);
    --rientro-wordmark-inizio: max(1px, 0.05vw);
    --rientro-wordmark-fine: max(2px, 0.1vw);
    --correzione-ottica-wordmark-x: 0px;

    /* Palco e ritmo verticale propri dell'Hero. */
    --altezza-minima-palco-hero-mobile-basso: 21rem;
    --vuoto-attivo-hero: clamp(6rem, 18vh, 14rem);
    --spazio-inizio-hero: clamp(0.5rem, 1.5vw, 1.5rem);
    --spazio-fine-copy-hero: clamp(9rem, 28vh, 14rem);
    --spazio-hero-mobile-bassa-inizio: var(--spazio-3);
    --spazio-hero-mobile-bassa-fine: max(
        clamp(4rem, 12vh, 5rem),
        env(safe-area-inset-bottom)
    );
    --distanza-copy-hero: clamp(0.375rem, 0.3rem + 0.2vw, 0.625rem);
    --rientro-copy-hero: clamp(0.25rem, 0.125rem + 0.55vw, 0.75rem);
    --misura-copy-hero-mobile: 40rem;
    --misura-sottotitolo-hero: 36ch;
    --colonna-copy-hero-tablet: 1;
    --span-copy-hero-tablet: 4;
    --colonna-copy-hero-desktop: 3;
    --span-copy-hero-desktop: 5;

    /* Voce del copy Hero. */
    --dimensione-ruolo-hero: clamp(1.8rem, 8.6vw, 3.4rem);
    --asse-larghezza-ruolo-hero-percentuale: 82%;
    --asse-larghezza-ruolo-hero: 82;
    --peso-ruolo-hero: 700;
    --peso-corsivo-ruolo-hero: 500;
    --interlinea-ruolo-hero: 0.92;
    --tracciamento-ruolo-hero: -0.04em;
    --dimensione-sottotitolo-hero: clamp(0.95rem, 3.9vw, 1.12rem);
    --interlinea-sottotitolo-hero: 1.42;
    --tracciamento-sottotitolo-hero: -0.02em;

    /* Segnali sulla griglia. */
    --diametro-impulso-hero: 4px;
    --ombra-impulso-hero:
        0 0 4px currentColor,
        0 0 11px currentColor,
        0 0 22px currentColor;
    --opacita-croce-impulso-hero: 0.55;
    --altezza-croce-impulso-hero: 1.6rem;
    --larghezza-croce-impulso-hero: 1.2rem;
    --posizione-x-impulso-blu: 16.6667%;
    --posizione-y-impulso-blu: 35%;
    --posizione-x-impulso-viola: 50%;
    --posizione-y-impulso-viola: 48%;
    --posizione-x-impulso-magenta: 83.3333%;
    --posizione-y-impulso-magenta: 66%;
    --posizione-x-impulso-quarto: 70.8333%;
    --posizione-y-impulso-quarto: 41%;

    /* Ambiente e uscita Hero consumati da homepage-motion.js. */
    --motion-osservatore-margine: 12% 0px;
    --motion-scroll-scrub: 0.72;
    --motion-scroll-scrub-mobile: 0.42;
    --motion-scroll-scarto-messaggio: 0.05;
    --motion-scroll-scarto-impulsi: 0.08;
    --motion-scroll-hero-start: top top;
    --motion-scroll-hero-end: bottom top;
    --motion-intensita-mobile: 0.58;
    --motion-intensita-tablet: 0.76;
    --motion-intensita-desktop: 1;
    --motion-intensita-viewport-basso: 0.52;
    --motion-uscita-titolo-y: -7.5;
    --motion-uscita-titolo-scala: 0.988;
    --motion-uscita-messaggio-y: -15;
    --motion-uscita-messaggio-opacita: 0;
    --motion-uscita-griglia-scala-y: 0.935;
    --motion-uscita-griglia-opacita: 0.42;
    --motion-uscita-impulsi-y: 21;
    --motion-uscita-impulsi-opacita: 0.08;
    --motion-impulsi-durate: 2.2, 2.75, 2.45, 2.9;
    --motion-impulsi-pause: 2.8, 4.2, 3.5, 5.1;
    --motion-impulsi-ritardi: 0.4, 1.55, 0.95, 2.25;
    --motion-impulsi-percorsi: 12, 13.8, 15.6, 17.4;
    --motion-impulso-accensione: 0.32;
    --motion-impulso-spegnimento: 0.38;
    --motion-impulso-scala-iniziale: 0.72;
    --motion-impulso-opacita-iniziale: 0.16;
    --motion-impulso-opacita-percorso: 0.42;
    --motion-impulso-sovrapposizione: 0.08;
    --motion-impulso-anticipo-spegnimento: 0.28;
    --motion-impulso-percorso-massimo: 176;
    --motion-curva-impulso-accensione: power2.out;
    --motion-curva-impulso-percorso: none;
    --motion-curva-impulso-spegnimento: power2.out;
    --motion-curva-scroll: none;
    --motion-intro-scroll-tolleranza: 32;
}

@media (min-width: 48rem) and (max-width: 63.999rem) {
    :where(body.pagina-home-v2, [data-babajaga-tema="v2"]) {
        --spazio-inizio-hero: clamp(1rem, 2.4vh, 2rem);
        --spazio-fine-copy-hero: clamp(6rem, 14vh, 9rem);
        --dimensione-ruolo-hero: clamp(2.1rem, 3.25vw, 3.75rem);
        --dimensione-sottotitolo-hero: clamp(1rem, 1.25vw, 1.25rem);
        --misura-sottotitolo-hero: 34ch;
    }
}

@media (min-width: 64rem) {
    :where(body.pagina-home-v2, [data-babajaga-tema="v2"]) {
        --spazio-inizio-hero: clamp(1rem, 2.4vh, 2rem);
        --spazio-fine-copy-hero: clamp(7rem, 15vh, 10rem);
        --dimensione-ruolo-hero: clamp(2.35rem, 3vw, 3.75rem);
        --dimensione-sottotitolo-hero: clamp(1rem, 1.25vw, 1.25rem);
        --misura-sottotitolo-hero: 34ch;
    }
}

@media (min-width: 48rem) and (max-height: 44rem) {
    :where(body.pagina-home-v2, [data-babajaga-tema="v2"]) {
        --vuoto-attivo-hero: clamp(4rem, 10vh, 6rem);
        --spazio-fine-copy-hero: clamp(4.5rem, 10vh, 6rem);
    }
}

@supports (height: 1svh) {
    :where(body.pagina-home-v2, [data-babajaga-tema="v2"]) {
        --spazio-fine-copy-hero: clamp(9rem, 28svh, 14rem);
        --spazio-hero-mobile-bassa-fine: max(
            clamp(4rem, 12svh, 5rem),
            env(safe-area-inset-bottom)
        );
    }

    @media (min-width: 48rem) {
        :where(body.pagina-home-v2, [data-babajaga-tema="v2"]) {
            --spazio-fine-copy-hero: clamp(6rem, 14svh, 9rem);
        }
    }

    @media (min-width: 64rem) {
        :where(body.pagina-home-v2, [data-babajaga-tema="v2"]) {
            --spazio-fine-copy-hero: clamp(7rem, 15svh, 10rem);
        }
    }

    @media (min-width: 48rem) and (max-height: 44rem) {
        :where(body.pagina-home-v2, [data-babajaga-tema="v2"]) {
            --vuoto-attivo-hero: clamp(4rem, 10svh, 6rem);
            --spazio-fine-copy-hero: clamp(4.5rem, 10svh, 6rem);
        }
    }
}

@supports (font-size: 1cqi) {
    :where(body.pagina-home-v2, [data-babajaga-tema="v2"]) {
        --dimensione-wordmark-hero-fluida: 12.6cqi;
    }
}

body.pagina-home-v2 .hero-v2 {
    --altezza-palco-hero: max(
        var(--altezza-minima-hero),
        var(--altezza-palco-hero-viewport, var(--altezza-palco-hero-fallback))
    );

    position: relative;
    isolation: isolate;
    min-block-size: var(--altezza-palco-hero);
    overflow: visible;
    background: transparent;
    color: var(--colore-testo);
}

body.pagina-home-v2 .hero-v2__contenuto {
    position: relative;
    z-index: 3;
    grid-template-rows: auto minmax(var(--vuoto-attivo-hero), 1fr) auto;
    min-block-size: inherit;
    padding-block: var(--spazio-inizio-hero) var(--spazio-fine-copy-hero);
}

body.pagina-home-v2 .hero-v2__titolo {
    --titolo-display-colore: var(--colore-wordmark-hero);
    --titolo-display-dimensione-fallback: var(--dimensione-wordmark-hero);
    --titolo-display-interlinea: var(--interlinea-wordmark-hero);
    --titolo-display-allungamento: var(--allungamento-wordmark-hero);
    --titolo-display-asse-larghezza: var(--asse-larghezza-wordmark-hero);
    --titolo-display-peso: var(--peso-wordmark-hero);
    --titolo-display-rientro-inizio: var(--rientro-wordmark-inizio);
    --titolo-display-rientro-fine: var(--rientro-wordmark-fine);
    --correzione-ottica-x: var(--correzione-ottica-wordmark-x);

    grid-row: 1;
    align-self: start;
    color: var(--colore-wordmark-hero);
    -webkit-text-fill-color: var(--colore-wordmark-hero);
}

body.pagina-home-v2 .hero-v2__titolo [data-display-fit-line],
body.pagina-home-v2 .hero-v2__titolo [data-display-fit-text] {
    color: var(--colore-wordmark-hero);
    -webkit-text-fill-color: var(--colore-wordmark-hero);
}

body.pagina-home-v2 .hero-v2__messaggio {
    grid-column: 1 / -1;
    grid-row: 3;
    align-self: end;
    display: grid;
    row-gap: var(--distanza-copy-hero);
    max-inline-size: var(--misura-copy-hero-mobile);
    padding-inline: var(--rientro-copy-hero);
}

body.pagina-home-v2 .hero-v2__ruolo {
    margin-block: 0;
    font-family: var(--famiglia-display);
    font-size: var(--dimensione-ruolo-hero);
    font-stretch: var(--asse-larghezza-ruolo-hero-percentuale);
    font-variation-settings:
        "wdth" var(--asse-larghezza-ruolo-hero),
        "wght" var(--peso-ruolo-hero);
    font-weight: var(--peso-ruolo-hero);
    line-height: var(--interlinea-ruolo-hero);
    letter-spacing: var(--tracciamento-ruolo-hero);
    text-transform: uppercase;
}

body.pagina-home-v2 .hero-v2__ruolo span {
    display: block;
}

body.pagina-home-v2 .hero-v2__ruolo em {
    font-family: var(--famiglia-display);
    font-style: italic;
    font-variation-settings:
        "wdth" var(--asse-larghezza-ruolo-hero),
        "wght" var(--peso-corsivo-ruolo-hero);
    font-weight: var(--peso-corsivo-ruolo-hero);
    letter-spacing: var(--tracciamento-ruolo-hero);
}

body.pagina-home-v2 .hero-v2__sottotitolo {
    max-inline-size: var(--misura-sottotitolo-hero);
    font-size: var(--dimensione-sottotitolo-hero);
    line-height: var(--interlinea-sottotitolo-hero);
    letter-spacing: var(--tracciamento-sottotitolo-hero);
}

body.pagina-home-v2 .hero-v2__griglia,
body.pagina-home-v2 .hero-v2__impulsi {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

body.pagina-home-v2 .hero-v2__impulso {
    position: absolute;
    inline-size: var(--diametro-impulso-hero);
    block-size: var(--diametro-impulso-hero);
    border-radius: 50%;
    background: currentColor;
    translate: -50% -50%;
    box-shadow: var(--ombra-impulso-hero);
}

body.pagina-home-v2 .hero-v2__impulso::before,
body.pagina-home-v2 .hero-v2__impulso::after {
    position: absolute;
    inset: 50% auto auto 50%;
    background: currentColor;
    content: "";
    opacity: var(--opacita-croce-impulso-hero);
    transform: translate(-50%, -50%);
}

body.pagina-home-v2 .hero-v2__impulso::before {
    inline-size: var(--spessore-linea);
    block-size: var(--altezza-croce-impulso-hero);
}

body.pagina-home-v2 .hero-v2__impulso::after {
    inline-size: var(--larghezza-croce-impulso-hero);
    block-size: var(--spessore-linea);
}

body.pagina-home-v2 .hero-v2__impulso--blu {
    inset-block-start: var(--posizione-y-impulso-blu);
    inset-inline-start: var(--posizione-x-impulso-blu);
    color: var(--colore-impulso-blu);
}

body.pagina-home-v2 .hero-v2__impulso--viola {
    inset-block-start: var(--posizione-y-impulso-viola);
    inset-inline-start: var(--posizione-x-impulso-viola);
    color: var(--colore-impulso-viola);
}

body.pagina-home-v2 .hero-v2__impulso--magenta {
    inset-block-start: var(--posizione-y-impulso-magenta);
    inset-inline-start: var(--posizione-x-impulso-magenta);
    color: var(--colore-impulso-magenta);
}

body.pagina-home-v2 .hero-v2__impulso--quarto {
    display: none;
    inset-block-start: var(--posizione-y-impulso-quarto);
    inset-inline-start: var(--posizione-x-impulso-quarto);
    color: var(--colore-impulso-rosa);
}

/* Il viewport basso conserva la composizione, ma tiene Works sotto la piega. */
@media (max-width: 47.999rem) and (max-height: 44rem) {
    body.pagina-home-v2 .hero-v2 {
        --altezza-palco-hero-effettiva: var(
            --altezza-palco-hero-viewport,
            calc(
                100vh
                - var(--altezza-testata-mobile-fallback)
                - var(--wp-admin--admin-bar--height, 0px)
            )
        );

        min-block-size: max(
            var(--altezza-minima-hero),
            calc(
                var(--altezza-palco-hero-effettiva)
                + var(--profondita-raccordo-hero-mobile-bassa)
            )
        );
    }

    body.pagina-home-v2 .hero-v2__contenuto {
        block-size: max(
            var(--altezza-minima-palco-hero-mobile-basso),
            var(--altezza-palco-hero-effettiva)
        );
        min-block-size: 0;
        padding-block:
            var(--spazio-hero-mobile-bassa-inizio)
            var(--spazio-hero-mobile-bassa-fine);
    }
}

@supports (height: 1svh) {
    @media (max-width: 47.999rem) and (max-height: 44rem) {
        body.pagina-home-v2 .hero-v2 {
            --altezza-palco-hero-effettiva: var(
                --altezza-palco-hero-viewport,
                calc(
                    100svh
                    - var(--altezza-testata-mobile-fallback)
                    - var(--wp-admin--admin-bar--height, 0px)
                )
            );
        }
    }
}

@media (min-width: 48rem) {
    body.pagina-home-v2 .hero-v2__messaggio {
        grid-column: var(--colonna-copy-hero-tablet) / span var(--span-copy-hero-tablet);
        max-inline-size: none;
    }

    body.pagina-home-v2 .hero-v2__impulso--quarto {
        display: block;
    }
}

@media (min-width: 64rem) {
    body.pagina-home-v2 .hero-v2__messaggio {
        grid-column: var(--colonna-copy-hero-desktop) / span var(--span-copy-hero-desktop);
    }
}