/*
 * Opening sequence V2.
 * Componente globale, montato da wp_body_open e indipendente dalla Hero.
 */

.intro-loader {
    --intro-attesa-minima: 1.08s;
    --intro-attesa-massima: 1.9s;
    --intro-limite-assoluto: 3.2s;
    --intro-uscita-durata: 1.18s;
    --intro-brand-ingresso-durata: 0.72s;
    --intro-brand-uscita-durata: 0.34s;
    --intro-pannelli-ritardo: 0.22s;
    --intro-pannelli-durata: 0.88s;
    --intro-mobile-pannelli-ritardo: 0.2s;
    --intro-mobile-pannelli-durata: 0.9s;
    --intro-logo-misura: clamp(5.75rem, 9.25vw, 8.75rem);
    --intro-wordmark-misura: clamp(0.8rem, 0.72rem + 0.3vw, 1.05rem);
    --intro-brand-spazio: var(--spazio-4);
    --intro-wordmark-tracciamento: 0.2em;
    --intro-livello: 2147483000;
    --intro-curva-ingresso: cubic-bezier(0.16, 1, 0.3, 1);
    --intro-curva-apertura: cubic-bezier(0.76, 0, 0.24, 1);

    position: fixed;
    z-index: var(--intro-livello);
    inset: 0;
    display: none;
    overflow: hidden;
    isolation: isolate;
    background: var(--colore-nero-profondo);
    color: var(--colore-carta-fredda);
    pointer-events: auto;
}

html.intro-loader-attivo,
html.intro-loader-attivo body {
    overflow: hidden;
    overscroll-behavior: none;
}

html.intro-loader-attivo {
    /* Il token vive sul body V2: il fallback colora anche il gutter radice. */
    background-color: var(--colore-nero-profondo, #050507);
}

html.intro-loader-montato .intro-loader {
    display: block;
    animation: babajaga-intro-loader-failsafe 1ms var(--intro-limite-assoluto) forwards;
}

.intro-loader__pannelli {
    position: absolute;
    z-index: 0;
    inset: 0;
}

.intro-loader__pannelli--desktop {
    display: none;
}

.intro-loader__pannelli--mobile {
    display: block;
}

.intro-loader__pannello,
.intro-loader__pannello-mobile {
    display: block;
    background: var(--colore-nero-profondo);
    will-change: transform;
}

.intro-loader__pannello {
    position: absolute;
    inset-inline: 0;
    block-size: calc(50% + 1px);
    transform: scaleY(1);
}

.intro-loader__pannello--alto {
    inset-block-start: 0;
    transform-origin: 50% 0;
}

.intro-loader__pannello--basso {
    inset-block-end: 0;
    transform-origin: 50% 100%;
}

.intro-loader__pannello-mobile {
    position: absolute;
    inset-block: 0;
    inline-size: calc(50% + 1px);
    transform: scaleX(1);
}

.intro-loader__pannello-mobile--sinistra {
    inset-inline-start: 0;
    transform-origin: 0 50%;
}

.intro-loader__pannello-mobile--destra {
    inset-inline-end: 0;
    transform-origin: 100% 50%;
}

.intro-loader__brand {
    position: absolute;
    z-index: 1;
    inset: 50% auto auto 50%;
    display: grid;
    justify-items: center;
    gap: var(--intro-brand-spazio);
    translate: -50% -50%;
}

.intro-loader__marchio {
    display: block;
    inline-size: var(--intro-logo-misura);
    aspect-ratio: 1;
    opacity: 0;
    transform: translateY(0.65rem) scale(0.94);
    animation: babajaga-intro-logo-ingresso
        var(--intro-brand-ingresso-durata)
        var(--intro-curva-ingresso)
        0.12s
        both;
}

.intro-loader__logo-immagine {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    filter: invert(1);
}

.intro-loader__wordmark {
    font-family: var(--famiglia-display);
    font-size: var(--intro-wordmark-misura);
    font-stretch: 100%;
    font-variation-settings: "wdth" 100, "wght" 650;
    font-weight: 650;
    letter-spacing: var(--intro-wordmark-tracciamento);
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(0.7rem);
    animation: babajaga-intro-wordmark-ingresso
        0.64s
        var(--intro-curva-ingresso)
        0.32s
        both;
}

.intro-loader[data-intro-state="exiting"] {
    background: transparent;
    animation: babajaga-intro-loader-uscita var(--intro-uscita-durata) linear both;
    pointer-events: none;
}

.intro-loader[data-intro-state="exiting"] .intro-loader__brand {
    animation: babajaga-intro-brand-uscita
        var(--intro-brand-uscita-durata)
        var(--intro-curva-ingresso)
        both;
}

.intro-loader[data-intro-state="exiting"] .intro-loader__pannello {
    animation: babajaga-intro-pannello-uscita
        var(--intro-pannelli-durata)
        var(--intro-curva-apertura)
        var(--intro-pannelli-ritardo)
        both;
}

.intro-loader[data-intro-state="exiting"] .intro-loader__pannello-mobile {
    animation: babajaga-intro-pannello-mobile-uscita
        var(--intro-mobile-pannelli-durata)
        var(--intro-curva-apertura)
        var(--intro-mobile-pannelli-ritardo)
        both;
}

@keyframes babajaga-intro-logo-ingresso {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes babajaga-intro-wordmark-ingresso {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes babajaga-intro-brand-uscita {
    to {
        opacity: 0;
        transform: translateY(-0.4rem) scale(1.025);
    }
}

@keyframes babajaga-intro-pannello-uscita {
    to {
        transform: scaleY(0);
    }
}

@keyframes babajaga-intro-pannello-mobile-uscita {
    to {
        transform: scaleX(0);
    }
}

@keyframes babajaga-intro-loader-uscita {
    0%,
    96% {
        visibility: visible;
        opacity: 1;
    }

    100% {
        visibility: hidden;
        opacity: 0;
    }
}

@keyframes babajaga-intro-loader-failsafe {
    to {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }
}

@media (min-width: 48rem) {
    .intro-loader__pannelli--desktop {
        display: block;
    }

    .intro-loader__pannelli--mobile {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.intro-loader-attivo,
    html.intro-loader-attivo body {
        overflow: auto;
        overscroll-behavior: auto;
    }

    html.intro-loader-montato .intro-loader {
        display: none;
    }
}