/* =============================================================
   neon-splash.css — Three.js WebGL Intro-Splash
   =============================================================
   WHY: Owner-Wunsch 2026-05-07. Splash zeigt 10s eine Three.js
   Partikel-Animation, dann fade-out und App. Skip via Tap/Click.

   Notbremse: window.NEON_SPLASH_ENABLED = false in index.html.
   Dann mountNeonSplash() returnt sofort und Splash erscheint nie.
   ============================================================= */

#neon-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  overflow: hidden;
  cursor: pointer;
  transition: opacity 600ms ease;
  opacity: 1;
}

#neon-splash.is-fading {
  opacity: 0;
  pointer-events: none;
}

/* Stage = WebGL Canvas Container */
#neon-splash .neon-stage {
  position: absolute;
  inset: 0;
}

#neon-splash .neon-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Glow / Vignette Layers */
#neon-splash .neon-glow-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0, 230, 118, .22), transparent 70%);
}

#neon-splash .neon-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(ellipse at center, rgba(0, 230, 118, 0), transparent);
  mix-blend-mode: screen;
  transition: background .08s ease-out;
}

#neon-splash .neon-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, .9) 100%);
}

/* "KI-TIPPS" Neon Text */
#neon-splash .neon-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  font-family: 'Orbitron', 'Bebas Neue', Impact, sans-serif;
  font-weight: 900;
  font-size: clamp(40px, 12vw, 86px);
  letter-spacing: .15em;
  color: #ffffff;
  text-align: center;
  opacity: 0;
  white-space: nowrap;
  /* Owner-Wunsch 2026-05-07: Text klarer. Weisser Core + scharfer
     Mint-Inner-Glow + Brand-Gruen-Mid + dunkler Outer-Halo.
     Die Reihenfolge ist wichtig: kleinster Blur zuerst (definiert
     Schaerfe), dann groessere Halos. */
  text-shadow:
    0 0 1px rgba(255, 255, 255, .95),
    0 0 6px #80ffc0,
    0 0 14px #00e676,
    0 0 28px #00e676,
    0 0 56px #00a04a;
  transition: opacity .3s ease-out, transform .3s ease-out;
  user-select: none;
  pointer-events: none;
}

/* Skip-Hint unten — dezent, nach 2s sichtbar */
#neon-splash .neon-skip {
  position: absolute;
  bottom: calc(20px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .35);
  pointer-events: none;
  opacity: 0;
  animation: neonSkipFade 1.6s ease-out 1.6s forwards;
}

@keyframes neonSkipFade {
  to { opacity: 1; }
}

/* Reduced motion: Splash gar nicht zeigen — JS uebernimmt das,
   aber Fallback fuer den Fall dass JS-Init schon hier durchgelaufen ist. */
@media (prefers-reduced-motion: reduce) {
  #neon-splash { display: none !important; }
}