/* ==========================================================================
   Sci-fi launch splash (CSS-only cover + JS turn-off via .splash-done on :root)
   ========================================================================== */

/* 1) Fullscreen cover shown by default (no HTML markup needed) */
:root:not(.splash-done) body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  background:
    radial-gradient(120% 90% at 50% 30%,
      rgba(6, 14, 28, 0.85),
      rgba(5, 10, 22, 0.96) 55%,
      rgba(2, 8, 18, 1) 100%
    ),
    #050A16;
  /* support iOS notch */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  display: block;
}

/* 2) Center emblem + glow (uses your existing /public/icon_01.png) */
/* NOTE: background layers must be comma-separated (icon first, glows beneath) */
:root:not(.splash-done) body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: block;
  margin: 0;

  background:
    url("/public/icon_01.png") center/cover no-repeat,
    radial-gradient(120px 90px at 50% 50%, rgba(180, 235, 255, 0.35), transparent 60%),
    radial-gradient(240px 160px at 50% 50%, rgba(0, 207, 255, 0.18), transparent 70%);

  filter: saturate(115%);
  animation:
    splash-in 800ms cubic-bezier(.2, .7, .2, 1) both,
    emblem-breathe 2.4s ease-in-out 600ms infinite;

  -webkit-backdrop-filter: blur(2px) saturate(120%);
  backdrop-filter: blur(2px) saturate(120%);
}

/* 3) Star dust / particles (optional layer made in JS) */
:root:not(.splash-done) .splash-particles {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  background:
    radial-gradient(1px 1px at 22% 18%, rgba(255, 255, 255, .35), transparent 60%),
    radial-gradient(1px 1px at 68% 44%, rgba(166, 220, 255, .28), transparent 60%),
    radial-gradient(1px 1px at 36% 78%, rgba(255, 255, 255, .30), transparent 60%),
    radial-gradient(2px 2px at 72% 22%, rgba(150, 220, 255, .16), transparent 60%);
  animation: dust-float 6s ease-in-out infinite;
}

/* 4) Hide app chrome while splash is visible (prevents “weird cut”) */
:root:not(.splash-done) .site-head,
:root:not(.splash-done) .wrap {
  opacity: 0;
  transition: opacity .35s ease;
}
:root.splash-done .site-head,
:root.splash-done .wrap {
  opacity: 1;
}

/* 5) Exit animation (when JS adds .splash-done to :root) */
:root.splash-done body::after,
:root.splash-done body::before,
:root.splash-done .splash-particles {
  animation: splash-out 420ms cubic-bezier(.2, .7, .2, 1) forwards;
}

/* =================== Keyframes =================== */
@keyframes splash-in {
  0%   { opacity: 0; transform: translateZ(0) scale(.86); filter: blur(2px) saturate(110%); }
  60%  { opacity: 1; transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes emblem-breathe {
  0%,100% { transform: translateZ(0) scale(1);   filter: drop-shadow(0 0 24px rgba(120, 200, 255, .35)); }
  50%     { transform: translateZ(0) scale(1.02); filter: drop-shadow(0 0 36px rgba(120, 200, 255, .55)); }
}
@keyframes dust-float {
  0%,100% { transform: translateY(0);    opacity: .75; }
  50%     { transform: translateY(-6px); opacity: 1; }
}
@keyframes splash-out {
  to { opacity: 0; transform: scale(1.04); filter: blur(2px); }
}

/* Motion-safe */
@media (prefers-reduced-motion: reduce) {
  :root:not(.splash-done) body::after,
  :root:not(.splash-done) .splash-particles {
    animation: none !important;
  }
}