/*
 * 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.
 *
 * 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); }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none;
  }
}