/* ============================================
   SPLASH SCREEN — Cinematic Animations
   ============================================ */
.splash {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: opacity 0.5s ease-out;
}
.splash.fade-out { opacity: 0; pointer-events: none; }

/* Background glow */
.splash__bg-glow {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
  opacity: 0;
  transform: scale(0.2);
  animation: splashGlow 0.8s ease-out 0.05s forwards;
}
@keyframes splashGlow {
  to { opacity: 0.1; transform: scale(1); }
}

/* Particles */
.splash__particles {
  position: absolute; inset: 0;
  pointer-events: none;
}
.splash__particle {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--color);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  animation: particleBurst 1s cubic-bezier(0.34, 1.56, 0.64, 1) var(--delay) forwards;
}
@keyframes particleBurst {
  to {
    opacity: var(--end-opacity);
    transform: translate(
      calc(-50% + var(--tx)),
      calc(-50% + var(--ty))
    ) scale(1);
  }
}

/* Content */
.splash__content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Icon wrapper */
.splash__icon-wrap {
  position: relative;
  width: 160px; height: 160px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 32px;
}

/* Rings */
.splash__ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  opacity: 0;
  transform: scale(0.5);
}
.splash__ring--outer {
  width: 160px; height: 160px;
  animation: ringExpand 0.8s ease-out 0.3s forwards;
}
.splash__ring--middle {
  width: 120px; height: 120px;
  border-width: 2px;
  animation: ringExpandMid 0.8s ease-out 0.35s forwards;
}
@keyframes ringExpand {
  to { opacity: 0.15; transform: scale(1.3); }
}
@keyframes ringExpandMid {
  to { opacity: 0.25; transform: scale(1.1); }
}

/* Glow */
.splash__glow {
  position: absolute;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
  opacity: 0.1;
  animation: iconGlow 2s ease-in-out 0.5s infinite alternate;
}
@keyframes iconGlow {
  0% { opacity: 0.1; transform: scale(0.95); }
  100% { opacity: 0.3; transform: scale(1.15); }
}

/* Icon bg */
.splash__icon-bg {
  position: relative;
  width: 80px; height: 80px;
  border-radius: 24px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 5%, transparent));
  border: 1.5px solid color-mix(in srgb, var(--accent) 30%, transparent);
  display: flex; align-items: center; justify-content: center;
  transform: scale(0) rotate(-30deg);
  animation: iconBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s forwards;
}
@keyframes iconBounce {
  to { transform: scale(1) rotate(0deg); }
}

.splash__icon {
  width: 38px; height: 38px;
  color: var(--accent);
  filter: drop-shadow(0 0 20px var(--glow));
}

/* Title */
.splash__title {
  position: relative;
  font-size: 32px; font-weight: 900;
  letter-spacing: 1px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Rounded', system-ui, sans-serif;
  opacity: 0;
  transform: translateY(30px);
  animation: slideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s forwards;
  margin-bottom: 10px;
  overflow: hidden;
}
.splash__title-films { color: var(--text-primary); }
.splash__title-vault { color: var(--accent); margin-left: 8px; }

.splash__shimmer {
  position: absolute; top: 0; left: -80px;
  width: 80px; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shimmerSweep 0.8s ease-in-out 0.6s forwards;
}
@keyframes shimmerSweep {
  to { left: calc(100% + 80px); }
}

/* Subtitle */
.splash__subtitle {
  font-size: 14px; font-weight: 500;
  color: var(--text-secondary);
  opacity: 0;
  transform: translateY(20px);
  animation: slideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s forwards;
  margin-bottom: 32px;
}

/* Progress */
.splash__progress {
  width: 120px; height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
  margin-bottom: 8px;
}
.splash__progress-bar {
  width: 0%; height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-secondary));
  animation: progressFill 0.85s ease-in-out 0.5s forwards;
}
@keyframes progressFill {
  to { width: 100%; }
}

/* Version */
.splash__version {
  font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,0.2);
  opacity: 0;
  animation: fadeIn 0.4s ease-in 0.7s forwards;
}

