/* ============================================
   ATMOSPHERIC BACKGROUND SYSTEM
   Aurora Effects - Premium 2025 Visuals
   60fps Optimized - WCAG AA Compliant
   ============================================ */

/* ============================================
   BASE ATMOSPHERIC LAYERS
   ============================================ */

/* Aurora Gradient Layer 1 - Cyan/Turquoise */
.atmospheric-aurora-1 {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(ellipse 1200px 600px at 10% 10%,
    rgba(6, 182, 212, 0.15) 0%,
    rgba(6, 182, 212, 0.02) 50%,
    transparent 100%);
  animation: aurora-drift-1 25s ease-in-out infinite alternate;
}

/* Aurora Gradient Layer 2 - Purple/Violet */
.atmospheric-aurora-2 {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(ellipse 1000px 500px at 90% 20%,
    rgba(139, 92, 246, 0.12) 0%,
    rgba(139, 92, 246, 0.01) 50%,
    transparent 100%);
  animation: aurora-drift-2 35s ease-in-out infinite alternate;
  animation-delay: -10s;
}

/* Aurora Gradient Layer 3 - Pink/Rose */
.atmospheric-aurora-3 {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(ellipse 800px 400px at 50% 90%,
    rgba(236, 72, 153, 0.1) 0%,
    rgba(236, 72, 153, 0.01) 50%,
    transparent 100%);
  animation: aurora-drift-3 45s ease-in-out infinite alternate;
  animation-delay: -20s;
}

/* Base Dark Background */
.atmospheric-base {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a24 100%);
}

/* Noise Overlay for Texture */
.atmospheric-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.03;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(200, 200, 240, 0.14) 0%, transparent 50%);
  background-size: 200px 200px;
  animation: noise-drift 20s linear infinite;
}

/* ============================================
   ATMOSPHERIC ANIMATIONS
   ============================================ */

@keyframes aurora-drift-1 {
  0% {
    transform: translateX(-5%) translateY(-3%) scale(1);
    opacity: 0.7;
  }
  100% {
    transform: translateX(5%) translateY(3%) scale(1.05);
    opacity: 1;
  }
}

@keyframes aurora-drift-2 {
  0% {
    transform: translateX(3%) translateY(-5%) scale(1.02);
    opacity: 0.8;
  }
  100% {
    transform: translateX(-3%) translateY(5%) scale(0.98);
    opacity: 0.9;
  }
}

@keyframes aurora-drift-3 {
  0% {
    transform: translateX(-2%) translateY(4%) scale(0.97);
    opacity: 0.6;
  }
  100% {
    transform: translateX(2%) translateY(-4%) scale(1.03);
    opacity: 0.8;
  }
}

@keyframes noise-drift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-5%, -5%); }
  50% { transform: translate(5%, -3%); }
  75% { transform: translate(3%, 5%); }
  100% { transform: translate(0, 0); }
}

/* ============================================
   CONTENT WRAPPER
   ============================================ */

.atmospheric-container {
  position: relative;
  min-height: 100vh;
  z-index: 1;
}

.atmospheric-content {
  position: relative;
  z-index: 2;
}

/* ============================================
   LUXURY ATMOSPHERIC VARIANTS
   Gold Gradient Overlays
   ============================================ */

.atmospheric-aurora-gold {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(ellipse 1400px 700px at 20% 30%,
    rgba(212, 175, 55, 0.08) 0%,
    rgba(212, 175, 55, 0.02) 50%,
    transparent 100%);
  animation: aurora-gold-drift 30s ease-in-out infinite alternate;
}

.atmospheric-aurora-rose {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(ellipse 1000px 500px at 80% 60%,
    rgba(236, 72, 153, 0.06) 0%,
    rgba(236, 72, 153, 0.01) 50%,
    transparent 100%);
  animation: aurora-rose-drift 40s ease-in-out infinite alternate;
  animation-delay: -15s;
}

@keyframes aurora-gold-drift {
  0% {
    transform: translateX(-8%) translateY(-5%) scale(1);
    opacity: 0.6;
  }
  100% {
    transform: translateX(8%) translateY(5%) scale(1.1);
    opacity: 0.9;
  }
}

@keyframes aurora-rose-drift {
  0% {
    transform: translateX(5%) translateY(-8%) scale(0.95);
    opacity: 0.5;
  }
  100% {
    transform: translateX(-5%) translateY(8%) scale(1.05);
    opacity: 0.7;
  }
}

/* ============================================
   PARTICLE EFFECTS
   ============================================ */

.atmospheric-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.4;
}

.atmospheric-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: particle-float 15s linear infinite;
}

.particle-blue {
  background: rgba(6, 182, 212, 0.6);
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
}

.particle-purple {
  background: rgba(139, 92, 246, 0.5);
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.4);
}

.particle-gold {
  background: rgba(212, 175, 55, 0.7);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
}

@keyframes particle-float {
  0% {
    transform: translateY(100vh) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) translateX(100px);
    opacity: 0;
  }
}

/* ============================================
   RESPONSIVE OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) {
  .atmospheric-aurora-1 {
    background: radial-gradient(ellipse 800px 400px at 10% 10%,
      rgba(6, 182, 212, 0.1) 0%,
      transparent 50%);
  }

  .atmospheric-aurora-2 {
    background: radial-gradient(ellipse 600px 300px at 90% 20%,
      rgba(139, 92, 246, 0.08) 0%,
      transparent 50%);
  }

  .atmospheric-aurora-3 {
    background: radial-gradient(ellipse 500px 250px at 50% 90%,
      rgba(236, 72, 153, 0.06) 0%,
      transparent 50%);
  }
}

/* ============================================
   PERFORMANCE & ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .atmospheric-aurora-1,
  .atmospheric-aurora-2,
  .atmospheric-aurora-3,
  .atmospheric-aurora-gold,
  .atmospheric-aurora-rose,
  .atmospheric-noise,
  .atmospheric-particles {
    animation: none !important;
  }

  .atmospheric-particles {
    display: none;
  }
}

/* GPU Acceleration */
.atmospheric-aurora-1,
.atmospheric-aurora-2,
.atmospheric-aurora-3,
.atmospheric-aurora-gold,
.atmospheric-aurora-rose,
.atmospheric-noise,
.atmospheric-particles {
  will-change: transform, opacity;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Low-power mode detection */
@media (update: slow) {
  .atmospheric-particles {
    display: none;
  }
}

/* ============================================
   BODY TRANSPARENCY FOR ATMOSPHERIC LAYERS
   When atmospheric-base is present, make body
   transparent so aurora layers show through
   ============================================ */
body:has(.atmospheric-base) {
  background: transparent !important;
}

/* ============================================
   LIGHT THEME ATMOSPHERIC OVERRIDES
   Softer, subtler aurora for light mode
   ============================================ */
html.theme-light .atmospheric-base {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #eef2f7 100%);
}

html.theme-light .atmospheric-aurora-1 {
  background: radial-gradient(ellipse 1200px 600px at 10% 10%,
    rgba(180, 83, 9, 0.06) 0%,
    rgba(180, 83, 9, 0.01) 50%,
    transparent 100%);
}

html.theme-light .atmospheric-aurora-2 {
  background: radial-gradient(ellipse 1000px 500px at 90% 20%,
    rgba(99, 102, 241, 0.05) 0%,
    rgba(99, 102, 241, 0.01) 50%,
    transparent 100%);
}

html.theme-light .atmospheric-noise {
  opacity: 0.015;
}