/*
 * Babajaga V2 - raccordo editoriale Selected Works.
 *
 * Il componente possiede esclusivamente griglia, spazio di ingresso, titolo
 * e relativa rivelazione. La gallery resta nella composizione homepage.
 */

@property --titolo-lavori-rivelazione {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}

body.pagina-home-v2 .featured-work {
    /* Contratto privato dell'intestazione Selected Works. */
    --correzione-ottica-titolo-lavori-x: 0px;
    --profondita-fade-griglia-lavori: clamp(10rem, 30vw, 16rem);
    --spazio-inizio-selected-works: clamp(1rem, 2.5vh, 1.375rem);
    --spazio-fine-selected-works: clamp(0.75rem, 1.75vh, 1rem);
    --spazio-titolo-primo-progetto: clamp(1.25rem, 2.5vh, 1.75rem);
    --titolo-lavori-respiro-ritaglio: 0.18em;
    --titolo-lavori-rivelazione-iniziale: 100%;
    --titolo-lavori-opacita-iniziale: 0;
    --titolo-lavori-spostamento-iniziale: 0.35rem;

    position: relative;
    isolation: isolate;
    display: flow-root;
    overflow: visible;
    padding-block-end: var(--spazio-capitolo);
    background: transparent;
    color: var(--colore-inchiostro-progetti);
}

body.pagina-home-v2 .featured-work__griglia {
    --colore-campo-griglia: var(--colore-trama-griglia-progetti);

    position: absolute;
    z-index: 0;
    inset: 0;
    block-size: 100%;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        var(--colore-maschera-opaca) var(--profondita-fade-griglia-lavori)
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0,
        var(--colore-maschera-opaca) var(--profondita-fade-griglia-lavori)
    );
}

body.pagina-home-v2 .project-wall__header--v2 {
    position: relative;
    z-index: 4;
    align-items: end;
    min-block-size: var(--altezza-intro-lavori);
    padding-block:
        var(--spazio-inizio-selected-works)
        var(--spazio-fine-selected-works);
    margin-block-end: var(--spazio-titolo-primo-progetto);
    background: transparent;
    color: var(--colore-inchiostro-progetti);
}

body.pagina-home-v2 .project-wall__titolo-v2 {
    --titolo-display-colore: var(--colore-inchiostro-progetti);
    --titolo-display-dimensione-fallback: var(--dimensione-titolo-lavori);
    --titolo-display-interlinea: var(--interlinea-titolo-lavori);
    --titolo-display-allungamento: var(--allungamento-titolo-lavori);
    --titolo-display-asse-larghezza: var(--asse-larghezza-titolo-lavori);
    --titolo-display-peso: var(--peso-titolo-lavori);
    --titolo-display-rientro-inizio: var(--rientro-titolo-lavori-inizio);
    --titolo-display-rientro-fine: var(--rientro-titolo-lavori-fine);
    --correzione-ottica-x: var(--correzione-ottica-titolo-lavori-x);

    inline-size: 100%;
}

body.pagina-home-v2 .project-wall__titolo-v2 > span {
    --titolo-lavori-rivelazione: 100%;

    display: block;
    padding-inline: var(--titolo-lavori-respiro-ritaglio);
    margin-inline: calc(-1 * var(--titolo-lavori-respiro-ritaglio));
    -webkit-clip-path: inset(
        calc(100% - var(--titolo-lavori-rivelazione)) 0 0 0
    );
    clip-path: inset(
        calc(100% - var(--titolo-lavori-rivelazione)) 0 0 0
    );
}

/*
 * Lo script critico in head prepara lo stesso ritaglio usato da GSAP prima
 * del primo paint. La classe resta come stato di base durante refresh e
 * ricostruzioni della timeline; viene rimossa soltanto nei fallback statici.
 */
html.raccordo-motion-in-attesa
    body.pagina-home-v2
    .project-wall__titolo-v2 > span {
    --titolo-lavori-rivelazione: var(--titolo-lavori-rivelazione-iniziale);
}

/*
 * Sul telefono il display entra intero: il bordo curvo della carta non deve
 * trasformare le lettere in frammenti orizzontali durante lo scroll.
 */
@media (max-width: 47.999rem) and (prefers-reduced-motion: no-preference) {
    html.raccordo-motion-in-attesa
        body.pagina-home-v2
        .project-wall__titolo-v2 > span {
        opacity: var(--titolo-lavori-opacita-iniziale);
        transform: translate3d(
            0,
            var(--titolo-lavori-spostamento-iniziale),
            0
        );
    }
}

@media (min-width: 48rem) and (max-width: 63.999rem) {
    body.pagina-home-v2 .featured-work {
        --profondita-fade-griglia-lavori: clamp(12rem, 22vw, 20rem);
        --spazio-inizio-selected-works: clamp(2.5rem, 5vh, 4rem);
        --spazio-fine-selected-works: clamp(2rem, 4vh, 3rem);
        --spazio-titolo-primo-progetto: clamp(3rem, 6vh, 4.5rem);
    }
}

@media (min-width: 48rem) {
    body.pagina-home-v2 .featured-work {
        --titolo-lavori-rivelazione-iniziale: 0%;
        --titolo-lavori-opacita-iniziale: 1;
        --titolo-lavori-spostamento-iniziale: 0.14rem;
    }
}

@media (min-width: 64rem) {
    body.pagina-home-v2 .featured-work {
        --profondita-fade-griglia-lavori: clamp(14rem, 18vw, 22rem);
        --spazio-inizio-selected-works: clamp(3.5rem, 7vh, 5.5rem);
        --spazio-fine-selected-works: clamp(2.5rem, 5vh, 4rem);
        --spazio-titolo-primo-progetto: clamp(4rem, 8vh, 6rem);
    }
}

@supports (height: 1svh) {
    @media (min-width: 48rem) {
        body.pagina-home-v2 .featured-work {
            --spazio-inizio-selected-works: clamp(2.5rem, 5svh, 4rem);
            --spazio-fine-selected-works: clamp(2rem, 4svh, 3rem);
            --spazio-titolo-primo-progetto: clamp(3rem, 6svh, 4.5rem);
        }
    }

    @media (min-width: 64rem) {
        body.pagina-home-v2 .featured-work {
            --spazio-inizio-selected-works: clamp(3.5rem, 7svh, 5.5rem);
            --spazio-fine-selected-works: clamp(2.5rem, 5svh, 4rem);
            --spazio-titolo-primo-progetto: clamp(4rem, 8svh, 6rem);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    body.pagina-home-v2 .project-wall__titolo-v2 > span {
        -webkit-clip-path: none;
        clip-path: none;
        filter: none;
        opacity: 1;
        transform: none;
    }
}