/* Turnstile */
.splash__turnstile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.splash__turnstile--visible {
  opacity: 1;
  transform: translateY(0);
}
.splash__turnstile-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
}
.splash__turnstile-status {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  min-height: 18px;
  transition: color 0.3s ease;
}
.splash__turnstile-status--ok {
  color: var(--accent);
}
.splash__turnstile-status--error {
  color: #ef4444;
}
#turnstileWidget {
  border-radius: 8px;
  overflow: hidden;
}

/* Shared */
@keyframes slideUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  to { opacity: 1; }
}

/* ============================================
   SPLASH RESPONSIVE
   ============================================ */
@media (max-width: 480px) {
  .splash__icon-wrap {
    width: 120px; height: 120px;
    margin-bottom: 24px;
  }
  .splash__ring--outer { width: 120px; height: 120px; }
  .splash__ring--middle { width: 90px; height: 90px; }
  .splash__glow { width: 80px; height: 80px; }
  .splash__icon-bg { width: 64px; height: 64px; border-radius: 20px; }
  .splash__icon { width: 30px; height: 30px; }
  .splash__title { font-size: 26px; margin-bottom: 8px; }
  .splash__subtitle { font-size: 13px; margin-bottom: 24px; }
  .splash__progress { width: 100px; }
  .splash__bg-glow { width: 400px; height: 400px; }
}

