/* ════════════════════════════════════════════════════════════════════
   Home page — boot intro overlay (coin flip, glitch, world reveal)
   Shares tokens with site.css; loaded after it, before home.css.
   ════════════════════════════════════════════════════════════════════ */

html.skip-intro .intro{display:none!important}

/* #region Boot intro shell */
/* ─── Boot intro shell ───────────────────────────────────────────── */
/* the underlying site fades in as the intro overlay fades out */
.site{opacity:1}
body.intro-on .site{opacity:0}
.site{transition:opacity .7s ease}
/* overlay container — full-screen, sits above everything, fades away when done */
.intro{position:fixed;inset:0;z-index:200;background:var(--fp-black);overflow:hidden}
.intro.gone{opacity:0;pointer-events:none;transition:opacity .7s ease}
.intro[hidden]{display:none}
/* CRT scanline texture — dim during boot, brighter once retro kicks in */
.intro-scan{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:overlay;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 3px);
  transition:opacity .5s ease}
.intro.boot .intro-scan{opacity:.55}
.intro.retro .intro-scan{opacity:.85}
/* white flash on the "surge" cue (the modern-identity reveal hit) */
.intro-flash{position:absolute;inset:0;pointer-events:none;background:var(--fp-cream);opacity:0;z-index:3}
.intro.surge .intro-flash{animation:surge .34s ease-out 1}
@keyframes surge{0%{opacity:0}22%{opacity:.55}100%{opacity:0}}

/* GLITCH burst — retro holds and tears apart for a beat before it resolves.
   Title, world names, scanlines, and the coin all judder independently. */
.intro.glitch .intro-title{animation:glitch-shift .12s steps(2,jump-none) infinite}
.intro.glitch .iw{animation:glitch-shift .1s steps(2,jump-none) infinite}
.intro.glitch .iw[data-i="1"]{animation-duration:.14s}
.intro.glitch .iw[data-i="2"]{animation-duration:.08s}
.intro.glitch .intro-scan{animation:glitch-scan .09s steps(2,jump-none) infinite}
.intro.glitch .coin-inner{animation:glitch-coin .11s steps(2,jump-none) infinite}
/* the whole overlay tears — signal-loss bands + jitter across the entire page */
.intro.glitch{animation:glitch-page .12s steps(2,jump-none) infinite}
@keyframes glitch-page{
  0%{transform:translate(0,0);clip-path:inset(0 0 0 0)}
  22%{transform:translate(-6px,1px);clip-path:inset(7% 0 63% 0)}
  44%{transform:translate(7px,-1px);clip-path:inset(56% 0 9% 0)}
  66%{transform:translate(-4px,0);clip-path:inset(31% 0 41% 0)}
  88%{transform:translate(5px,1px);clip-path:inset(0 0 78% 0)}
  100%{transform:translate(0,0);clip-path:inset(0 0 0 0)}
}

/* ─── the glitch RESOLVES into the modern identity ───────────────── */
/* Removing .retro lets .intro-title / .iw transition from 8-bit pixel type
   (with RGB fringe) into the sleek modern faces. .modern punctuates that
   landing with a clean pop + soft glow, synced to the surge hit. */
