#intro-screen[hidden] { display: none; }
.intro-playing { overflow: hidden; }
#intro-screen {
    background: radial-gradient(ellipse at 50% 42%, #123342 0%, #0a101c 42%, #060910 80%);
    overflow: hidden;
    transition: opacity .32s ease;
}
#intro-screen.intro-exit { opacity: 0; pointer-events: none; }
.intro-grid {
    position: absolute; inset: 0; opacity: .2;
    background-image: linear-gradient(#5994a329 1px, transparent 1px), linear-gradient(90deg, #5994a329 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse, #000, transparent 70%);
}
.intro-content { position: relative; text-align: center; width: min(420px, 85vw); animation: brand-arrive .65s ease-out both; }
.intro-emblem { display: grid; place-items: center; width: 86px; height: 86px; margin: 0 auto 30px; border: 1px solid #65dbe4; border-radius: 20px 3px; transform: rotate(-5deg); box-shadow: 0 0 45px #61dfec16, inset 0 0 24px #61dfec0c; }
.intro-emblem span { font: 700 31px Consolas, monospace; color: #97f1f7; transform: rotate(5deg); letter-spacing: 2px; }
.intro-eyebrow { font: 11px Consolas, monospace; letter-spacing: 5px; color: #79cbd8; margin-bottom: 14px; }
#intro-brand { font-size: clamp(27px, 6vw, 40px); letter-spacing: 5px; color: #f0f9ff; text-shadow: none; overflow-wrap: anywhere; }
.intro-caption { color: #93a8bd; font-size: 12px; margin-top: 14px; letter-spacing: 3px; }
.intro-line { height: 2px; width: 180px; margin: 32px auto 13px; background: #263447; overflow: hidden; }
.intro-line span { display: block; height: 100%; background: #7ee8eb; transform-origin: left; animation: brand-line 1.6s ease-in-out both; }
.intro-welcome { color: #7e96ac; font-size: 10px; letter-spacing: 2px; }
#intro-skip { position: absolute; bottom: max(28px, env(safe-area-inset-bottom)); right: 30px; border: 1px solid #37475c; border-radius: 5px; padding: 10px 16px; background: #111c2b; color: #d0dce9; font: 12px sans-serif; cursor: pointer; }
#intro-skip span { margin-left: 18px; color: #70cbd4; font-size: 10px; }
#intro-skip:hover { border-color: #75e1e7; }
#intro-skip:focus-visible { outline: 2px solid #75e1e7; outline-offset: 4px; }
@keyframes brand-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes brand-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
    #intro-screen { transition: none; }
    .intro-content, .intro-line span { animation: none; }
}