/* Fixed atmospheric layer — drifts behind everything.
   Three blurred radial-gradient glows in cobalt + violet + teal,
   plus a turbulence-noise grain overlay.
   GSAP animates the x/y of each .atmos__glow at runtime (see animations.js). */

.atmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.atmos__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  will-change: transform;
}

.atmos__glow--1 {
  width: 720px;
  height: 720px;
  top: -200px;
  right: -150px;
  background: oklch(45% 0.22 252 / 0.55);
}

.atmos__glow--2 {
  width: 540px;
  height: 540px;
  bottom: -120px;
  left: -120px;
  background: oklch(40% 0.22 290 / 0.45);
}

.atmos__glow--3 {
  width: 380px;
  height: 380px;
  top: 60%;
  left: 35%;
  background: oklch(55% 0.20 200 / 0.30);
}

.atmos__grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  opacity: 0.16;
  mix-blend-mode: overlay;
}

/* Reduced motion — kill the cursor-parallax + drift in JS but keep the
   glows in place; the atmosphere should still feel like atmosphere. */
@media (prefers-reduced-motion: reduce) {
  .atmos__glow { will-change: auto; }
}