/* =============================================================================
   ambient.css — site-wide living background ("deep space, alive") v3
   =============================================================================
   Four fixed, GPU-composited layers behind every page (z-index:-1):
     html::before  — starfield A (half the stars, twinkle phase A + drift)
     html::after   — starfield B (other half, twinkle phase B counter-phased —
                     the two sets fade against each other, so individual stars
                     visibly sparkle instead of the whole sky dimming at once)
     body::before  — comet streaks (ONE element, two lanes per 16s cycle)
     body::after   — aurora sheet + a compact glow orb that visibly travels a
                     circuit around the viewport every ~26s (the "moving light")
   - transform/opacity animations only (compositor-friendly, 60fps).
   - Standalone file, namespaced clzamb-* keyframes, no class collisions —
     safe on pages that don't load styles.css (blog articles, landings).
   - tier-closer.html defines its own body::before (gold top bar) — that page
     keeps the aurora/stars and just loses the comets. Acceptable.
   ========================================================================== */

html::before,
html::after,
body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: -1;
}

/* --- Starfield A ----------------------------------------------------------- */
html::before {
  left: 0;
  right: 0;
  top: -100vh;
  height: 300vh;
  background-image:
    radial-gradient(1.3px 1.3px at 27px 34px,  rgba(255,255,255,0.9),  transparent 2px),
    radial-gradient(1.3px 1.3px at 241px 209px, rgba(255,255,255,0.8),  transparent 2px),
    radial-gradient(1.3px 1.3px at 300px 30px,  rgba(255,255,255,0.65), transparent 2px),
    radial-gradient(2px 2px at 201px 61px,   rgba(34,211,238,0.85),  transparent 3px),
    radial-gradient(2px 2px at 310px 290px,  rgba(167,139,250,0.75), transparent 3px),
    radial-gradient(2.6px 2.6px at 120px 320px, rgba(167,139,250,0.6), transparent 3.8px),
    radial-gradient(5px 5px at 68px 88px, rgba(255,255,255,0.25), transparent 6px);
  background-size: 340px 340px;
  animation:
    clzamb-star-drift 70s ease-in-out infinite alternate,
    clzamb-twinkle-a 2.1s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* --- Starfield B (offset tile, counter-phased twinkle) --------------------- */
html::after {
  left: 0;
  right: 0;
  top: -100vh;
  height: 300vh;
  background-image:
    radial-gradient(1.3px 1.3px at 153px 131px, rgba(255,255,255,0.85), transparent 2px),
    radial-gradient(1.3px 1.3px at 88px 254px,  rgba(255,255,255,0.7),  transparent 2px),
    radial-gradient(2px 2px at 47px 172px,   rgba(34,211,238,0.8),   transparent 3px),
    radial-gradient(2px 2px at 180px 300px,  rgba(96,165,250,0.7),   transparent 3px),
    radial-gradient(2.6px 2.6px at 330px 110px, rgba(255,255,255,0.6), transparent 3.8px),
    radial-gradient(1.6px 1.6px at 255px 340px, rgba(255,255,255,0.75), transparent 2.4px),
    radial-gradient(4px 4px at 30px 300px, rgba(34,211,238,0.28), transparent 5px);
  background-size: 340px 340px;
  background-position: 170px 115px;   /* interleave between A's stars */
  animation:
    clzamb-star-drift-b 95s ease-in-out infinite alternate,
    clzamb-twinkle-b 2.9s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* --- Comets: one element, two lanes per 16s cycle -------------------------- */
body::before {
  top: 14%;
  left: -12%;
  width: 320px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    transparent,
    rgba(34,211,238,0.75) 55%,
    rgba(255,255,255,0.95) 92%,
    transparent);
  transform: rotate(24deg);
  opacity: 0;
  animation: clzamb-comets 16s linear infinite;
  animation-delay: 1.5s;
  will-change: transform, opacity;
}

/* --- Aurora sheet + traveling glow orb ------------------------------------- */
body::after {
  left: -25%;
  top: -25%;
  width: 150%;
  height: 150%;
  background:
    /* the compact "moving light" pair — bright enough to read as an object */
    radial-gradient(16% 13% at 30% 30%, rgba(34,211,238,0.30), transparent 70%),
    radial-gradient(13% 11% at 68% 62%, rgba(167,139,250,0.26), transparent 70%),
    /* broad ambient washes for depth */
    radial-gradient(46% 38% at 84% 22%, rgba(167,139,250,0.16), transparent 70%),
    radial-gradient(44% 36% at 45% 90%, rgba(52,211,153,0.12), transparent 70%),
    radial-gradient(70% 24% at 50% 0%,  rgba(96,165,250,0.11), transparent 75%);
  animation: clzamb-glow-path 26s ease-in-out infinite;
  will-change: transform;
}

/* --- Keyframes ------------------------------------------------------------ */
@keyframes clzamb-star-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, 22vh, 0); }
}
@keyframes clzamb-star-drift-b {
  from { transform: translate3d(0, 10vh, 0); }
  to   { transform: translate3d(0, -12vh, 0); }
}

/* Counter-phased: A starts bright while B starts dim, different periods →
   neighbouring stars are always sparkling against each other. */
@keyframes clzamb-twinkle-a {
  from { opacity: 1; }
  to   { opacity: 0.15; }
}
@keyframes clzamb-twinkle-b {
  from { opacity: 0.2; }
  to   { opacity: 1; }
}

/* A closed circuit (not alternate) so the light keeps traveling — down-right,
   drop, sweep left, rise home. ±10% of a 150% block ≈ 15% of the viewport. */
@keyframes clzamb-glow-path {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg)      scale(1); }
  25%  { transform: translate3d(10%, -5%, 0) rotate(2deg)  scale(1.10); }
  50%  { transform: translate3d(4%, 7%, 0) rotate(0.5deg)  scale(1.02); }
  75%  { transform: translate3d(-9%, 2%, 0) rotate(-2deg)  scale(1.12); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg)      scale(1); }
}

/* Two sweeps per cycle: lane 1 (upper, 0–12%), lane 2 (lower, 50–62%). */
@keyframes clzamb-comets {
  0%    { transform: translate3d(0, 0, 0) rotate(24deg); opacity: 0; }
  1%    { opacity: 0.9; }
  11%   { opacity: 0.9; }
  12%   { transform: translate3d(124vw, 55vh, 0) rotate(24deg); opacity: 0; }
  49.9% { transform: translate3d(0, 38vh, 0) rotate(19deg); opacity: 0; }
  51%   { opacity: 0.8; }
  61%   { opacity: 0.8; }
  62%   { transform: translate3d(124vw, 80vh, 0) rotate(19deg); opacity: 0; }
  100%  { transform: translate3d(124vw, 80vh, 0) rotate(19deg); opacity: 0; }
}

/* --- Budgets & guardrails -------------------------------------------------- */
@media (max-width: 768px) {
  html::before, html::after { background-size: 300px 300px; }
  body::after { animation-duration: 34s; }
}

@media (prefers-reduced-motion: reduce) {
  html::before, html::after, body::after { animation: none; }
  body::before { animation: none; display: none; }
}

@media print {
  html::before, html::after,
  body::before, body::after { display: none !important; }
}