@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Orbitron:wght@400;500;600;700;800;900&family=Press+Start+2P&family=Rajdhani:wght@300;400;500;600;700&display=swap');

/* ===================== BASE ===================== */
* { box-sizing: border-box; }

body {
  font-family: 'Orbitron', sans-serif;
  background-color: #0a0015;
  color: #ffffff;
  margin: 0;
  padding: 0;
}

/* ===================== NEON UTILITIES ===================== */
.neon-text-cyan {
  color: #00d9ff;
  text-shadow: 0 0 4px rgba(0,217,255,0.4), 0 0 8px rgba(0,217,255,0.2);
}
.neon-text-purple {
  color: #a855f7;
  text-shadow: 0 0 4px rgba(168,85,247,0.4), 0 0 8px rgba(168,85,247,0.2);
}
.neon-border-cyan {
  border: 1px solid rgba(0,217,255,0.5);
  box-shadow: 0 0 8px rgba(0,217,255,0.2), inset 0 0 8px rgba(0,217,255,0.05);
}
.neon-hover:hover {
  box-shadow: 0 0 12px rgba(0,217,255,0.3), 0 0 24px rgba(0,217,255,0.15);
  transition: box-shadow 0.3s ease;
}
.arcade-grid {
  background-image:
    linear-gradient(rgba(0,217,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,217,255,0.08) 1px, transparent 1px);
  background-size: 60px 60px;
}
.neon-button {
  position: relative;
  transition: all 0.3s ease;
  border: 1px solid rgba(0,217,255,0.3);
  font-family: 'Orbitron', sans-serif;
  cursor: pointer;
  background-color: transparent;
  color: white;
}
.neon-button:hover {
  border-color: rgba(0,217,255,0.6);
  box-shadow: 0 0 16px rgba(0,217,255,0.2);
}
.scanlines { position: relative; }
.scanlines::after {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.03), rgba(0,0,0,0.03) 2px,
    transparent 2px, transparent 4px
  );
  pointer-events: none;
}

/* ===================== LOADER ===================== */
.terminal {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: #00ff00;
  letter-spacing: 1px;
  text-shadow: 0 0 8px #00ff00;
}
#loader {
  text-align: center;
  transition: opacity 0.5s ease;
  /* FIX: Hidden by default — script.js shows it only on first visit.
     This prevents the 1-second flash on reload because CSS applies
     before JS runs, so the loader is never painted on subsequent visits. */
  display: none;
}
#cursor {
  animation: blink 1s infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ===================== PROGRESS BAR ===================== */

/* Outer container: black bg, thick cyan border, cyan outer glow */
.progress-bar {
  background: black;
  border: 3px solid cyan;
  box-shadow:
    0 0 8px cyan,
    0 0 18px rgba(0, 255, 255, 0.4);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

/* Animated fill: magenta → cyan → green gradient */
#progressFill {
  background: linear-gradient(90deg, #ff00ff, #00ffff, #00ff00);
  height: 100%;
  width: 0%;
  transition: width 0.1s linear;
  /* subtle inner shimmer */
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.2);
}

/* Percentage text: Press Start 2P font, bold red, centered over bar */
#progressText {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: #ebeae9;
  text-shadow: 0 0 6px rgba(75, 69, 67, 0.7);
  margin-top: 8px;
  text-align: center;
  letter-spacing: 1px;
}

/* ===================== INITIAL VISIBILITY STATES =====================
   RULE: These are the ONLY places that hide #intro and #root.
   Never add inline style="display:none" in HTML — it overrides JS.
   ===================================================================== */
#intro {
  display: none;
}
#root {
  display: none;
}

/* ===================== MOBILE MENU ===================== */
#mobileMenu {
  /* Smooth slide-down open/close */
  transition: opacity 0.2s ease;
}
#mobileMenu.hidden {
  display: none;
}

/* ===================== FLASH OVERLAY =====================
   Asymmetric timing for cinematic feel:
     flash-in class  → 0.12s ease-in  (fast bright punch)
     default         → 0.4s ease-out  (slow smooth recovery)
   ===================================================================== */
#flash {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: white;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.4s ease-out;
}
#flash.flash-in {
  transition: opacity 0.12s ease-in;
}

/* ===================== MOBILE PERFORMANCE ===================== */
@media (max-width: 768px) {
  /* Reduce constant compositing work from scanline overlay on mobile. */
  .scanlines::after {
    opacity: 0.25;
  }
}