/* ============================================================
   atmosphere.css — dark/atmospheric FX layer
   All effects are gated behind body.ae-fx so they can be
   toggled off cleanly without touching the base site.
   Layers render INSIDE #root: #ae-bg (z0, behind content),
   sections (auto), then particles/vignette/cursor (z39–41),
   while nav (z100) and modals (z1000) stay safely on top.
   ============================================================ */

#root { position: relative; }

/* ---------- animated gradient backdrop + ambient heartbeat ---------- */
#ae-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 18% 16%, rgba(0,200,235,0.16), transparent 60%),
    radial-gradient(55% 50% at 84% 82%, rgba(34,110,235,0.15), transparent 62%),
    radial-gradient(45% 45% at 60% 50%, rgba(0,160,200,0.10), transparent 70%);
  background-size: 170% 170%, 175% 175%, 200% 200%;
  background-repeat: no-repeat;
  animation: ae-bgshift 26s ease-in-out infinite;
  will-change: background-position, transform;
}
html[data-dir="spectrum"] #ae-bg {
  background:
    radial-gradient(60% 50% at 18% 16%, rgba(34,180,210,0.18), transparent 60%),
    radial-gradient(55% 50% at 84% 82%, rgba(120,70,230,0.18), transparent 62%),
    radial-gradient(45% 45% at 60% 50%, rgba(40,120,210,0.10), transparent 70%);
}
html[data-dir="editorial"] #ae-bg {
  background:
    radial-gradient(60% 50% at 18% 16%, rgba(150,110,40,0.16), transparent 60%),
    radial-gradient(55% 50% at 84% 82%, rgba(90,60,120,0.13), transparent 62%),
    radial-gradient(45% 45% at 60% 50%, rgba(120,80,40,0.10), transparent 70%);
}
@keyframes ae-bgshift {
  0%   { background-position: 0% 0%, 100% 100%, 50% 50%; }
  50%  { background-position: 100% 35%, 0% 65%, 60% 40%; }
  100% { background-position: 0% 0%, 100% 100%, 50% 50%; }
}
#ae-bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 50% 42%, var(--grad-glow), transparent 72%);
  opacity: 0.18;
  animation: ae-heartbeat 4.6s ease-in-out infinite;
}
@keyframes ae-heartbeat { 0%,100% { opacity: 0.12; } 50% { opacity: 0.42; } }

/* ---------- particles / vignette / cursor glow ---------- */
#ae-particles { position: fixed; inset: 0; z-index: 39; pointer-events: none; mix-blend-mode: screen; opacity: 0.75; }
@media (max-width: 640px){ #ae-particles { opacity: 0.45; } #ae-cursor { display: none !important; } }

#ae-vignette {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  background: radial-gradient(125% 105% at 50% 48%, transparent 52%, rgba(0,0,0,0.5) 100%);
  mix-blend-mode: multiply;
}

#ae-cursor {
  position: fixed; top: 0; left: 0; width: 460px; height: 460px;
  margin: -230px 0 0 -230px; border-radius: 50%;
  z-index: 41; pointer-events: none;
  background: radial-gradient(circle, var(--grad-glow), transparent 60%);
  opacity: 0; mix-blend-mode: screen; filter: blur(14px);
  transition: opacity .5s ease;
}
#ae-cursor.on { opacity: 0.5; }

/* ---------- hover spotlight: focus one, blur + dim the rest ---------- */
body.ae-fx .reel,
body.ae-fx .ae-srow {
  transition: filter .3s var(--ease), opacity .3s var(--ease), box-shadow .3s var(--ease);
}
body.ae-fx.ae-spotlight .reel:not(.ae-spot-on),
body.ae-fx.ae-spotlight .ae-srow:not(.ae-spot-on) {
  filter: blur(3px) brightness(0.68);
  opacity: 0.6;
}
body.ae-fx .reel.ae-spot-on {
  transform: scale(0.95) !important;
  box-shadow: 0 0 0 1px var(--accent-soft), 0 0 60px -8px var(--grad-glow), 0 24px 80px -20px var(--grad-glow);
  z-index: 6;
}
body.ae-fx .ae-srow.ae-spot-on {
  box-shadow: 0 0 54px -14px var(--grad-glow);
}

/* ---------- button glow + scale bounce + ripple ---------- */
body.ae-fx .cta-grad, body.ae-fx .cta-glass, body.ae-fx .btn { overflow: hidden; }
body.ae-fx .btn-primary {
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .3s, color .3s, border-color .3s;
}
body.ae-fx .btn-primary:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 0 30px -4px var(--grad-glow), 0 10px 32px -10px var(--grad-glow);
}
body.ae-fx .cta-grad:hover {
  box-shadow: 0 0 36px -2px var(--grad-glow), 0 16px 46px -8px var(--grad-glow);
}
body.ae-fx .cta-glass:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 0 28px -6px var(--grad-glow), 0 12px 34px -12px rgba(0,0,0,0.6);
}
body.ae-fx .chat-launcher:hover,
body.ae-fx .chat-send:hover { box-shadow: 0 0 28px -2px var(--grad-glow), 0 12px 36px -6px var(--grad-glow); }

.ae-ripple {
  position: absolute; border-radius: 50%;
  width: 12px; height: 12px;
  transform: translate(-50%, -50%) scale(0);
  background: rgba(255,255,255,0.55);
  pointer-events: none; mix-blend-mode: screen;
  animation: ae-ripple .62s cubic-bezier(0.22,0.61,0.36,1) forwards;
}
@keyframes ae-ripple { to { transform: translate(-50%,-50%) scale(26); opacity: 0; } }

/* ---------- headings lit from behind ---------- */
body.ae-fx .display { text-shadow: 0 0 30px rgba(0,229,255,0.16); }
html[data-dir="spectrum"] body.ae-fx .display { text-shadow: 0 0 30px rgba(60,170,225,0.16); }
html[data-dir="editorial"] body.ae-fx .display { text-shadow: 0 0 30px rgba(220,170,90,0.14); }

/* ---------- paragraph brighten on hover ---------- */
body.ae-fx p.muted { transition: color .35s var(--ease); }
body.ae-fx p.muted:hover { color: var(--text); }

/* ---------- animated underlines on links ---------- */
body.ae-fx .ae-nav-a, body.ae-fx .ae-foot-a { position: relative; }
body.ae-fx .ae-nav-a::after, body.ae-fx .ae-foot-a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1.5px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
body.ae-fx .ae-nav-a:hover::after, body.ae-fx .ae-foot-a:hover::after { transform: scaleX(1); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #ae-bg, #ae-bg::after { animation: none !important; }
  .ae-ripple { animation: none !important; display: none; }
}