/* ════════════════════════════════════════════════════════════════════
   Coming Soon — landing page
   Based on the "Press Start" splash screen: retro CRT look, floating
   mascot, blinking title. Nothing on this page is interactive; random
   glitch bursts fire every 2–4s.
   ════════════════════════════════════════════════════════════════════ */

:root{
  --fp-black:#0c0c0c;
  --fp-cream:#f2f1e6;
  --fp-lime:#d5e84c;
  --mono:"Space Mono",ui-monospace,monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--fp-black);
  color:var(--fp-cream);
  overflow:hidden;
  cursor:default;
  user-select:none;
  -webkit-user-select:none;
}

/* nothing on the page is clickable */
#splash, #splash *{ pointer-events:none; }

#splash{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:30px;
  text-align:center;
}

/* CRT scanline texture */
.splash-scan{
  position:absolute;inset:0;
  opacity:.5;
  mix-blend-mode:overlay;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 3px);
}

.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,4vw,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);
}

/* ── random glitch bursts ─────────────────────────────────────────── */
/* toggled by js/script.js on a random 2–4s interval; whole page tears
   with clip-path bands + jitter while text/scan/mascot judder independently */
body.glitching #splash{
  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)}
}

body.glitching .splash-title{
  animation:splash-blink 1.1s steps(2,jump-none) infinite, glitch-shift .12s steps(2,jump-none) infinite;
}
body.glitching .splash-sub{
  animation:glitch-shift .1s steps(2,jump-none) infinite;
}
body.glitching .splash-mascot{
  animation:splash-float 2.4s ease-in-out infinite, glitch-coin .11s steps(2,jump-none) infinite;
}
body.glitching .splash-scan{
  animation:glitch-scan .09s steps(2,jump-none) infinite;
}

@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:translateY(0)}33%{transform:translate(-5px,2px)}66%{transform:translate(6px,-2px)}100%{transform:translateY(0)}}

@media (prefers-reduced-motion:reduce){
  .splash-mascot,.splash-title,body.glitching #splash,
  body.glitching .splash-title,body.glitching .splash-sub,
  body.glitching .splash-mascot,body.glitching .splash-scan{
    animation:none;
  }
}