/* atmosphere.css — orbs, grid, NRR watermark, LED ticker
   All elements are position:fixed, z-index:0, pointer-events:none
   GPU-only: transform + opacity animations only
   ---------------------------------------------------------------- */

/* ── Atmosphere root ──────────────────────────────────────────── */
#atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;   /* true backdrop: sits behind ALL page content (incl. non-positioned production sections + the z-index:-1 hero video, which paints above via DOM order). Lab content (z-index:10) is unaffected. */
  pointer-events: none;
  overflow: hidden;
  background-color: #05030a;   /* indigo base lives here (was on body) — so body can stay #000 to match the wipe panel */
}

/* ── Backdrop ─────────────────────────────────────────────────── */
/* html = pure black canvas for the transition gap (matches curtain panel).
   body must be transparent so #atmosphere (z-index:-1) shows through it.
   Opaque body covers negative-z-index fixed elements on all standard browsers. */
html {
  background-color: #000000;
}
body {
  background-color: transparent;
}

/* ── Orbs ─────────────────────────────────────────────────────── */
.atm-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.12;   /* lowered from 0.16 to keep morphs subtle against the darker field */
  will-change: transform;
}

.atm-orb-1 {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, #431473, transparent 70%);
  top: -10%;
  left: -8%;
  animation: orb-drift-1 22s ease-in-out infinite alternate;
}

.atm-orb-2 {
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, #C82E66, transparent 70%);
  bottom: 10%;
  right: -5%;
  animation: orb-drift-2 28s ease-in-out infinite alternate;
}

.atm-orb-3 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #D56533, transparent 70%);
  top: 40%;
  left: 45%;
  animation: orb-drift-3 18s ease-in-out infinite alternate;
}

@keyframes orb-drift-1 {
  from { transform: translate(0, 0); }
  to   { transform: translate(60px, 80px); }
}
@keyframes orb-drift-2 {
  from { transform: translate(0, 0); }
  to   { transform: translate(-70px, -50px); }
}
@keyframes orb-drift-3 {
  from { transform: translate(0, 0); }
  to   { transform: translate(-40px, 60px); }
}

/* ── Grid ─────────────────────────────────────────────────────── */
.atm-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(79,23,135,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,23,135,0.08) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ── Brand ticker (home page only, in-flow hero separator) ───── */
.atm-ticker {
  overflow: hidden;
  padding: 1rem 0;
  background: transparent;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: relative;
  z-index: 10;
}

.atm-ticker-track {
  display: flex;
  white-space: nowrap;
  will-change: transform;
}

.atm-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  font-family: 'Recia-Regular', serif;
  font-size: 0.8rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(245,242,238,0.42);
  padding: 0 4rem;
  flex-shrink: 0;
}

.atm-ticker-item .star { color: #EA1821; opacity: 0.85; }

.atm-ticker-item .batch-sep {
  width: 7rem;
  display: inline-block;
  flex-shrink: 0;
}

/* ── Film grain overlay ───────────────────────────────────────── */
/* html::after avoids conflict with body::after mobile nav overlay.
   No blend mode — overlay math zeroes out on near-black backgrounds. */
html::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9997;   /* topmost film layer (above curtain 8000 + preloader 9000/9100, below cursor 9998) — textures the whole frame incl. the wipe, so no flat break. html::after is root-level so it can't be trapped by any page's stacking context. */
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.55' numOctaves='6' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  opacity: 0.07;
}

/* ── Mobile: fewer orbs, smaller blur ────────────────────────── */
@media (max-width: 768px) {
  .atm-orb-3 { display: none; }
  .atm-orb { filter: blur(70px); }
  .atm-ticker { padding: 0.85rem 0; }
  .atm-ticker-item { font-size: 0.68rem; gap: 1.2rem; letter-spacing: .28em; }
  .atm-ticker-item .batch-sep { width: 4rem; }
}

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .atm-orb,
  .atm-ticker-track { animation: none; }
}