/* Copyright (c) 2026 Federico Pereira <lord.basex@gmail.com> */
/* The startup intro ("INSERT COIN") while the page starts: plain CSS, loaded
   before the app, because the site's CSP allows no inline styles. It stays
   dark in both themes, like an arcade cabinet's attract screen. Timeline:
   the icon pops in (0 s), the name rises (0.6 s), INSERT COIN rises (1.1 s,
   the coin sound's moment) and blinks from 1.5 s. */
#splash {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  background: radial-gradient(circle at 50% 42%, #1b2030 0%, #05060a 70%);
  color: #e9ecf2;
  cursor: pointer;
  transition: opacity 320ms ease, visibility 320ms ease;
}
/* No page scroll (and no scrollbar) behind the intro while it shows. */
html:has(#splash:not(.is-gone)) { overflow: hidden; }
#splash.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-mark {
  width: 132px; height: 132px; border-radius: 32px;
  background: #f2a33a; color: #1a1206;
  display: flex; align-items: center; justify-content: center;
  animation: splash-pop 700ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both, splash-glow 1.6s ease-in-out 700ms infinite;
}
.splash-name {
  font-family: "Chakra Petch", system-ui, sans-serif; font-weight: 700; font-size: 44px; letter-spacing: 0.01em;
  animation: splash-rise 500ms ease-out 600ms both;
}
.splash-name span { color: #f2a33a; }
.splash-coin { display: block; color: #f2a33a; animation: splash-rise 400ms ease-out 1.1s both; }
/* Four blinks at most: nothing on the page blinks for more than 5 s. */
.splash-coin svg { display: block; animation: splash-blink 1s steps(1) 1.5s 4; }
@keyframes splash-pop {
  0% { transform: scale(0.3); opacity: 0; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes splash-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgb(242 163 58 / 0); }
  50% { box-shadow: 0 0 60px 10px rgb(242 163 58 / 0.45); }
}
@keyframes splash-rise { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes splash-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes splash-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-height: 520px) {
  #splash { gap: 16px; }
  .splash-mark { width: 96px; height: 96px; border-radius: 24px; }
  .splash-mark svg { width: 60px; height: 60px; }
  .splash-name { font-size: 36px; }
}
/* No pop, rise, glow or blink: everything just fades in. */
@media (prefers-reduced-motion: reduce) {
  .splash-mark, .splash-name, .splash-coin { animation: splash-fade 500ms ease-out both; }
  .splash-coin svg { animation: none; }
}