.intro {
    position: fixed; inset: 0; z-index: 1000; overflow: hidden;
    background: #000; opacity: 1;
    will-change: opacity;
    transition: opacity 260ms cubic-bezier(.4,0,.2,1);
}
.intro.is-blending { transition: none; }
.intro.is-leaving { opacity: 0; pointer-events: none; }
.intro-video { opacity: 0; transition: opacity 80ms linear; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.intro-hud {
    position: absolute; bottom: max(9vh, calc(env(safe-area-inset-bottom) + 32px)); left: 50%;
    width: min(640px, calc(100% - 64px)); transform: translateX(-50%);
}
.intro-caption {
    margin-bottom: 20px; text-align: right;
    font: 400 clamp(48px, 7vw, 80px)/1 Arial, sans-serif;
    letter-spacing: -.065em; font-variant-numeric: tabular-nums; color: #fff;
}
.intro-track { height: 6px; overflow: hidden; background: #ffffff30; border-radius: 8px; }
.intro-fill {
    width: 100%; height: 100%; border-radius: inherit;
    transform: scaleX(var(--progress, 0)); transform-origin: left;
    background: #fff; transition: transform 120ms linear;
}
.intro-skip {
    position: absolute; top: max(20px, env(safe-area-inset-top)); right: 24px;
    width: 40px; height: 40px; padding: 0; color: #fff9; background: transparent;
    border: 0; font: 300 28px/1 Arial, sans-serif;
}
.intro-skip:hover { color: #fff; }
/* Remove all loading UI before any live content is revealed. */
.intro.is-revealing .intro-hud, .intro.is-revealing .intro-skip,
.intro.is-leaving .intro-hud, .intro.is-leaving .intro-skip { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .intro { transition: none; } .intro-fill { transition: none; } }

/* Show actual decoded motion only; never a poster while waiting for the scene. */
.intro.is-revealing .intro-video { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .intro-video { transition: none; }
}

/* The dark corners bridge the glasses and live scene, then open outward. */
.intro-entrance {
    position: fixed;
    inset: -2px;
    z-index: 1001;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 48%,
        transparent 38%, rgba(0, 0, 0, .12) 53%,
        rgba(0, 0, 0, .58) 76%, rgba(0, 0, 0, .82) 100%);
    transform-origin: 50% 48%;
    will-change: transform, opacity;
    animation: intro-corners-open 1800ms cubic-bezier(.22,.61,.36,1) both;
}
@keyframes intro-corners-open {
    0% { opacity: 0; transform: scale(1); }
    8% { opacity: 1; transform: scale(1); }
    32% { opacity: .95; transform: scale(1.12); }
    100% { opacity: 0; transform: scale(2.5); }
}
@media (prefers-reduced-motion: reduce) {
    .intro-entrance { display: none; animation: none; }
}