/* ═══════════════════════════════════════════════════════════════
   ATMOSPHERE — CAUSTICS (locked in, sovereignty-syndicate mood)
   Two stacked SVG turbulence layers (lime fast + magenta slow)
   create the underwater light-vein effect. Pure SVG + SMIL.
═══════════════════════════════════════════════════════════════ */

body {
  background: #04000c;
}

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

/* Caustic layers */
.caustic-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.caustic-lime {
  opacity: 0.32;
  mix-blend-mode: screen;
}
.caustic-magenta {
  opacity: 0.22;
  mix-blend-mode: screen;
}

/* Vignette focuses attention on hero center */
.atmo-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 90% at 50% 45%, transparent 30%, rgba(0,0,0,0.55) 100%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(0,0,0,0.7), transparent 70%);
}

/* ═══════════════════════════════════════════════════════════════
   Mobile: ease GPU load — reduce caustic opacity
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .caustic-lime    { opacity: 0.22; }
  .caustic-magenta { opacity: 0.16; }
}

/* ═══════════════════════════════════════════════════════════════
   Reduced motion — freeze caustic animation
═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .caustic-svg animate { display: none; }
}