.intro.modern .intro-center{animation:modern-pop .55s cubic-bezier(.16,1,.3,1) 1}
@keyframes modern-pop{0%{transform:translateY(-50%) scale(1.07)}62%{transform:translateY(-50%) scale(.985)}100%{transform:translateY(-50%) scale(1)}}
.intro.modern .intro-title{color:var(--fp-cream);text-shadow:0 0 22px rgba(242,241,230,.18)}
.intro.modern .iw{text-shadow:0 0 28px rgba(213,232,76,.12)}
.intro.modern .iw[data-i="1"]{text-shadow:0 0 28px rgba(148,120,255,.16)}
.intro.modern .iw[data-i="2"]{text-shadow:0 0 28px rgba(255,138,60,.14)}
/* glitch-phase keyframes — text-tear, scanline jitter, coin jitter */
@keyframes glitch-shift{
  0%{transform:translate(0,0);clip-path:inset(0 0 0 0);text-shadow:-2px 0 rgba(255,40,150,.9),2px 0 rgba(40,210,255,.9)}
  20%{transform:translate(-4px,1px);clip-path:inset(12% 0 58% 0);text-shadow:-6px 0 rgba(255,40,150,.95),5px 0 rgba(40,210,255,.95)}
  40%{transform:translate(5px,-1px);clip-path:inset(62% 0 8% 0);text-shadow:5px 0 rgba(255,40,150,.9),-5px 0 rgba(40,210,255,.9)}
  60%{transform:translate(-3px,0);clip-path:inset(34% 0 40% 0);text-shadow:-7px 0 rgba(255,40,150,1),6px 0 rgba(40,210,255,1)}
  80%{transform:translate(4px,1px);clip-path:inset(0 0 0 0);text-shadow:6px 0 rgba(255,40,150,.9),-6px 0 rgba(40,210,255,.95)}
  100%{transform:translate(0,0);clip-path:inset(0 0 0 0);text-shadow:-2px 0 rgba(255,40,150,.9),2px 0 rgba(40,210,255,.9)}
}
@keyframes glitch-scan{0%{opacity:.85;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}100%{opacity:.6;transform:translateY(2px)}}
@keyframes glitch-coin{0%{transform:translate(0,0)}33%{transform:translate(-5px,2px)}66%{transform:translate(6px,-2px)}100%{transform:translate(0,0)}}
/* vignette — darkens the edges to focus attention on center content */
.intro-vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 80% at 50% 50%,transparent 40%,rgba(0,0,0,.7) 100%)}
/* #endregion */

/* #region retro spinning coin */
/* ─── retro spinning coin ────────────────────────────────────────── */
/* wrapper — pops in (coinin), drops down (coindown), flies off (part) */
.coin-wrap{position:absolute;left:50%;top:50%;z-index:4;
  transform:translate(-50%,-50%) scale(.55);opacity:0;perspective:1700px;
  transition:opacity .5s ease, transform 1.05s cubic-bezier(.16,1,.3,1)}
.intro.coinin .coin-wrap{opacity:1;transform:translate(-50%,-50%) scale(1);
  animation:coin-flick .55s steps(2,jump-none) 1}
.intro.coindown .coin-wrap{transform:translate(-50%,-50%) translateY(min(34vh,330px)) scale(.34);
  transition:transform .89s cubic-bezier(.32,.08,.22,1), opacity .5s ease}
.intro.part .coin-wrap{opacity:0;transform:translate(-50%,-50%) translateY(min(48vh,460px)) scale(.2)}
@keyframes coin-flick{0%{opacity:0}18%{opacity:1}30%{opacity:.18}46%{opacity:1}60%{opacity:.4}100%{opacity:1}}
/* 3D spin — inner card rotates on the Y axis, front/back faces swap into view */
.coin-inner{position:relative;width:min(340px,50vw);height:min(340px,50vw);
  transform-style:preserve-3d;will-change:transform}
.intro.coinspin .coin-inner{animation:coin-spin 3.6s cubic-bezier(.3,.02,.22,1) forwards}
@keyframes coin-spin{from{transform:rotateY(0deg)}to{transform:rotateY(1800deg)}}
.coin-face{position:absolute;inset:0;backface-visibility:hidden;
  display:flex;align-items:center;justify-content:center}
.coin-face.back{transform:rotateY(180deg)}
.coin-face img{width:100%;height:auto;image-rendering:pixelated;filter:drop-shadow(0 0 28px rgba(213,232,76,.45))}
/* #endregion */

/* #region title / world names typography */
/* ─── title / world names typography ─────────────────────────────── */
/* centered stack holding the kicker title + the three world names */
.intro-center{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:30px;text-align:center;pointer-events:none}
/* kicker title ("SELECT YOUR WORLD") — fades in, CRT flicker-on effect */
.intro-title{font-family:var(--mono);font-size:clamp(15px,2vw,22px);letter-spacing:.5em;text-transform:uppercase;
  color:var(--fp-cream);opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .6s ease,text-shadow .3s ease,font-size .25s ease}
.intro.titlein .intro-title{opacity:.92;transform:none}
.intro.flick .intro-title{animation:crt-on .22s steps(2,jump-none) 1}
@keyframes crt-on{0%{opacity:0}30%{opacity:1}45%{opacity:.15}65%{opacity:1}100%{opacity:.92}}
/* retro 8-bit phase — resolves to sleek when .retro is removed */
.intro.retro .intro-title{font-family:"Press Start 2P",var(--mono);font-size:clamp(10px,1.35vw,15px);letter-spacing:.16em;
  text-shadow:-2px 0 rgba(255,40,150,.75),2px 0 rgba(40,210,255,.75)}
