/* ============================================
   AURORA THEME (New Animated Page Background)
   ============================================ */
body.theme-aurora {
  --bg: #0a0f1e;
  --surface: #111a33;
  --header-bg: #1d2a4f;
  --header-text: #e3e9ff;
  --text: #cdd8ff;
  --accent: #6ab8ff;
  --accent-2: #88ffe8;
  --glow: 0 0 18px rgba(100,180,255,0.7);
  overflow-x: hidden;
}

/* ========= Background Gradient Waves ========= */
.page-background {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, #3a6aff55, transparent),
              radial-gradient(circle at 80% 30%, #6fffff44, transparent),
              radial-gradient(circle at 50% 80%, #6a60ff55, transparent);
  filter: blur(60px);
  animation: auroraMove 18s infinite alternate ease-in-out;
  z-index: -3;
}

@keyframes auroraMove {
  0% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-40px) scale(1.1); }
  100% { transform: translateY(40px) scale(1); }
}

/* ========= Floating Magical Particles ========= */
.particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(2px 2px at 20% 30%, #ffffffaa, transparent),
                    radial-gradient(2px 2px at 70% 60%, #aad6ffaa, transparent),
                    radial-gradient(2px 2px at 40% 80%, #ffffffaa, transparent),
                    radial-gradient(2px 2px at 90% 20%, #b2ffe7aa, transparent);
  animation: particleFloat 12s linear infinite;
  z-index: -2;
}

@keyframes particleFloat {
  0% { background-position: 0 0; }
  100% { background-position: 0 -200px; }
}

/* ========= Text Glow Effect ========= */
.glow-text {
  text-shadow: 0 0 10px var(--accent), 0 0 20px var(--accent-2);
  animation: glowPulse 4s infinite ease-in-out;
}

@keyframes glowPulse {
  0%, 100% { text-shadow: 0 0 6px var(--accent); }
  50% { text-shadow: 0 0 14px var(--accent-2); }
}