/* ════════════════════════════════════════════════════════
   INTROS — real game footage per theme, then our beats on a
   canvas (footageIntro in the script). Ended from JS, since
   video length varies; skippable; off for reduced-motion.
═════════════════════════════════════════════════════════ */
#intro { display: none; position: fixed; inset: 0; z-index: 100; overflow: hidden; cursor: pointer; }
#intro > .scene { display: none; position: absolute; inset: 0; }
html.intro #intro { display: block; }
html[data-theme="hsr"] #intro .intro-hsr,
html[data-theme="genshin"] #intro .intro-genshin,
html[data-theme="zzz"] #intro .intro-zzz { display: block; }
#intro .scene canvas, #intro .scene video { position: absolute; inset: 0; width: 100%; height: 100%; }
#intro .scene video { object-fit: contain; background: #000; }   /* show the whole frame, letterboxed */
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }
.skip { position: absolute; right: 18px; bottom: 16px; z-index: 5; font-size: 0.66rem; color: rgba(255,255,255,.45); }

/* ─── HSR: canvas warp (see hsrIntro in the script). Beats follow the real
   5★ warp: cyan beam → blue hyperspace → rainbow Pass → gold burst + train
   windows → gold door → flash → five sparkles → reveal with Path label ─── */
.intro-hsr { background: #03060f; }
.hsr-label {
  position: absolute; left: 9%; top: 44%; display: flex; align-items: center; gap: 16px;
  color: #fff; opacity: 0;
}
.hsr-label svg { width: clamp(56px, 7vw, 84px); height: auto; filter: drop-shadow(0 0 10px rgba(255,255,255,.35)); }
.hsr-label span { font: 600 clamp(1.6rem, 3.6vw, 2.6rem)/1.1 var(--body); letter-spacing: .01em; text-shadow: 0 2px 18px rgba(0,0,0,.6); }
@media (max-aspect-ratio: 1/1) { .hsr-label { left: 50%; top: 71%; transform: translateX(-50%); } }   /* over the feet, which end at 74% */

/* ─── Genshin: real wish footage (cloud vortex → meteor → flash), then our reveal in
   the game's style: black silhouette on the orange burst → gold rays → Electro label ─── */
.intro-genshin { background: #000; }
.gi-label { position: absolute; left: 6%; top: 58%; display: flex; align-items: center; gap: 14px; color: #fff; opacity: 0; }
.gi-label img { width: clamp(52px, 6.5vw, 80px); height: auto; filter: drop-shadow(0 0 12px rgba(190,140,255,.6)); }
.gi-label b { display: block; font: 700 clamp(1.6rem, 3.6vw, 2.6rem)/1.1 var(--body); text-shadow: 0 2px 14px rgba(0,0,0,.55); }
.gi-label .stars { display: flex; gap: 4px; margin-top: 6px; color: #ffcc32; font-size: clamp(1.2rem, 2.3vw, 1.7rem); text-shadow: 0 0 8px rgba(255,204,50,.7); }
.gi-label .stars i { font-style: normal; display: inline-block; opacity: 0; }
@media (max-aspect-ratio: 1/1) { .gi-label { left: 50%; top: 71%; transform: translateX(-50%); } }   /* over the feet, which end at 74% */

/* ─── ZZZ: real Signal Search footage (tape reel → A/B/gold-S glitch → TV pyramid), then
   the real "SUPER AGENT / CONTRACTED" stage with you on it. The agent was erased from
   two stills (SAM mask + inpainting); dark stage → flash → gold-lit → lights cool ─── */
.intro-zzz { background: #000; }
.zzz-plate {
  position: absolute; left: 50%; top: 93%; padding: 6px 22px; border-radius: 999px; opacity: 0;
  background: rgba(10,10,12,.92); color: #fff; font: 700 clamp(.9rem, 1.5vw, 1.25rem)/1.2 var(--body);
  white-space: nowrap; transform: translate(-50%, -50%);
}