@media (max-width: 360px) {
  .splash__icon-wrap { width: 100px; height: 100px; margin-bottom: 20px; }
  .splash__ring--outer { width: 100px; height: 100px; }
  .splash__ring--middle { width: 76px; height: 76px; }
  .splash__glow { width: 68px; height: 68px; }
  .splash__icon-bg { width: 52px; height: 52px; border-radius: 16px; }
  .splash__icon { width: 26px; height: 26px; }
  .splash__title { font-size: 22px; }
  .splash__subtitle { font-size: 12px; }
  .splash__bg-glow { width: 300px; height: 300px; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .splash__icon-wrap { width: 80px; height: 80px; margin-bottom: 12px; }
  .splash__ring--outer { width: 80px; height: 80px; }
  .splash__ring--middle { width: 60px; height: 60px; }
  .splash__glow { width: 56px; height: 56px; }
  .splash__icon-bg { width: 44px; height: 44px; border-radius: 14px; }
  .splash__icon { width: 22px; height: 22px; }
  .splash__title { font-size: 22px; margin-bottom: 4px; }
  .splash__subtitle { font-size: 12px; margin-bottom: 12px; }
  .splash__progress { width: 80px; height: 2px; }
  .splash__version { font-size: 10px; }
  .splash__bg-glow { width: 300px; height: 300px; }
}

/* ============================================
   PER-THEME SPLASH OVERRIDES
   ============================================ */

/* --- Theme splash canvas (behind content) --- */
.splash__fx-canvas {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
}
.splash__content { z-index: 2; }

/* --- Sunset: warm fire glow --- */
[data-theme="sunset"] .splash {
  background: radial-gradient(ellipse at 50% 80%, #3d2920 0%, #1f1410 70%);
}
[data-theme="sunset"] .splash__bg-glow {
  background: radial-gradient(circle, #ff6b6b 0%, #ff4444 30%, transparent 70%);
}

/* --- Ocean: deep blue abyss --- */
[data-theme="ocean"] .splash {
  background: radial-gradient(ellipse at 50% 60%, #152d45 0%, #0c1929 70%);
}
[data-theme="ocean"] .splash__bg-glow {
  background: radial-gradient(circle, #0ea5e9 0%, #0369a1 30%, transparent 70%);
}

/* --- Dracula: eerie purple mist --- */
[data-theme="dracula"] .splash {
  background: radial-gradient(ellipse at 50% 50%, #44475a 0%, #282a36 60%);
}
[data-theme="dracula"] .splash__ring { border-color: #ff79c6; }
[data-theme="dracula"] .splash__bg-glow {
  background: radial-gradient(circle, #ff79c6 0%, #bd93f9 40%, transparent 70%);
}

/* --- Cyberpunk: scanline glitch --- */
[data-theme="cyberpunk"] .splash {
  background: #0a0a1a;
}
[data-theme="cyberpunk"] .splash__title-films {
  text-shadow: -2px 0 #f637ec, 2px 0 #00f0ff;
  animation: cyberTitleGlitch 3s ease-in-out infinite;
}
@keyframes cyberTitleGlitch {
  0%, 94%, 100% { text-shadow: -2px 0 #f637ec, 2px 0 #00f0ff; }
  95% { text-shadow: 4px 0 #f637ec, -4px 0 #00f0ff; transform: translateX(-2px); }
  96% { text-shadow: -3px 0 #f637ec, 3px 0 #00f0ff; transform: translateX(3px); }
  97% { text-shadow: 2px 2px #f637ec, -2px -2px #00f0ff; transform: translateX(-1px); }
}
[data-theme="cyberpunk"] .splash__bg-glow {
  background: radial-gradient(circle, #f637ec 0%, #00f0ff 40%, transparent 70%);
  opacity: 0; animation: splashGlow 0.8s ease-out 0.05s forwards;
}

/* --- Sakura: soft pink bloom --- */
[data-theme="sakura"] .splash {
  background: radial-gradient(ellipse at 50% 40%, #3a2030 0%, #1a1018 70%);
}
[data-theme="sakura"] .splash__bg-glow {
  background: radial-gradient(circle, #f9a8d4 0%, #ec4899 30%, transparent 70%);
}

/* --- Amber: golden warm --- */
[data-theme="amber"] .splash {
  background: radial-gradient(ellipse at 50% 50%, #302810 0%, #1a1608 70%);
}
[data-theme="amber"] .splash__bg-glow {
  background: radial-gradient(circle, #fbbf24 0%, #d97706 30%, transparent 70%);
}

/* --- Matrix: terminal boot --- */
[data-theme="matrix"] .splash {
  background: #050d05;
}
[data-theme="matrix"] .splash__title,
[data-theme="matrix"] .splash__subtitle,
[data-theme="matrix"] .splash__version {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
}
[data-theme="matrix"] .splash__subtitle {
  color: #22c55e;
}
[data-theme="matrix"] .splash__title-films {
  color: #22c55e;
  text-shadow: 0 0 10px rgba(34,197,94,0.6);
}
[data-theme="matrix"] .splash__bg-glow {
  background: radial-gradient(circle, #22c55e 0%, #166534 30%, transparent 70%);
}

/* --- VHS: retro CRT boot --- */
[data-theme="vhs"] .splash {
  background: #1a1410;
}
[data-theme="vhs"] .splash__bg-glow {
  background: radial-gradient(circle, #e8c547 0%, #b8860b 30%, transparent 70%);
}
[data-theme="vhs"] .splash__title-films {
  text-shadow: -1.5px 0 rgba(255,0,68,0.5), 1.5px 0 rgba(0,217,255,0.5);
}
[data-theme="vhs"] .splash__title-vault {
  text-shadow: -1px 0 rgba(255,0,68,0.3), 1px 0 rgba(0,217,255,0.3);
}
[data-theme="vhs"] .splash__ring { border-style: dashed; }
[data-theme="vhs"] .splash__version {
  font-family: monospace;
  letter-spacing: 2px;
}

/* --- Tron: neon grid boot --- */
[data-theme="tron"] .splash {
  background: #04080f;
}
[data-theme="tron"] .splash__bg-glow {
  background: radial-gradient(circle, #18dcff 0%, #0891b2 30%, transparent 70%);
}
[data-theme="tron"] .splash__ring {
  border-color: #18dcff;
  box-shadow: 0 0 10px rgba(24,220,255,0.2), inset 0 0 10px rgba(24,220,255,0.1);
}
[data-theme="tron"] .splash__title-vault {
  text-shadow: 0 0 15px rgba(24,220,255,0.7), 0 0 30px rgba(24,220,255,0.3);
}
[data-theme="tron"] .splash__icon-bg {
  background: linear-gradient(135deg, rgba(24,220,255,0.15), rgba(24,220,255,0.03));
  border-color: rgba(24,220,255,0.3);
}
[data-theme="tron"] .splash__progress-bar {
  background: linear-gradient(90deg, #18dcff, #7df9ff);
  box-shadow: 0 0 8px rgba(24,220,255,0.5);
}

/* --- Splash FX canvas animations --- */
.splash__fx-canvas { opacity: 0; animation: fadeIn 0.6s ease-out 0.2s forwards; }