/*
 * Babajaga V2 - onde continue Hero / Selected Works.
 *
 * Il canvas WebGL e il fallback statico condividono quattro creste:
 * tre onde cromatiche e l'onda-carta che introduce Selected Works.
 */

:where(body.pagina-home-v2, [data-babajaga-tema="v2"]) {
    /* Specchi RGB delle primitive consumati dal renderer e dal fallback CSS. */
    --colore-inchiostro-webgl-rgb: 7 7 10;
    --colore-carta-webgl-rgb: 248 247 244;
    --colore-blu-webgl-rgb: 33 71 255;
    --colore-viola-webgl-rgb: 124 96 255;
    --colore-magenta-webgl-rgb: 212 72 166;

    /* Altezza del campo continuo Hero / Selected Works. */
    --atmosfera-altezza-apertura: calc(
        var(--altezza-palco-hero-composizione-fallback)
        + var(--estensione-atmosfera-hero)
        + var(--altezza-intro-lavori)
    );

    /* Profili cromatici art-directed del renderer. */
    --onda-magenta-livello: 0.54;
    --onda-magenta-ampiezza: 0.025;
    --onda-magenta-frequenza: 1;
    --onda-magenta-velocita: 0.052;
    --onda-magenta-fase: 0.3;
    --onda-magenta-armonica: 0.006;
    --onda-magenta-armonica-frequenza: 2;
    --onda-magenta-pendenza: -0.005;
    --onda-viola-livello: 0.43;
    --onda-viola-ampiezza: 0.075;
    --onda-viola-frequenza: 0.5;
    --onda-viola-velocita: -0.043;
    --onda-viola-fase: 0;
    --onda-viola-armonica: 0.006;
    --onda-viola-armonica-frequenza: 1.2;
    --onda-viola-pendenza: 0;
    --onda-blu-livello: 0.265;
    --onda-blu-ampiezza: 0.018;
    --onda-blu-frequenza: 0.65;
    --onda-blu-velocita: 0.037;
    --onda-blu-fase: -0.8;
    --onda-blu-armonica: 0.006;
    --onda-blu-armonica-frequenza: 1.3;
    --onda-blu-pendenza: 0.1;
    --onda-magenta-respiro: 0.08;
    --onda-viola-respiro: 0.07;
    --onda-blu-respiro: 0.09;

    /* Posizione equivalente delle creste nel fallback statico. */
    --onda-fallback-magenta-inizio: 43%;
    --onda-fallback-viola-inizio: 50%;
    --onda-fallback-blu-inizio: 65%;
    --onda-fallback-carta-inizio: 68%;

    /* Onda-carta: corsa, profilo armonico, grana e assestamento finale. */
    --onda-carta-progresso-inizio: 0.06;
    --onda-carta-progresso-fine: 0.94;
    --onda-carta-curva-esponente: 3;
    --onda-carta-livello-inizio: -0.18;
    --onda-carta-livello-fine: 1.08;
    --onda-carta-ampiezza-inizio: 0.09;
    --onda-carta-ampiezza-fine: 0.034;
    --onda-carta-frequenza: 0.84;
    --onda-carta-velocita: 0.03;
    --onda-carta-armonica: 0.19;
    --onda-carta-armonica-frequenza: 1.65;
    --onda-carta-fase: -0.7;
    --onda-carta-grana: 0.014;
    --onda-carta-bordo-luce: 0.045;
    --onda-carta-bordo-ombra: 0.15;
    --onda-carta-assestamento: 0.012;

    /* Budget WebGL2: un piano, una draw call e rumore procedurale monodimensionale. */
    --onde-webgl-fps-mobile: 30;
    --onde-webgl-fps-desktop: 45;
    --onde-webgl-tempo-statico: 0;
    --onde-webgl-dpr-massimo: 1.5;
    --onde-webgl-scala-mobile: 0.82;
    --onde-webgl-scala-desktop: 1;
    --onde-webgl-budget-mobile: 900000;
    --onde-webgl-budget-desktop: 2400000;
    --atmosfera-durata-attivazione: 420ms;
    --onde-stato-iniziale-rivelazione: 0;
}

@media (min-width: 48rem) and (max-width: 63.999rem) {
    :where(body.pagina-home-v2, [data-babajaga-tema="v2"]) {
        --onda-carta-curva-esponente: 1.48;
    }
}

