html.x-intro-locked,
html.x-intro-locked body {
    overflow: hidden;
}

.x-intro {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    overflow: hidden;
    background-color: var(--x-black, #000);
}

.x-intro.is-active {
    display: block;
    animation: x-intro-reveal 0.9s ease-in-out 4.8s forwards;
}

.x-intro__panel {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
}

.x-intro__panel--we {
    background-color: var(--x-green, #66ff99);
}
.x-intro__panel--are {
    background-color: var(--x-blue, #18a0fb);
}
.x-intro__panel--extreme {
    background-color: var(--x-teal, #6ff4d4);
}

.x-intro__word {
    width: clamp(240px, 50vw, 640px);
    height: auto;
    opacity: 0;
    transform: scale(1.06);
}

/* WE — 0.00s to 0.85s */
.x-intro.is-active .x-intro__panel--we {
    animation: x-intro-panel-visibility 0.85s steps(1) 0s forwards;
}
.x-intro.is-active .x-intro__panel--we .x-intro__word {
    animation: x-intro-word-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0s forwards;
}

/* ARE — 0.85s to 1.70s */
.x-intro.is-active .x-intro__panel--are {
    animation: x-intro-panel-visibility 0.85s steps(1) 0.85s forwards;
}
.x-intro.is-active .x-intro__panel--are .x-intro__word {
    animation: x-intro-word-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.85s
        forwards;
}

/* EXTREME — 1.70s to 2.55s */
.x-intro.is-active .x-intro__panel--extreme {
    animation: x-intro-panel-visibility 0.85s steps(1) 1.7s forwards;
}
.x-intro.is-active .x-intro__panel--extreme .x-intro__word {
    animation: x-intro-word-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) 1.7s forwards;
}

/* X — 2.55s to 5.70s: pop in small, brief hold, then grow continuously  */
.x-intro__panel--x {
    background-color: var(--x-black, #000);
}
.x-intro.is-active .x-intro__panel--x {
    animation: x-intro-panel-visibility 3.15s steps(1) 2.55s forwards;
}

.x-intro__logo {
    width: clamp(140px, 26vw, 260px);
    height: auto;
    opacity: 0;
    transform: scale(0.4);
    transform-origin: center;
}
.x-intro.is-active .x-intro__logo {
    animation: x-intro-x-zoom 3s cubic-bezier(0.7, 0, 0.84, 0) 2.55s forwards;
}

@keyframes x-intro-panel-visibility {
    0% {
        opacity: 1;
        visibility: visible;
    }
    99.9% {
        opacity: 1;
        visibility: visible;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes x-intro-word-in {
    0% {
        opacity: 0;
        transform: scale(1.06);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes x-intro-x-zoom {
    0% {
        opacity: 0;
        transform: scale(0.4);
    }
    8% {
        opacity: 1;
        transform: scale(1);
    }
    30% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 1;
        transform: scale(20);
    }
}

@keyframes x-intro-reveal {
    0% {
        opacity: 1;
        pointer-events: auto;
    }
    100% {
        opacity: 0;
        pointer-events: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .x-intro,
    .x-intro.is-active {
        display: none !important;
        animation: none !important;
    }
}