/*
 * 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):
 * - NO blur filters on any tier: softness is baked into the gradients
 *   (blur on fixed full-viewport layers is the worst-case GPU cost)
 * - Mobile: gradients only, 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.
 * NO blur filter: softness is baked into the gradient stops (blur on a
 * fixed full-viewport layer is the single most expensive thing a weak GPU
 * can be asked to do every frame — this renders identically-directioned
 * atmosphere at a fraction of the cost on a 4GB Celeron). */
body::before {
  background:
    radial-gradient(45% 34% at 18% 12%, rgba(94, 200, 255, 0.10), rgba(94, 200, 255, 0.045) 45%, rgba(94, 200, 255, 0.015) 68%, transparent 85%),
    radial-gradient(40% 32% at 82% 20%, rgba(167, 139, 250, 0.085), rgba(167, 139, 250, 0.035) 45%, rgba(167, 139, 250, 0.012) 68%, transparent 85%),
    radial-gradient(48% 36% at 70% 88%, rgba(94, 200, 255, 0.07), rgba(94, 200, 255, 0.03) 48%, transparent 82%),
    radial-gradient(36% 28% at 25% 85%, rgba(52, 211, 153, 0.04), rgba(52, 211, 153, 0.014) 50%, transparent 80%),
    conic-gradient(from 210deg at 50% 50%,
      transparent 0deg,
      rgba(94, 200, 255, 0.035) 70deg,
      transparent 140deg,
      rgba(167, 139, 250, 0.035) 220deg,
      transparent 300deg);
  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 36%, rgba(94, 200, 255, 0.03) 46%, rgba(94, 200, 255, 0.045) 50%, rgba(94, 200, 255, 0.03) 54%, transparent 64%),
    linear-gradient(65deg, transparent 38%, rgba(167, 139, 250, 0.028) 50%, rgba(167, 139, 250, 0.04) 54%, rgba(167, 139, 250, 0.028) 60%, transparent 70%),
    linear-gradient(160deg, transparent 54%, rgba(52, 211, 153, 0.018) 66%, rgba(52, 211, 153, 0.025) 68%, rgba(52, 211, 153, 0.018) 74%, transparent 82%);
  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%);
    animation-duration: 120s;
  }
  body::after {
    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;
  }
}

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

/*
 * Native <select> dropdown fix (sitewide).
 * Windows Chrome paints the native popup list white while the page's white
 * text colour is inherited → invisible options (white-on-white). Force the
 * popup dark and give options explicit colours. Same fix as the admissions
 * portal's assets/style.css.
 */
select{color-scheme:dark}
select option,select optgroup{background:#0A0D12;color:#F2F8FC}
select option:checked{background:#5EC8FF;color:#04131C}