@media (min-width: 48rem) {
    :where(body.pagina-home-v2, [data-babajaga-tema="v2"]) {
        --onda-magenta-livello: 0.56;
        --onda-magenta-ampiezza: 0.026;
        --onda-magenta-frequenza: 1.18;
        --onda-magenta-velocita: 0.06;
        --onda-magenta-fase: 0.3;
        --onda-magenta-respiro: 0.09;
        --onda-viola-livello: 0.435;
        --onda-viola-ampiezza: 0.067;
        --onda-viola-frequenza: 1.08;
        --onda-viola-velocita: -0.05;
        --onda-viola-fase: -0.58;
        --onda-viola-respiro: 0.075;
        --onda-blu-livello: 0.275;
        --onda-blu-ampiezza: 0.044;
        --onda-blu-frequenza: 0.82;
        --onda-blu-velocita: 0.044;
        --onda-blu-fase: -1.55;
        --onda-blu-pendenza: 0.045;
        --onda-blu-respiro: 0.095;
        --onda-carta-ampiezza-fine: 0.038;
        --onda-carta-velocita: 0.033;
        --onda-carta-armonica: 0.2;
        --onda-carta-fase: -0.78;
    }
}

@media (min-width: 64rem) {
    :where(body.pagina-home-v2, [data-babajaga-tema="v2"]) {
        --onda-magenta-livello: 0.58;
        --onda-magenta-ampiezza: 0.026;
        --onda-magenta-frequenza: 1.35;
        --onda-magenta-velocita: 0.07;
        --onda-magenta-fase: 0.3;
        --onda-magenta-armonica: 0.006;
        --onda-magenta-armonica-frequenza: 2.45;
        --onda-magenta-pendenza: 0;
        --onda-magenta-respiro: 0.1;
        --onda-viola-livello: 0.44;
        --onda-viola-ampiezza: 0.06;
        --onda-viola-frequenza: 1.55;
        --onda-viola-velocita: -0.058;
        --onda-viola-fase: -1.16;
        --onda-viola-armonica: 0.01;
        --onda-viola-armonica-frequenza: 2.1;
        --onda-viola-pendenza: 0;
        --onda-viola-respiro: 0.08;
        --onda-blu-livello: 0.28;
        --onda-blu-ampiezza: 0.06;
        --onda-blu-frequenza: 1;
        --onda-blu-velocita: 0.05;
        --onda-blu-fase: -2.39;
        --onda-blu-armonica: 0.008;
        --onda-blu-armonica-frequenza: 1.75;
        --onda-blu-pendenza: 0;
        --onda-blu-respiro: 0.1;
        --onda-carta-ampiezza-fine: 0.04;
        --onda-carta-velocita: 0.036;
        --onda-carta-armonica: 0.21;
        --onda-carta-fase: -0.86;
        --onda-fallback-magenta-inizio: 38%;
        --onda-fallback-viola-inizio: 44%;
        --onda-fallback-blu-inizio: 61%;
        --onda-carta-curva-esponente: 1.4;
    }
}

body.pagina-home-v2 .home-opening-v2 {
    position: relative;
    isolation: isolate;
    background: var(--colore-carta-luminosa);
}

body.pagina-home-v2 .home-opening-v2__atmosfera {
    position: absolute;
    z-index: 0;
    inset: 0 0 auto;
    overflow: clip;
    block-size: var(--atmosfera-altezza-apertura);
    pointer-events: none;
    background: rgb(var(--colore-inchiostro-webgl-rgb));
}

body.pagina-home-v2 .home-opening-v2__atmosfera-fallback {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background: rgb(var(--colore-inchiostro-webgl-rgb));
    opacity: 1;
    transition: opacity var(--atmosfera-durata-attivazione) var(--curva-uscita);
}

body.pagina-home-v2 .home-opening-v2__atmosfera-fallback > span {
    position: absolute;
    inset-block-end: 0;
    inset-inline: -10%;
    display: block;
}

body.pagina-home-v2 .home-opening-v2__atmosfera-fallback > span:nth-child(1) {
    inset-block-start: var(--onda-fallback-magenta-inizio);
    background: rgb(var(--colore-magenta-webgl-rgb));
    clip-path: polygon(
        0 3%,
        20% 0,
        43% 2%,
        66% 6%,
        84% 5%,
        100% 3%,
        100% 100%,
        0 100%
    );
}

