/* The 4-second opening on the home page. Original artwork only: no game footage or logos. */
#intro { display:none; position:fixed; inset:0; z-index:100; background:var(--bg,#0a0912); overflow:hidden;
  place-items:center; text-align:center; animation:introFailsafe .01s 6s forwards; }
html.intro-on #intro { display:grid; }
html.intro-on body { overflow:hidden; }
#intro.out { opacity:0; transition:opacity .45s ease; pointer-events:none; }
@keyframes introFailsafe { to { opacity:0; visibility:hidden; pointer-events:none; } } /* never trap a visitor if the script fails */

.intro-skip { position:absolute; top:max(16px, env(safe-area-inset-top)); right:16px; z-index:2; background:rgba(255,255,255,.08);
  color:#f1eeff; border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:8px 16px; font:600 14px system-ui, sans-serif; cursor:pointer; }
.intro-skip:hover { background:rgba(255,255,255,.16); }

#intro .intro-brand, #intro .intro-word { font-family:var(--font-display, 'Russo One', system-ui, sans-serif); font-weight:400; padding:0; border:0; }
#intro .intro-brand::before { content:none; }
/* drifting diagonal light streaks behind everything */
.intro-streaks { position:absolute; inset:-30%; transform:rotate(-18deg);
  background:repeating-linear-gradient(90deg, transparent 0 90px, rgba(124,92,255,.13) 90px 92px, transparent 92px 210px, rgba(39,217,245,.10) 210px 211px);
  animation:introDrift 4s linear both; }
@keyframes introDrift { from { transform:rotate(-18deg) translateX(0); } to { transform:rotate(-18deg) translateX(-240px); } }
.intro-glow { position:absolute; width:60vmax; height:60vmax; left:50%; top:50%; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(112,77,255,.38), transparent); animation:introGlow 4s ease-in-out both; }
@keyframes introGlow { 0% { opacity:0; } 30% { opacity:.9; } 100% { opacity:.6; } }

.intro-stage { position:relative; width:min(92vw, 900px); height:40vh; display:grid; place-items:center; }
.intro-word, .intro-brand { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; margin:0; font-family:var(--font-display, 'Russo One', system-ui, sans-serif); font-weight:400; text-transform:uppercase; letter-spacing:.02em; }
.intro-word { font-size:clamp(34px, 9vw, 96px); line-height:1; opacity:0; }
.intro-word.on { animation:introPunch .2s ease-out both; }
/* transform+opacity only (no filter:blur): this runs 12 times in under 2 seconds as the genre
   words cycle, and animating filter forces a repaint on every frame - visibly janky on phones. */
@keyframes introPunch { from { opacity:0; transform:scale(1.35); } to { opacity:1; transform:none; } }
.intro-count { position:fixed; left:0; bottom:12vh; width:100%; font:700 13px system-ui, sans-serif; letter-spacing:.35em; color:#a6a1c8; text-transform:uppercase; opacity:.9; transition:opacity .3s; }
.intro-count.gone { opacity:0; }

.intro-brand { font-size:clamp(44px, 12vw, 130px); opacity:0; transform:scale(.8); color:#fff; }
.intro-brand span { color:var(--cyan,#27d9f5); }
.intro-brand.on { animation:introBrand .7s cubic-bezier(.2,.9,.2,1) both; }
@keyframes introBrand { from { opacity:0; transform:scale(.8); letter-spacing:.3em; } to { opacity:1; transform:scale(1); letter-spacing:.02em; } }
#intro .intro-brand.on { text-shadow:0 0 40px rgba(112,77,255,.7); }
.intro-welcome { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; margin:0; opacity:0;
  font-family:var(--font-display, 'Russo One', system-ui, sans-serif); font-weight:400; font-size:clamp(40px, 11vw, 120px); letter-spacing:.08em; text-transform:uppercase;
  color:#fff; text-shadow:0 0 40px rgba(39,217,245,.55); }
.intro-welcome.on { animation:introPunch .35s ease-out both; }
.intro-brand.away { animation:none; opacity:0; transition:opacity .15s; }
.intro-tag { position:absolute; left:0; bottom:0; width:100%; font:500 clamp(14px, 2.6vw, 20px) system-ui, sans-serif; color:#c9c4ea; opacity:0; }
.intro-tag.on { animation:introFade .6s .3s both; }
@keyframes introFade { to { opacity:1; } }

@media (prefers-reduced-motion: reduce) { #intro { display:none !important; } html.intro-on body { overflow:auto; } }