/* ===== Star Twinkle Background ===== */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 25% 65%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 40% 10%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 55% 45%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 70% 80%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 85% 30%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 15% 90%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 50% 75%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 92% 60%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 35% 35%, rgba(255,255,255,0.7), transparent);
  animation: twinkle 4s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

.hero > *:not(.hero__scroll-hint) {
  position: relative;
  z-index: 1;
}

@keyframes twinkle {
  0%   { opacity: 0.4; }
  50%  { opacity: 0.9; }
  100% { opacity: 0.5; }
}

/* ===== Neon Glow Pulse ===== */
.glow-pulse {
  animation: glowPulse 2.5s ease-in-out infinite alternate;
}

@keyframes glowPulse {
  0% {
    text-shadow:
      0 0 8px rgba(0, 255, 255, 0.8),
      0 0 30px rgba(0, 255, 255, 0.4),
      0 0 60px rgba(0, 255, 255, 0.2);
  }
  100% {
    text-shadow:
      0 0 12px rgba(0, 255, 255, 1),
      0 0 45px rgba(0, 255, 255, 0.6),
      0 0 90px rgba(0, 255, 255, 0.3);
  }
}

.glow-pulse-gold {
  animation: glowPulseGold 2.5s ease-in-out infinite alternate;
}

@keyframes glowPulseGold {
  0% {
    box-shadow:
      0 0 8px rgba(255, 215, 0, 0.5),
      0 0 30px rgba(255, 215, 0, 0.2);
  }
  100% {
    box-shadow:
      0 0 14px rgba(255, 215, 0, 0.8),
      0 0 50px rgba(255, 215, 0, 0.4);
  }
}

/* ===== Scroll Fade-In ===== */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Staggered Fade-In Delays ===== */
.game-modes__grid .fade-in-up:nth-child(2) { transition-delay: 0.1s; }
.game-modes__grid .fade-in-up:nth-child(3) { transition-delay: 0.2s; }
.game-modes__grid .fade-in-up:nth-child(4) { transition-delay: 0.3s; }

.features-compact__grid .fade-in-up:nth-child(2) { transition-delay: 0.08s; }
.features-compact__grid .fade-in-up:nth-child(3) { transition-delay: 0.16s; }
.features-compact__grid .fade-in-up:nth-child(4) { transition-delay: 0.24s; }
.features-compact__grid .fade-in-up:nth-child(5) { transition-delay: 0.32s; }
.features-compact__grid .fade-in-up:nth-child(6) { transition-delay: 0.4s; }
.features-compact__grid .fade-in-up:nth-child(7) { transition-delay: 0.48s; }
.features-compact__grid .fade-in-up:nth-child(8) { transition-delay: 0.56s; }

.pilots__grid .fade-in-up:nth-child(2) { transition-delay: 0.1s; }
.pilots__grid .fade-in-up:nth-child(3) { transition-delay: 0.2s; }
.pilots__grid .fade-in-up:nth-child(4) { transition-delay: 0.3s; }
.pilots__grid .fade-in-up:nth-child(5) { transition-delay: 0.4s; }
.pilots__grid .fade-in-up:nth-child(6) { transition-delay: 0.5s; }

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .fade-in-up {
    opacity: 1;
    transform: none;
  }
}