/* ==========================================================================
   NetrAI — ambient page background

   A fixed, full-viewport layer of soft glow orbs, light blooms and drifting
   light streaks that sits beneath every section and shows through wherever
   the page above it is transparent.

   THIS USED TO BE HOMEPAGE-ONLY. It lived in css/pages/finale.css, which only
   index.html loads, so in dark mode the homepage had atmosphere and the other
   six pages were flat black — the inconsistency that was reported. Splitting
   it out into its own file (rather than linking finale.css everywhere, which
   would drag the homepage-only .site-finale rules along with it) lets every
   page load the same background from one place, and lets the whole layer be
   reverted by removing a single <link>.

   DARK ONLY, deliberately. On the light canvas these washes have no home —
   the light theme is the flat Apple system and a violet bloom under it reads
   as a smudge. The layer stays off until the page is actually dark, matching
   the explicit toggle first and the OS setting second.
   ========================================================================== */

.ambient-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  display: none;
}
[data-theme="dark"] .ambient-bg { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ambient-bg { display: block; }
}

.ambient-bg .glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.16;
  will-change: transform;
  animation: ambientDrift 46s ease-in-out infinite;
}
.ambient-bg .orb-1 { width: 460px; height: 460px; top: 4%; left: -6%; background: var(--iris-violet); animation-delay: 0s; }
.ambient-bg .orb-2 { width: 520px; height: 520px; top: 46%; right: -10%; background: var(--iris-cyan); animation-delay: -16s; animation-duration: 54s; }
.ambient-bg .orb-3 { width: 400px; height: 400px; bottom: 6%; left: 18%; background: var(--iris-blue); animation-delay: -30s; animation-duration: 60s; }

.ambient-bg .light-bloom {
  position: absolute;
  border-radius: 50%;
  opacity: 0.12;
  filter: blur(120px);
  animation: bloomPulse 20s ease-in-out infinite;
}
.ambient-bg .bloom-1 {
  width: 640px; height: 640px; top: 20%; left: 50%;
  background: radial-gradient(circle, var(--iris-cyan) 0%, transparent 70%);
  animation-delay: -4s;
}
.ambient-bg .bloom-2 {
  width: 560px; height: 560px; bottom: 12%; right: 8%;
  background: radial-gradient(circle, var(--iris-violet) 0%, transparent 70%);
  animation-delay: -12s;
}

.ambient-bg .light-streak {
  position: absolute;
  height: 1px;
  width: 60%;
  opacity: 0.14;
  background: linear-gradient(90deg, transparent, var(--iris-cyan), var(--iris-blue), transparent);
  animation: streakFlow 34s linear infinite;
}
.ambient-bg .streak-1 { top: 22%; left: -20%; transform: rotate(6deg); animation-delay: 0s; }
.ambient-bg .streak-2 { top: 68%; left: -30%; width: 70%; background: linear-gradient(90deg, transparent, var(--iris-violet), var(--iris-cyan), transparent); transform: rotate(-4deg); animation-delay: -14s; animation-duration: 40s; }

@keyframes ambientDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(46px, -34px) scale(1.07); }
  66% { transform: translate(-32px, 28px) scale(0.96); }
}
@keyframes bloomPulse {
  0%, 100% { opacity: 0.10; transform: scale(1); }
  50% { opacity: 0.18; transform: scale(1.08); }
}
@keyframes streakFlow {
  0% { transform: translateX(-10%) rotate(var(--streak-rot, 0deg)); opacity: 0; }
  10% { opacity: 0.14; }
  90% { opacity: 0.14; }
  100% { transform: translateX(120%) rotate(var(--streak-rot, 0deg)); opacity: 0; }
}
.ambient-bg .streak-1 { --streak-rot: 6deg; }
.ambient-bg .streak-2 { --streak-rot: -4deg; }

@media (prefers-reduced-motion: reduce) {
  .ambient-bg .glow-orb,
  .ambient-bg .light-bloom,
  .ambient-bg .light-streak { animation: none; }
}

@media (max-width: 700px) {
  .ambient-bg .glow-orb { filter: blur(60px); opacity: 0.12; }
  .ambient-bg .light-bloom { filter: blur(80px); }
}