/*
 * NGI ambient background — aurora swirl + light streaks.
 * -------------------------------------------------------
 * Pure CSS (no JS, no images): two fixed pseudo-layers of blurred
 * gradients behind the content. Animations are transform-only, so
 * they're GPU-composited and cheap. Opacities are deliberately low —
 * the effect should read as "premium depth", never as noise behind
 * text. Disabled for prefers-reduced-motion users.
 *
 * PERFORMANCE-AWARE (Part 3 of the mobile/perf spec):
 * - Desktop: full blur(70px) + slow swirl
 * - Tablet (<1024px): reduced blur(50px), no conic gradient
 * - Mobile (<768px): simple gradients, NO blur filter, NO animation
 *   (blur on fixed full-viewport elements kills mobile GPUs)
 * - prefers-reduced-motion: static, no animation on any device
 * - Pauses when page is hidden (via the animation-play-state trick
 *   with a body class toggled by a tiny visibilitychange listener)
 *
 * body's children always paint above body::before/::after (same
 * stacking context, later in paint order), and both layers are
 * pointer-events:none — no clicks or content are affected.
 */
body::before,
body::after {
  content: '';
  position: fixed;
  inset: -25%;
  pointer-events: none;
}

/* Layer 1 — the swirl: soft radial blooms + a slow rotating conic sheen */
body::before {
  background:
    radial-gradient(38% 28% at 18% 12%, rgba(94, 200, 255, 0.13), transparent 70%),
    radial-gradient(34% 26% at 82% 20%, rgba(167, 139, 250, 0.11), transparent 70%),
    radial-gradient(40% 30% at 70% 88%, rgba(94, 200, 255, 0.09), transparent 70%),
    radial-gradient(30% 24% at 25% 85%, rgba(52, 211, 153, 0.05), transparent 70%),
    conic-gradient(from 210deg at 50% 50%,
      transparent 0deg,
      rgba(94, 200, 255, 0.045) 70deg,
      transparent 140deg,
      rgba(167, 139, 250, 0.045) 220deg,
      transparent 300deg);
  filter: blur(70px);
  animation: ngi-aurora-swirl 90s linear infinite;
  will-change: transform;
}

/* Layer 2 — drifting light streaks crossing the viewport */
body::after {
  background:
    linear-gradient(105deg, transparent 42%, rgba(94, 200, 255, 0.045) 50%, transparent 58%),
    linear-gradient(65deg, transparent 44%, rgba(167, 139, 250, 0.04) 54%, transparent 64%),
    linear-gradient(160deg, transparent 60%, rgba(52, 211, 153, 0.025) 68%, transparent 76%);
  filter: blur(46px);
  animation: ngi-aurora-streak 70s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes ngi-aurora-swirl {
  from { transform: rotate(0deg) scale(1); }
  to   { transform: rotate(360deg) scale(1.06); }
}

@keyframes ngi-aurora-streak {
  from { transform: translate3d(-4%, -2%, 0) rotate(-2deg); }
  to   { transform: translate3d(4%, 3%, 0) rotate(2deg); }
}

/* ---- TABLET: reduced effect (cheaper blur, no conic swirl) ---- */
@media (max-width: 1024px) {
  body::before {
    background:
      radial-gradient(38% 28% at 18% 12%, rgba(94, 200, 255, 0.11), transparent 70%),
      radial-gradient(34% 26% at 82% 20%, rgba(167, 139, 250, 0.09), transparent 70%),
      radial-gradient(40% 30% at 70% 88%, rgba(94, 200, 255, 0.07), transparent 70%);
    filter: blur(50px);
    animation-duration: 120s;
  }
  body::after {
    filter: blur(36px);
    animation-duration: 90s;
  }
}

/* ---- MOBILE: static gradients, NO blur filter, NO animation ---- */
@media (max-width: 768px) {
  body::before {
    background:
      radial-gradient(50% 30% at 20% 10%, rgba(94, 200, 255, 0.08), transparent 70%),
      radial-gradient(40% 25% at 80% 15%, rgba(167, 139, 250, 0.06), transparent 70%),
      radial-gradient(45% 28% at 70% 90%, rgba(94, 200, 255, 0.05), transparent 70%);
    filter: none;
    animation: none;
    will-change: auto;
  }
  body::after {
    background: none;
    filter: none;
    animation: none;
    will-change: auto;
  }
}

/* ---- Reduced motion: static on ALL devices ---- */
@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none;
    filter: blur(30px);
  }
}

/* ---- Pause when page hidden (body class set by JS visibilitychange) ---- */
body.ngi-page-hidden::before,
body.ngi-page-hidden::after {
  animation-play-state: paused;
}