/* ═══ CINEMATIC SPLASH INTRO — v2 ═══ */
/* 3-5s premium intro: particles → neon logo → glitch → beat drop → morph out */

#splashScreen {
  position: fixed; inset: 0; z-index: 9999;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  cursor: pointer;
}
#splashScreen.done { pointer-events: none; }
#splashScreen.hidden { display: none; }

/* ── Canvas for particles ── */
#splashCanvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

/* ── Central content ── */
.sp-center {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  opacity: 0;
  transform: scale(0.7);
  filter: blur(12px);
}
.sp-center.in {
  animation: spReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes spReveal {
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* ── Logo icon ── */
.sp-icon {
  width: 100px; height: 100px;
  border-radius: 26px;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 0 40px rgba(56, 161, 105, 0.3),
    0 0 80px rgba(56, 161, 105, 0.15),
    inset 0 1px 0 rgba(255,255,255,0.06);
  border: 1px solid rgba(56, 161, 105, 0.25);
}
.sp-icon img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.sp-icon::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 50%);
  border-radius: 26px;
  pointer-events: none;
}

/* ── Neon text ── */
.sp-title {
  font-family: 'Inter', sans-serif;
  font-size: 52px; font-weight: 800;
  letter-spacing: 14px;
  color: #fff;
  text-shadow:
    0 0 10px rgba(56, 161, 105, 0.6),
    0 0 30px rgba(56, 161, 105, 0.3),
    0 0 60px rgba(56, 161, 105, 0.15);
  position: relative;
  user-select: none;
}

/* ── Tagline ── */
.sp-tagline {
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 500;
  letter-spacing: 5px; text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  opacity: 0;
  transform: translateY(8px);
}
.sp-tagline.in {
  animation: spTagIn 0.5s 0.3s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes spTagIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Pulsing glow ring behind icon ── */
.sp-glow {
  position: absolute;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56,161,105,0.2) 0%, transparent 70%);
  filter: blur(30px);
  top: 50%; left: 50%;
  transform: translate(-50%, -60%);
  pointer-events: none;
}
.sp-glow.pulse {
  animation: spGlowPulse 0.6s ease-in-out 3;
}
@keyframes spGlowPulse {
  0%, 100% { transform: translate(-50%, -60%) scale(1); opacity: 0.7; }
  50% { transform: translate(-50%, -60%) scale(1.4); opacity: 1; }
}

/* ── Glitch effect ── */
.sp-center.glitch .sp-title {
  animation: spGlitch 0.4s steps(3) forwards;
}
@keyframes spGlitch {
  0%   { text-shadow: 2px 0 #ff0040, -2px 0 #0ff; transform: translate(0); }
  20%  { text-shadow: -3px 0 #ff0040, 3px 0 #0ff; transform: translate(-2px, 1px); }
  40%  { text-shadow: 3px 0 #ff0040, -3px 0 #0ff; transform: translate(2px, -1px); }
  60%  { text-shadow: -1px 0 #ff0040, 1px 0 #0ff; transform: translate(1px, 0); }
  80%  { text-shadow: 2px 0 #ff0040, -2px 0 #0ff; transform: translate(-1px, 1px); }
  100% {
    text-shadow:
      0 0 10px rgba(56,161,105,0.6),
      0 0 30px rgba(56,161,105,0.3),
      0 0 60px rgba(56,161,105,0.15);
    transform: translate(0);
  }
}
.sp-center.glitch .sp-icon {
  animation: spIconGlitch 0.4s steps(4);
}
@keyframes spIconGlitch {
  0%   { transform: translate(0); filter: hue-rotate(0); }
  25%  { transform: translate(3px, -2px); filter: hue-rotate(40deg); }
  50%  { transform: translate(-3px, 1px); filter: hue-rotate(-30deg); }
  75%  { transform: translate(2px, 2px); filter: hue-rotate(20deg); }
  100% { transform: translate(0); filter: hue-rotate(0); }
}

/* ── Beat-drop flash ── */
.sp-flash {
  position: fixed; inset: 0; z-index: 10;
  background: rgba(56, 161, 105, 0.25);
  opacity: 0;
  pointer-events: none;
}
.sp-flash.fire {
  animation: spFlash 0.35s ease-out forwards;
}
@keyframes spFlash {
  0%   { opacity: 1; background: rgba(255,255,255,0.7); }
  30%  { background: rgba(56,161,105,0.3); }
  100% { opacity: 0; }
}

/* ── Shake ── */
.sp-center.shake {
  animation: spShake 0.35s ease-out;
}
@keyframes spShake {
  0%   { transform: translate(0,0); }
  15%  { transform: translate(-6px, 3px); }
  30%  { transform: translate(5px, -4px); }
  45%  { transform: translate(-4px, 2px); }
  60%  { transform: translate(3px, -2px); }
  80%  { transform: translate(-1px, 1px); }
  100% { transform: translate(0, 0); }
}

/* ── Zoom-morph exit ── */
#splashScreen.exit {
  animation: spExit 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes spExit {
  0%   { opacity: 1; filter: blur(0); transform: scale(1); }
  60%  { opacity: 0.6; filter: blur(0); transform: scale(1.15); }
  100% { opacity: 0; filter: blur(20px); transform: scale(1.6); }
}

/* ── Ripple ring on beat ── */
.sp-ripple {
  position: absolute;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(56,161,105,0.5);
  top: 50%; left: 50%;
  transform: translate(-50%, -55%);
  pointer-events: none;
  opacity: 0;
}
.sp-ripple.fire {
  animation: spRipple 0.8s ease-out forwards;
}
@keyframes spRipple {
  0%   { width: 20px; height: 20px; opacity: 1; border-width: 3px; }
  100% { width: 500px; height: 500px; opacity: 0; border-width: 1px;
         transform: translate(-50%, -55%); margin-left: -240px; margin-top: -240px; }
}

/* ── Scanline overlay ── */
.sp-scanlines {
  position: fixed; inset: 0; z-index: 3;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,0.04) 2px,
    rgba(0,0,0,0.04) 4px
  );
  pointer-events: none;
  opacity: 0;
}
.sp-scanlines.in { animation: spScanIn 0.3s forwards; }
@keyframes spScanIn { to { opacity: 1; } }

/* ── Mobile tweaks ── */
@media (max-width: 600px) {
  .sp-icon { width: 80px; height: 80px; border-radius: 22px; }
  .sp-title { font-size: 38px; letter-spacing: 10px; }
  .sp-tagline { font-size: 11px; letter-spacing: 4px; }
  .sp-glow { width: 160px; height: 160px; }
}