/* ==========================================================================
   NEON AUDIO — SEASONAL THEME: HALLOWEEN
   Seance - ember orange + phantom green on warm black. A haunted CRT.
   Suggested window: October

   GENERATED by seasons/build-seasons.py — edit the PALETTE there, not this file.
   Purely additive: load AFTER the page's own <style>. Delete it and the site is stock.
   Contrast audit (WCAG AA needs 4.5:1 body, 3:1 large/UI):
     body text   ink/ground    16.78:1  need 4.5  PASS
     secondary   muted/ground   6.64:1  need 4.5  PASS
     accent      signal/ground  8.62:1  need 4.5  PASS
     button text solid_ink/sig  8.21:1  need 4.5  PASS
     technical   cool/ground   12.07:1  need 3.0  PASS
   ========================================================================== */

:root{
  --ground:#0B0709; --panel:#17100F; --panel-2:#0F0A0B; --line:#2B1E1C;
  --ink:#F3E9E5; --muted:#A2918C; --faint:#6D5D59;
  --signal:#FF8C2E; --signal-dim:#8E4210; --hl:#FF8C2E;
  --cool:#6BE08A; --magenta:#E5344E; --good:#6BE08A;
  /* Exposed so future CSS can tint without hardcoding. The overrides below exist
     because the SHIPPED stylesheet predates these and bakes the numbers in. */
  --signal-rgb:255,140,46; --cool-rgb:107,224,138; --magenta-rgb:229,52,78;
}

/* ── THE SUBPAGE TEMPLATE IS A DIFFERENT CODEBASE ───────────────────────────
   Every page that is not the homepage (packs/*, guides/*, free-sound-effects,
   tools/index, visualizer-looks, privacy, terms, 404) ships its own smaller
   <style> with a DIFFERENT token set: it says --teal where index.html says
   --cool, adds --line-2, and draws the brand sun as a STATIC svg gradient with
   stop-color baked into the markup instead of index's 18s animated one.
   Miss this and the subpages come out half-themed — orange headings over a
   stock cyan eyebrow and a pink-and-blue logo. (Found by rendering, not reading.)
   CSS beats a presentation attribute, so the stops below re-colour the markup;
   index's .sunmark keyframes are untouched because an animation outranks these. */
:root{ --teal:#6BE08A; --line-2:#4C4240; }
.sun stop:nth-child(1){stop-color:#6BE08A}
.sun stop:nth-child(2){stop-color:#FF8C2E}
.sun stop:nth-child(3){stop-color:#E5344E}

/* ── the ~25 rules that hardcode an accent ──────────────────────────────── */
.miclisten{background:linear-gradient(rgba(107,224,138,.07),rgba(107,224,138,.07)),var(--panel-2)}
.miclisten[aria-pressed="true"]{
  background:linear-gradient(rgba(107,224,138,.08),rgba(107,224,138,.08)),var(--panel-2)}
.miclisten[aria-pressed="true"] .d{box-shadow:0 0 0 3px rgba(107,224,138,.16),0 0 10px var(--cool)}
@keyframes micpulse{50%{box-shadow:0 0 0 5px rgba(107,224,138,.10),0 0 14px var(--cool)}}
.mark .sunmark{filter:drop-shadow(0 0 5px rgba(107,224,138,.35))}
.nav-cta{box-shadow:0 0 16px rgba(107,224,138,.30)}
.nav-cta:hover{background:#FF9E4F}
@keyframes navcta{
    0%{box-shadow:0 0 16px rgba(107,224,138,.30)}
   35%{box-shadow:0 0 18px rgba(255,140,46,.34)}
   70%{box-shadow:0 0 18px rgba(229,52,78,.32)}
  100%{box-shadow:0 0 16px rgba(107,224,138,.30)}}
.grid-h{background-image:linear-gradient(rgba(107,224,138,.10) 1px,transparent 1px),
  linear-gradient(90deg,rgba(107,224,138,.10) 1px,transparent 1px)}
.btn:hover,.btn:focus-visible{box-shadow:0 0 16px rgba(107,224,138,.2)}
.btn.solid{color:#1F0A00}
.btn.solid:hover,.btn.solid:focus-visible{
  background:#FF9E4F;color:#1F0A00;box-shadow:0 0 22px rgba(255,140,46,.4)}
.card.featured{box-shadow:0 0 40px rgba(255,140,46,.12)}
.card.featured:hover{box-shadow:0 0 48px rgba(255,140,46,.18)}
.status.new{color:var(--signal);border:1px solid rgba(255,140,46,.35);
  background:rgba(255,140,46,.08)}
.buy{color:#1F0A00}
.buy:hover{background:#FF9E4F;box-shadow:0 0 18px rgba(255,140,46,.35)}
.demo-play{background:rgba(255,140,46,.08)}
.demo-play:hover{background:rgba(255,140,46,.16);box-shadow:0 0 16px rgba(255,140,46,.25)}
.demo.playing .demo-play{background:rgba(255,140,46,.22)}
.stakes .lead em{text-shadow:0 0 18px rgba(229,52,78,.3)}
.wins .lead em{text-shadow:0 0 18px rgba(107,224,138,.3)}
.pf.on{color:#1F0A00}

/* ── the 18s animated sun logo + nav mark, re-stopped to the season ─────── */
@keyframes sun0{0%{stop-color:#6BE08A}25%{stop-color:#FF8C2E}45%{stop-color:#E5344E}
  70%{stop-color:#FF8C2E}100%{stop-color:#6BE08A}}
@keyframes sun1{0%{stop-color:#FF8C2E}25%{stop-color:#E5344E}45%{stop-color:#6BE08A}
  70%{stop-color:#E5344E}100%{stop-color:#FF8C2E}}
@keyframes sun2{0%{stop-color:#E5344E}25%{stop-color:#6BE08A}45%{stop-color:#FF8C2E}
  70%{stop-color:#6BE08A}100%{stop-color:#E5344E}}

/* ── the RGB-split glitch, re-fringed ──────────────────────────────────── */
.glitch::before{color:var(--cool)}
.glitch::after{color:var(--magenta)}

/* Drifting fog. Two offset radial gradients on a slow ease — reads as mist crossing
   the screen, not as a moving image, so it costs one composited layer and no JS. */
body::before{content:"";position:fixed;inset:-20%;z-index:58;pointer-events:none;
  background:
    radial-gradient(48% 34% at 22% 62%,rgba(107,224,138,.055),transparent 70%),
    radial-gradient(54% 30% at 78% 38%,rgba(255,140,46,.045),transparent 72%);
  animation:seance-fog 42s ease-in-out infinite alternate}
@keyframes seance-fog{
  0%{transform:translate3d(-3%,1%,0) scale(1)}
  100%{transform:translate3d(3%,-2%,0) scale(1.08)}}

/* Candle flicker on the headline glow only. The hero <h1> highlight already has a
   text-shadow; this makes it gutter like a flame instead of sitting steady.
   Deliberately NOT applied to the whole page — a flickering page is a migraine. */
.hero h1 .g,.hero .tag .hl{animation:seance-flicker 5.5s linear infinite}
@keyframes seance-flicker{
  0%,17%,19%,21%,54%,56%,100%{opacity:1}
  18%,55%{opacity:.72}
  20%{opacity:.86}}
/* Scanlines sit a little heavier — the haunted-CRT read. */
.scanlines{opacity:.46}

/* Every seasonal motion layer is opt-out for vestibular safety. The site's own
   scanline rule already respects this; the extras must too. */
@media(prefers-reduced-motion:reduce){
  body::before{animation:none}
  .hero h1 .g,.hero .tag .hl{animation:none}
}