/* ==========================================================================
   Aurora -- Gradient mesh background, WebGL canvas, grain overlay
   ========================================================================== */

/* --- WebGL canvas (rendered by aurora-shader.js) --- */
#aurora-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: var(--z-bg);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
}

#aurora-canvas.loaded {
  opacity: 1;
}

/* --- CSS gradient mesh fallback (visible until WebGL loads, or if it fails) --- */
.aurora-fallback {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: var(--z-bg);
  pointer-events: none;
  overflow: hidden;
  background: var(--color-bg);
}

.aurora-fallback.hidden {
  opacity: 0;
  transition: opacity 1.5s ease;
}

.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  will-change: transform;
}

.aurora-blob--1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 170, 255, 0.25) 0%, transparent 70%);
  top: -10%;
  left: -5%;
  animation: aurora-drift-1 25s ease-in-out infinite alternate;
}

.aurora-blob--2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(92, 160, 255, 0.15) 0%, transparent 70%);
  top: 30%;
  right: -10%;
  animation: aurora-drift-2 30s ease-in-out infinite alternate;
}

.aurora-blob--3 {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(30, 100, 220, 0.20) 0%, transparent 70%);
  bottom: -5%;
  left: 30%;
  animation: aurora-drift-3 20s ease-in-out infinite alternate;
}

.aurora-blob--4 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(0, 170, 255, 0.12) 0%, transparent 70%);
  top: 50%;
  left: 60%;
  animation: aurora-drift-4 35s ease-in-out infinite alternate;
}

@keyframes aurora-drift-1 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(80px, 40px) scale(1.1); }
  66%  { transform: translate(-30px, 80px) scale(0.95); }
  100% { transform: translate(50px, -20px) scale(1.05); }
}

@keyframes aurora-drift-2 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-60px, 50px) scale(1.15); }
  66%  { transform: translate(40px, -40px) scale(0.9); }
  100% { transform: translate(-40px, 30px) scale(1.08); }
}

@keyframes aurora-drift-3 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(70px, -50px) scale(1.12); }
  100% { transform: translate(-50px, 20px) scale(0.95); }
}

@keyframes aurora-drift-4 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-80px, -30px) scale(1.2); }
  100% { transform: translate(60px, 50px) scale(0.88); }
}

/* --- Film grain overlay --- */
.grain-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="1"/></svg>');
  background-repeat: repeat;
  background-size: 200px 200px;
}

/* --- Subtle grid overlay (sits above aurora, below content) --- */
.grid-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
  opacity: 0.04;
  background-image:
    linear-gradient(rgba(0, 170, 255, 0.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 170, 255, 0.25) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 20%, transparent 70%);
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .aurora-blob {
    filter: blur(60px);
    opacity: 0.3;
  }

  .aurora-blob--1 { width: 350px; height: 350px; }
  .aurora-blob--2 { width: 300px; height: 300px; }
  .aurora-blob--3 { width: 250px; height: 250px; }
  .aurora-blob--4 { display: none; }

  .grid-overlay {
    background-size: 50px 50px;
    opacity: 0.03;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aurora-blob {
    animation: none !important;
  }
}