body.pagina-home-v2 .home-opening-v2__atmosfera-fallback > span:nth-child(2) {
    inset-block-start: var(--onda-fallback-viola-inizio);
    background: rgb(var(--colore-viola-webgl-rgb));
    clip-path: polygon(
        0 8%,
        18% 3%,
        45% 0,
        68% 5%,
        100% 9%,
        100% 100%,
        0 100%
    );
}

body.pagina-home-v2 .home-opening-v2__atmosfera-fallback > span:nth-child(3) {
    inset-block-start: var(--onda-fallback-blu-inizio);
    background: rgb(var(--colore-blu-webgl-rgb));
    clip-path: polygon(
        0 11%,
        24% 10%,
        52% 7%,
        76% 3%,
        100% 0,
        100% 100%,
        0 100%
    );
}

body.pagina-home-v2 .home-opening-v2__atmosfera-fallback > span:nth-child(4) {
    inset-block-start: var(--onda-fallback-carta-inizio);
    background: rgb(var(--colore-carta-webgl-rgb));
    clip-path: polygon(
        0 clamp(2.25rem, 6vw, 5rem),
        12% clamp(1.5rem, 4vw, 3.5rem),
        25% clamp(0.75rem, 2vw, 1.75rem),
        38% 0,
        52% clamp(1.25rem, 3vw, 2.75rem),
        66% clamp(3rem, 7vw, 6rem),
        80% clamp(4rem, 9vw, 7.5rem),
        91% clamp(3rem, 7vw, 6rem),
        100% clamp(1.75rem, 4vw, 3.5rem),
        100% 100%,
        0 100%
    );
}

body.pagina-home-v2 .home-opening-v2__atmosfera-fallback > span:nth-child(5) {
    display: none;
}

@media (min-width: 64rem) {
    body.pagina-home-v2 .home-opening-v2__atmosfera-fallback > span:nth-child(1) {
        clip-path: polygon(
            0 4%,
            15% 0,
            33% 2%,
            52% 7%,
            72% 4%,
            88% 0,
            100% 3%,
            100% 100%,
            0 100%
        );
    }

    body.pagina-home-v2 .home-opening-v2__atmosfera-fallback > span:nth-child(2) {
        clip-path: polygon(
            0 11%,
            13% 5%,
            28% 0,
            46% 6%,
            64% 13%,
            78% 7%,
            91% 1%,
            100% 5%,
            100% 100%,
            0 100%
        );
    }

    body.pagina-home-v2 .home-opening-v2__atmosfera-fallback > span:nth-child(3) {
        clip-path: polygon(
            0 6%,
            14% 11%,
            29% 14%,
            47% 7%,
            63% 0,
            79% 6%,
            94% 13%,
            100% 12%,
            100% 100%,
            0 100%
        );
    }

    body.pagina-home-v2 .home-opening-v2__atmosfera-fallback > span:nth-child(4) {
        clip-path: polygon(
            0 clamp(3rem, 4vw, 4.5rem),
            10% clamp(2rem, 2.8vw, 3rem),
            22% clamp(0.75rem, 1.2vw, 1.4rem),
            34% 0,
            46% clamp(0.75rem, 1.2vw, 1.4rem),
            58% clamp(2.25rem, 3vw, 3.5rem),
            70% clamp(3.5rem, 4.8vw, 5.5rem),
            82% clamp(3rem, 4vw, 4.75rem),
            92% clamp(1.4rem, 2vw, 2.4rem),
            100% clamp(0.6rem, 1vw, 1.2rem),
            100% 100%,
            0 100%
        );
    }
}

body.pagina-home-v2 .home-opening-v2__atmosfera-canvas {
    position: sticky;
    z-index: 1;
    inset-block-start: 0;
    display: block;
    inline-size: 100%;
    block-size: 100vh;
    block-size: 100svh;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--atmosfera-durata-attivazione) var(--curva-uscita);
}

body.pagina-home-v2
    .home-opening-v2__atmosfera.is-canvas-ready
    .home-opening-v2__atmosfera-canvas {
    opacity: 1;
}

body.pagina-home-v2
    .home-opening-v2__atmosfera.is-canvas-ready
    .home-opening-v2__atmosfera-fallback {
    opacity: 0;
}

body.pagina-home-v2 .hero-v2,
body.pagina-home-v2 .featured-work {
    z-index: 1;
    background: transparent;
}

@media (prefers-reduced-motion: reduce) {
    body.pagina-home-v2 .home-opening-v2__atmosfera-canvas {
        display: none;
        transition: none;
    }

    body.pagina-home-v2 .home-opening-v2__atmosfera-fallback {
        transition: none;
    }
}