/* world names (Music / Games / Film) — each with a small colored subtitle */
.intro-worlds{display:flex;gap:clamp(26px,5vw,72px);align-items:baseline}
.iw{font-family:var(--stamp);font-size:clamp(30px,5vw,64px);text-transform:uppercase;line-height:.9;
  color:var(--fp-cream);opacity:0;transform:translateY(16px) scale(.96);
  transition:opacity .45s ease,transform .55s cubic-bezier(.16,1,.3,1),text-shadow .3s ease,font-size .25s ease;display:flex;flex-direction:column;align-items:center;gap:8px}
.iw i{font-family:var(--mono);font-size:13px;font-style:normal;letter-spacing:.3em;transition:font-size .25s ease}
.intro.retro .iw{font-family:"Press Start 2P",var(--stamp);font-size:clamp(15px,2.5vw,30px);
  text-shadow:-2px 0 rgba(255,40,150,.6),2px 0 rgba(40,210,255,.6)}
.intro.retro .iw i{font-family:"Press Start 2P",var(--mono);font-size:clamp(8px,1vw,11px)}
.iw[data-i="0"] i{color:var(--fp-lime)} .iw[data-i="1"] i{color:var(--in-violet)} .iw[data-i="2"] i{color:var(--fp-orange)}
.iw.show{opacity:1;transform:none}
/* "part" phase — the three names fly outward off-screen as the intro ends */
.intro.part .iw{transition:opacity .5s ease,transform .7s cubic-bezier(.7,0,.3,1)}
.intro.part .iw[data-i="0"]{opacity:0;transform:translate(-46vw,30vh) scale(.7)}
.intro.part .iw[data-i="1"]{opacity:0;transform:translateY(34vh) scale(.7)}
.intro.part .iw[data-i="2"]{opacity:0;transform:translate(46vw,30vh) scale(.7)}
.intro.part .intro-title{opacity:0;transform:translateY(-24px)}
/* #endregion */

/* #region controls (mute / skip) */
/* ─── controls (mute / skip) ─────────────────────────────────────── */
.intro-controls{position:absolute;bottom:24px;right:26px;z-index:2;display:flex;gap:22px;align-items:center}
.intro-mute,.intro-skip{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fp-cream);opacity:.72;background:none;border:none;cursor:pointer;
  padding:6px 10px;min-height:24px}
.intro-mute:hover,.intro-skip:hover,.intro-mute:focus-visible,.intro-skip:focus-visible{opacity:1}
/* #endregion */

/* #region Press Start splash */
/* ─── Press Start splash ─────────────────────────────────────────── */
/* full-screen "press start" gate shown before the intro plays */
html.skip-intro #splash{display:none!important}
#splash{position:fixed;inset:0;z-index:300;background:var(--fp-black);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;cursor:pointer;
  transition:opacity .5s ease}
#splash.gone{opacity:0;pointer-events:none}
/* scanline texture (same look as the intro overlay) */
.splash-scan{position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 3px)}
/* mascot art + blinking "press start" text */
.splash-mascot{width:118px;height:auto;image-rendering:pixelated;
  filter:drop-shadow(0 0 28px rgba(213,232,76,.45));animation:splash-float 2.4s ease-in-out infinite}
@keyframes splash-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.splash-title{font-family:"Press Start 2P",var(--mono);font-size:clamp(14px,2vw,22px);color:var(--fp-cream);
  letter-spacing:.12em;animation:splash-blink 1.1s steps(2,jump-none) infinite}
@keyframes splash-blink{0%,55%{opacity:1}56%,100%{opacity:0}}
.splash-sub{font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--fp-lime)}
/* keyboard hint — tells non-mouse users they can press Enter */
.splash-key{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fp-cream);opacity:.72;margin-top:6px}
.splash-key kbd{font-family:var(--mono);font-size:10px;border:1px solid var(--border-strong);border-radius:4px;
  padding:2px 6px;background:rgba(255,255,255,.06)}
#splash:focus-visible{outline:2px solid var(--fp-cream);outline-offset:-6px}
/* #endregion */