/* Seasonal ribbon for Proud Entertainment — date-driven, injected by assets/seasonal/seasonal.js.
 * A slim atmospheric banner below the site nav (above the hero). Dark #050608,
 * gold border/glow matching the brand. Never a site takeover: renders only during
 * the active season window (Oct 1 → Jan 1), otherwise the module outputs nothing.
 */

.seasonal-ribbon{
  --sg:#d4af37;
  --sg-hi:#e8c86e;
  position:relative;
  z-index:40;
  background:#050608;
  border-top:1px solid rgba(212,175,55,.35);
  border-bottom:1px solid rgba(212,175,55,.35);
  box-shadow:0 1px 14px rgba(212,175,55,.18), inset 0 1px 0 rgba(232,200,110,.12);
  color:#f8f4e9;
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;
}

.seasonal-ribbon::before{
  /* faint seasonal glow wash across the banner */
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(120% 220% at 50% 0%, rgba(212,175,55,.10) 0%, rgba(212,175,55,0) 60%);
}

.seasonal-ribbon-inner{
  position:relative;
  max-width:1200px;
  margin:0 auto;
  padding:10px 20px;
  display:flex;
  align-items:center;
  gap:16px;
}

.seasonal-thumb{
  flex:0 0 auto;
  width:64px;
  height:64px;
  border-radius:8px;
  overflow:hidden;
  border:1px solid rgba(212,175,55,.55);
  box-shadow:0 0 10px rgba(212,175,55,.35), 0 4px 14px rgba(0,0,0,.55);
  background:#0a0b0e;
}

.seasonal-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.seasonal-copy{
  flex:1 1 auto;
  min-width:0;
}

.seasonal-kicker{
  display:block;
  font-size:.68rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--sg-hi);
  margin-bottom:2px;
}

.seasonal-headline{
  margin:0;
  font-family:'Bodoni Moda',Georgia,serif;
  font-size:1.08rem;
  font-weight:600;
  letter-spacing:.01em;
  color:#f8f4e9;
}

.seasonal-line{
  margin:2px 0 0;
  font-size:.86rem;
  line-height:1.45;
  color:#cfc8b8;
}

.seasonal-cta{
  flex:0 0 auto;
  display:inline-block;
  padding:9px 20px;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#0a0a0a;
  background:linear-gradient(180deg,var(--sg-hi),var(--sg));
  border:1px solid rgba(232,200,110,.8);
  border-radius:999px;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:0 0 12px rgba(212,175,55,.45), 0 6px 18px rgba(0,0,0,.5);
  transition:transform .18s ease, box-shadow .18s ease;
}

.seasonal-cta:hover,
.seasonal-cta:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 0 20px rgba(212,175,55,.65), 0 10px 24px rgba(0,0,0,.55);
  outline:none;
}

/* Subtle per-season hooks: a faint seasonal tint over the hero, tasteful only. */
body.season-halloween .hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(90% 70% at 50% 100%, rgba(150,60,10,.14) 0%, rgba(60,20,90,.10) 55%, rgba(0,0,0,0) 80%);
}

body.season-thanksgiving .hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(90% 70% at 50% 100%, rgba(160,100,25,.12) 0%, rgba(0,0,0,0) 75%);
}

body.season-winter .hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(90% 70% at 50% 100%, rgba(120,160,220,.10) 0%, rgba(212,175,55,.06) 60%, rgba(0,0,0,0) 80%);
}

/* Mobile: single column, thumb beside copy, CTA full width. */
@media (max-width:620px){
  .seasonal-ribbon-inner{
    flex-wrap:wrap;
    gap:12px;
    padding:12px 16px;
  }
  .seasonal-thumb{
    width:52px;
    height:52px;
  }
  .seasonal-headline{
    font-size:1rem;
  }
  .seasonal-line{
    font-size:.82rem;
  }
  .seasonal-cta{
    flex:1 1 100%;
    text-align:center;
  }
}

@media (prefers-reduced-motion:reduce){
  .seasonal-cta{
    transition:none;
  }
}

/* ==========================================================================
 * FULL PRODUCTION ENGINE — Halloween + Winter/Christmas.
 * One shared engine, themed per season through CSS custom properties set on
 * body.season-<name>. Every rule below is scoped under a body.season-* class
 * or targets module-injected nodes (.xprod-*, .seasonal-particles), so the
 * rest of the year the site is untouched.
 * Art paths are relative to this stylesheet (assets/seasonal/). If an art
 * file is missing, the layered dark gradients still carry the design.
 * ========================================================================== */

/* ---- Per-season theme tokens ---- */
body.season-winter{
  --prod-hero:url('christmas-hero.jpg');
  --prod-banner:url('christmas-banner.jpg');
  --prod-section:url('christmas-section-bg.jpg');
  --prod-cta:url('christmas-cta.jpg');
  --prod-texture:url('christmas-texture.jpg');
  --prod-accent:#f0cd6d;            /* candlelight gold */
  --prod-accent-soft:rgba(232,195,108,.14);
  --prod-ember1:#d33a40;            /* deep red */
  --prod-ember2:#8c161b;
  --prod-stroke:rgba(60,8,10,.6);
  --prod-glow:rgba(215,70,70,.38);
  --prod-glow-soft:rgba(215,70,70,.18);
  --prod-scrim:rgba(20,6,8,.55);
  --prod-panel-tint:rgba(30,8,10,.78);
  --prod-rule:rgba(232,195,108,.5);
  --prod-rule-soft:rgba(232,195,108,.35);
}

body.season-halloween{
  --prod-hero:url('halloween-hero.jpg');
  --prod-banner:url('halloween-banner.jpg');
  --prod-section:url('halloween-section-bg.jpg');
  --prod-cta:url('halloween-cta.jpg');
  --prod-texture:url('halloween-texture.jpg');
  --prod-accent:#f0a94e;            /* amber */
  --prod-accent-soft:rgba(240,170,80,.14);
  --prod-ember1:#e07b2a;            /* ember orange */
  --prod-ember2:#7a2d0e;
  --prod-stroke:rgba(70,30,5,.6);
  --prod-glow:rgba(230,120,40,.38);
  --prod-glow-soft:rgba(230,120,40,.18);
  --prod-scrim:rgba(18,8,4,.55);
  --prod-panel-tint:rgba(28,12,4,.78);
  --prod-rule:rgba(240,170,80,.5);
  --prod-rule-soft:rgba(240,170,80,.35);
}

/* ---- Particle canvas (injected by seasonal.js; skipped under reduced motion) ---- */
.seasonal-particles{
  position:fixed;
  inset:0;
  z-index:90;
  pointer-events:none;
}

/* ---- Shared production type kit ---- */
.xprod-kicker{
  display:block;
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--prod-accent);
  text-shadow:0 0 14px var(--prod-glow),0 2px 8px #000;
}

.xprod-h{
  font-family:'Bodoni Moda',Georgia,serif;
  font-weight:600;
  letter-spacing:-.02em;
  line-height:.95;
  margin:.6rem 0 1rem;
  background:
    linear-gradient(105deg,transparent 42%,rgba(255,255,255,0) 45%,rgba(255,253,242,.85) 50%,rgba(255,255,255,0) 55%,transparent 58%),
    linear-gradient(180deg,#fff8ec 0%,var(--prod-accent) 24%,var(--prod-ember1) 46%,var(--prod-ember2) 58%,var(--prod-accent) 74%,#fff3cf 90%);
  background-size:260% 100%,100% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1px var(--prod-stroke);
  filter:drop-shadow(0 2px 0 rgba(15,5,3,.9)) drop-shadow(0 10px 24px rgba(0,0,0,.85)) drop-shadow(0 0 30px var(--prod-glow));
  animation:xprod-sheen 7s ease-in-out infinite;
}

.xprod-line{
  color:#e9e2d4;
  line-height:1.7;
  text-shadow:0 2px 10px #000;
}

.xprod-cta{
  display:inline-block;
  margin-top:1.4rem;
  padding:.95rem 2.4rem;
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  color:#2a0d0d;
  background:linear-gradient(180deg,#ffedb8 0%,#f0cd6d 28%,#d9a83f 48%,#a97a1e 68%,#c9962e 85%,#8a5f14 100%);
  border:1px solid rgba(120,70,10,.9);
  border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -3px 8px rgba(74,42,4,.5),0 8px 22px rgba(0,0,0,.6),0 0 34px var(--prod-glow);
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}

.xprod-cta:hover,
.xprod-cta:focus-visible{
  transform:translateY(-2px);
  filter:brightness(1.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -3px 8px rgba(74,42,4,.5),0 12px 30px rgba(0,0,0,.65),0 0 48px var(--prod-glow);
  outline:none;
}

/* ---- HERO takeover: seasonal art swap + ornate dimensional headline ---- */
body.season-winter .hero-visual::before,
body.season-halloween .hero-visual::before,
body.season-newyear .hero-visual::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(100deg,rgba(5,6,8,.94) 0%,var(--prod-scrim) 26%,rgba(10,4,5,.12) 48%,rgba(10,4,5,.30) 100%),
    radial-gradient(60% 55% at 78% 30%,var(--prod-glow) 0%,rgba(0,0,0,0) 70%),
    radial-gradient(50% 45% at 70% 82%,var(--prod-accent-soft) 0%,rgba(0,0,0,0) 70%),
    var(--prod-hero) center 38%/cover no-repeat,
    #0a0507;
}

body.season-winter .hero .overline,
body.season-halloween .hero .overline,
body.season-newyear .hero .overline{
  color:var(--prod-accent);
  text-shadow:0 0 18px var(--prod-glow);
}

/* Ornate dimensional headline: layered metal gradient echoing the site's own
 * h1 treatment, themed per season (deep red/gold for Christmas,
 * ember/amber for Halloween). Never flat. */
body.season-winter .hero h1,
body.season-halloween .hero h1,
body.season-newyear .hero h1{
  background:
    linear-gradient(105deg,transparent 42%,rgba(255,255,255,0) 45%,rgba(255,253,242,.9) 50%,rgba(255,255,255,0) 55%,transparent 58%),
    linear-gradient(180deg,#fff8ec 0%,var(--prod-accent) 24%,var(--prod-ember1) 46%,var(--prod-ember2) 58%,var(--prod-accent) 74%,#fff3cf 90%);
  background-size:260% 100%,100% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1px var(--prod-stroke);
  filter:drop-shadow(0 2px 0 rgba(15,5,3,.9)) drop-shadow(0 10px 24px rgba(0,0,0,.85)) drop-shadow(0 0 36px var(--prod-glow));
  animation:xprod-sheen 7s ease-in-out infinite,xprod-glow 5s ease-in-out infinite;
}

/* ---- Full-width production banner (injected below the hero proof strip) ---- */
.xprod-banner{
  position:relative;
  overflow:hidden;
  text-align:center;
  background:
    linear-gradient(180deg,rgba(5,6,8,.60) 0%,rgba(5,6,8,.28) 30%,rgba(5,6,8,.28) 70%,rgba(5,6,8,.78) 100%),
    radial-gradient(70% 90% at 50% 18%,var(--prod-glow) 0%,rgba(0,0,0,0) 65%),
    var(--prod-banner) center/cover no-repeat,
    #0a0507;
  border-top:1px solid var(--prod-rule);
  border-bottom:1px solid var(--prod-rule);
  box-shadow:0 0 60px var(--prod-glow-soft),inset 0 1px 0 rgba(255,220,150,.22);
}

.xprod-banner::before{
  /* film-grain texture wash over the art */
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:var(--prod-texture) center/420px repeat;
  opacity:.10;
  mix-blend-mode:overlay;
}

.xprod-banner-inner{
  position:relative;
  max-width:980px;
  margin:0 auto;
  padding:clamp(3.5rem,7vw,5.5rem) clamp(1.2rem,5vw,3rem);
}

.xprod-banner .xprod-h{
  font-size:clamp(2.6rem,6vw,5rem);
}

.xprod-banner .xprod-line{
  max-width:62ch;
  margin:0 auto;
  font-size:clamp(1rem,1.6vw,1.2rem);
}

/* ---- Section accent bands (injected above #packages and above #book) ---- */
.xprod-accent{
  position:relative;
  height:clamp(150px,22vw,280px);
  background:
    linear-gradient(180deg,#08090b 0%,rgba(8,9,11,0) 30%,rgba(8,9,11,0) 70%,#08090b 100%),
    var(--prod-section) center 60%/cover no-repeat,
    #0a0507;
  border-top:1px solid var(--prod-rule-soft);
  border-bottom:1px solid var(--prod-rule-soft);
}

/* ---- Dedicated seasonal booking CTA panel (injected before #book) ---- */
.xprod-panel{
  position:relative;
  overflow:hidden;
  text-align:center;
  background:
    linear-gradient(100deg,rgba(8,4,5,.94) 0%,var(--prod-panel-tint) 50%,rgba(8,4,5,.60) 100%),
    var(--prod-cta) center/cover no-repeat,
    #120607;
  border-top:1px solid var(--prod-rule);
  border-bottom:1px solid var(--prod-rule);
}

.xprod-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:var(--prod-texture) center/420px repeat;
  opacity:.12;
  mix-blend-mode:overlay;
}

.xprod-panel-inner{
  position:relative;
  max-width:860px;
  margin:0 auto;
  padding:clamp(4rem,8vw,6.5rem) clamp(1.2rem,5vw,3rem);
}

.xprod-panel .xprod-h{
  font-size:clamp(2.4rem,5.5vw,4.6rem);
}

.xprod-panel .xprod-line{
  max-width:58ch;
  margin:0 auto;
  font-size:clamp(1rem,1.6vw,1.18rem);
}

/* ---- Production keyframes (var() resolves per-season on the animated element) ---- */
@keyframes xprod-sheen{
  0%,55%{background-position:130% 0,0 0}
  90%,100%{background-position:-130% 0,0 0}
}

@keyframes xprod-glow{
  0%,100%{filter:drop-shadow(0 2px 0 rgba(15,5,3,.9)) drop-shadow(0 10px 24px rgba(0,0,0,.85)) drop-shadow(0 0 36px var(--prod-glow))}
  50%{filter:drop-shadow(0 2px 0 rgba(15,5,3,.9)) drop-shadow(0 10px 24px rgba(0,0,0,.85)) drop-shadow(0 0 56px var(--prod-glow))}
}

/* ---- Mobile ---- */
@media (max-width:620px){
  .xprod-banner-inner{
    padding:3rem 1.1rem;
  }
  .xprod-panel-inner{
    padding:3.2rem 1.1rem;
  }
  .xprod-accent{
    height:clamp(110px,30vw,180px);
  }
  .xprod-cta{
    width:100%;
    padding:1rem 1.5rem;
  }
  /* Smaller creatures on small screens so they stay accents, not clutter. */
  .critter .flip{
    scale:.72;
  }
}

/* ---- Reduced motion: no particles, no sheen/glow animation ---- */
@media (prefers-reduced-motion:reduce){
  .seasonal-particles{
    display:none;
  }
  .xprod-h,
  .xprod-cta,
  body.season-winter .hero h1,
  body.season-halloween .hero h1,
  body.season-newyear .hero h1{
    animation:none;
    transition:none;
  }
  .critter-stage{
    display:none;
  }
}

/* ==========================================================================
 * SCROLL CRITTERS — ambient seasonal creatures (added 2026-09-22, cast
 * expanded 2026-09-23: ghost/orb/turkey-poult/leaf-shape/elf-fit/penguin/
 * sled variants, bigger flights and ensembles).
 * Injected per-section by seasonal.js. The stage paints BEHIND section
 * content (z-index 0; JS lifts static children to z-index 1) and never
 * intercepts clicks. All motion is transform-only (GPU-friendly).
 * Calibration: Halloween/Thanksgiving = tasteful accents (small, sparse,
 * edge-confined); Christmas = full production (elf scamper + echoes +
 * sparkle trail). Elegant and festive, never gimmicky.
 * ========================================================================== */

/* Host sections become the positioning context (JS adds this only when the
 * section is statically positioned, so existing layouts are untouched). */
.critter-host{
  position:relative;
}

.critter-stage{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}

.critter{
  position:absolute;
  left:0;
  width:var(--w,90px);
  pointer-events:none;
  will-change:transform;
  animation:crit-travel var(--dur,7s) linear var(--delay,0s) both;
}

.critter.rtl{
  animation-name:crit-travel-r;
}

/* Mirrors the creature so it faces its travel direction. */
.critter .flip{
  transform:scaleX(1);
  transform-origin:center;
}

.critter.rtl .flip{
  transform:scaleX(-1);
}

.critter svg{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
}

/* ---- Halloween: bats (silhouette + amber rim glow) ---- */
.critter.bat svg{
  filter:drop-shadow(0 0 10px rgba(240,150,50,.55)) drop-shadow(0 4px 14px rgba(0,0,0,.6));
}

.critter.bat .bob{
  animation:bat-bob var(--bobd,1.15s) ease-in-out infinite;
}

.critter.bat .wing{
  transform-box:fill-box;
  animation:bat-flap var(--flap,.42s) ease-in-out infinite alternate;
}

.critter.bat .wing-l{
  transform-origin:100% 55%;
}

.critter.bat .wing-r{
  transform-origin:0% 55%;
  animation-name:bat-flap-r;
}

/* ---- Halloween: ghost (luminous drifting wisp, faceless = classier) ---- */
.critter.ghost{
  opacity:.55;
}

.critter.ghost.faint{
  opacity:.32;
}

.critter.ghost svg{
  filter:blur(2px) drop-shadow(0 0 18px rgba(255,190,120,.35));
  animation:ghost-drift 3.2s ease-in-out infinite;
}

/* Swooping ghost variant overrides the gentle drift. */
.critter.ghost.swoop svg{
  animation:ghost-swoop 2.8s ease-in-out infinite;
}

/* ---- Halloween: witch (fast silhouetted streak across the upper sky) ---- */
.critter.witch svg{
  filter:drop-shadow(0 0 14px rgba(160,100,235,.5)) drop-shadow(0 6px 16px rgba(0,0,0,.6));
}

.critter.witch .streak{
  animation:witch-bob 1.6s ease-in-out infinite;
}

/* ---- Halloween: spider (drops on a silk thread, drifting sideways) ---- */
.critter.spider svg{
  filter:drop-shadow(0 0 8px rgba(190,120,200,.5)) drop-shadow(0 4px 10px rgba(0,0,0,.6));
}

.critter.spider .hang{
  animation:spider-drop var(--dropd,7s) ease-in-out infinite;
}

.critter.spider .thread{
  width:2px;
  height:110px;
  margin:0 auto 2px;
  background:linear-gradient(180deg,rgba(210,210,210,0),rgba(210,210,210,.55));
}

/* ---- Halloween: mummy (slow shambling lumber along the lower edge) ---- */
.critter.mummy svg{
  filter:drop-shadow(0 0 10px rgba(200,170,100,.4)) drop-shadow(0 6px 14px rgba(0,0,0,.65));
}

.critter.mummy .shamble{
  transform-origin:50% 92%;
  animation:mummy-shamble 1.8s ease-in-out infinite;
}

.critter.mummy .limb{
  transform-box:fill-box;
  animation:mummy-sway var(--mumd,2.2s) ease-in-out infinite alternate;
}

.critter.mummy .arm-a{
  transform-origin:20% 12%;
}

.critter.mummy .arm-b{
  transform-origin:80% 12%;
  animation-delay:calc(var(--mumd,2.2s) / -2);
}

.critter.mummy .leg{
  animation:leg-step var(--mumd,2.2s) steps(1,end) infinite;
}

.critter.mummy .leg-b{
  animation-delay:calc(var(--mumd,2.2s) / -2);
}

/* ---- Halloween: vampire (caped swoop on bat-like flapping cape wings) ---- */
.critter.vampire svg{
  filter:drop-shadow(0 0 14px rgba(190,40,60,.5)) drop-shadow(0 6px 16px rgba(0,0,0,.65));
}

.critter.vampire .wing{
  transform-box:fill-box;
  animation:bat-flap var(--flap,.5s) ease-in-out infinite alternate;
}

.critter.vampire .wing-l{
  transform-origin:100% 30%;
}

.critter.vampire .wing-r{
  transform-origin:0% 30%;
  animation-name:bat-flap-r;
}

.critter.vampire .swoop{
  animation:ghost-swoop 3s ease-in-out infinite;
}

/* ---- Thanksgiving: turkey (warm harvest silhouette, strutting) ---- */
.critter.turkey svg{
  filter:drop-shadow(0 0 12px rgba(240,180,80,.5)) drop-shadow(0 6px 16px rgba(0,0,0,.6));
}

.critter.turkey .strut{
  transform-origin:50% 90%;
  animation:turkey-strut var(--strutd,.55s) ease-in-out infinite alternate;
}

.critter.turkey .leg{
  animation:leg-step var(--strutd,.55s) steps(1,end) infinite;
}

.critter.turkey .leg-b{
  animation-delay:calc(var(--strutd,.55s) / -2);
}

/* ---- Thanksgiving: tumbling autumn leaves ---- */
.critter.leaf svg{
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55));
}

.critter.leaf .flutter{
  transform-origin:center;
  animation:leaf-flutter var(--flut,2.4s) ease-in-out infinite;
}

/* ---- Christmas: elves (full production — scamper with motion echoes) ---- */
.critter.elf svg{
  filter:drop-shadow(0 0 10px rgba(215,70,70,.55)) drop-shadow(0 0 22px rgba(240,205,109,.3)) drop-shadow(0 6px 16px rgba(0,0,0,.6));
}

.critter.elf .run{
  transform-origin:50% 90%;
  animation:elf-run var(--rund,.48s) ease-in-out infinite alternate;
}

.critter.elf .limb{
  transform-box:fill-box;
  animation:limb-swing var(--limbd,.48s) ease-in-out infinite alternate;
}

.critter.elf .leg-a,
.critter.elf .arm-b{
  transform-origin:50% 0%;
}

.critter.elf .leg-b,
.critter.elf .arm-a{
  transform-origin:50% 0%;
  animation-delay:calc(var(--limbd,.48s) / -2);
}

/* Tumbling elf variant: rolls end over end while crossing. */
.critter.elf .tumble{
  transform-origin:center;
  animation:elf-tumble var(--tumbled,1.3s) linear infinite;
}

/* ---- Christmas: leaping reindeer ---- */
.critter.reindeer svg{
  filter:drop-shadow(0 0 12px rgba(240,180,80,.5)) drop-shadow(0 8px 18px rgba(0,0,0,.6));
}

.critter.reindeer .leap{
  transform-origin:50% 85%;
  animation:reindeer-leap var(--leapd,1.1s) ease-in-out infinite;
}

.critter.reindeer .limb{
  transform-box:fill-box;
  animation:limb-swing var(--limbd,.5s) ease-in-out infinite alternate;
}

.critter.reindeer .leg-a{
  transform-origin:50% 0%;
}

.critter.reindeer .leg-b{
  transform-origin:50% 0%;
  animation-delay:calc(var(--limbd,.5s) / -2);
}

/* ---- Christmas: wobbling snowman ---- */
.critter.snowman svg{
  filter:drop-shadow(0 0 14px rgba(180,200,235,.55)) drop-shadow(0 8px 18px rgba(0,0,0,.6));
}

.critter.snowman .wobble{
  transform-origin:50% 92%;
  animation:snowman-wobble 1.7s ease-in-out infinite;
}

.critter.snowman .limb{
  transform-box:fill-box;
  animation:limb-swing 1.7s ease-in-out infinite alternate;
}

.critter.snowman .arm-b{
  transform-origin:100% 100%;
}

.critter.snowman .arm-a{
  transform-origin:0% 100%;
  animation-delay:-.85s;
}

/* ---- Christmas: fast snow-gust bands for extra snowfall depth ---- */
.critter.snowgust{
  opacity:.85;
}

.critter.snowgust .gust{
  animation:gust-drift var(--gustd,3.2s) ease-in-out infinite;
}

/* Motion-blur echo: a faint trailing copy behind each elf. */
.critter .echo{
  position:absolute;
  inset:0;
  opacity:.22;
  filter:blur(1px);
  transform:translateX(-14px);
}

.critter.rtl .echo{
  transform:translateX(14px);
}

/* Sparkle trail on the lead elf. */
.critter .spark{
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:radial-gradient(circle,#fff8e0 0%,rgba(240,205,109,.85) 45%,rgba(240,205,109,0) 75%);
  box-shadow:0 0 12px rgba(240,205,109,.9);
  animation:spark-twinkle 1.1s ease-in-out infinite;
  pointer-events:none;
}

/* ---- Critter keyframes (transform/opacity only) ---- */
@keyframes crit-travel{
  from{transform:translate3d(-30vw,0,0)}
  to{transform:translate3d(115vw,0,0)}
}

@keyframes crit-travel-r{
  from{transform:translate3d(115vw,0,0)}
  to{transform:translate3d(-30vw,0,0)}
}

@keyframes bat-bob{
  0%,100%{transform:translateY(-7px)}
  50%{transform:translateY(7px)}
}

@keyframes bat-flap{
  from{transform:rotate(-26deg)}
  to{transform:rotate(30deg)}
}

@keyframes bat-flap-r{
  from{transform:rotate(26deg)}
  to{transform:rotate(-30deg)}
}

@keyframes ghost-drift{
  0%,100%{transform:translateY(-10px);opacity:.75}
  50%{transform:translateY(10px);opacity:1}
}

@keyframes turkey-strut{
  from{transform:rotate(-3.5deg) translateY(0)}
  to{transform:rotate(3.5deg) translateY(-6px)}
}

@keyframes leg-step{
  0%,49%{opacity:1}
  50%,100%{opacity:.25}
}

@keyframes elf-run{
  from{transform:translateY(0) rotate(-2deg)}
  to{transform:translateY(-5px) rotate(2deg)}
}

@keyframes limb-swing{
  from{transform:rotate(-28deg)}
  to{transform:rotate(28deg)}
}

@keyframes spark-twinkle{
  0%,100%{opacity:.15;transform:scale(.6)}
  50%{opacity:1;transform:scale(1.25)}
}

@keyframes leaf-flutter{
  0%,100%{transform:translateY(-9px) rotate(-24deg)}
  50%{transform:translateY(11px) rotate(26deg)}
}

@keyframes spider-drop{
  0%,100%{transform:translateY(-34px)}
  50%{transform:translateY(52px)}
}

@keyframes ghost-swoop{
  0%,100%{transform:translateY(-26px)}
  50%{transform:translateY(26px)}
}

@keyframes witch-bob{
  0%,100%{transform:translateY(-6px)}
  50%{transform:translateY(6px)}
}

@keyframes mummy-shamble{
  0%,100%{transform:rotate(-2.5deg) translateY(0)}
  50%{transform:rotate(2.5deg) translateY(-5px)}
}

@keyframes mummy-sway{
  from{transform:rotate(-14deg)}
  to{transform:rotate(14deg)}
}

@keyframes reindeer-leap{
  0%,100%{transform:translateY(8px) rotate(-2deg)}
  50%{transform:translateY(-28px) rotate(2deg)}
}

@keyframes snowman-wobble{
  0%,100%{transform:rotate(-5deg)}
  50%{transform:rotate(5deg)}
}

@keyframes gust-drift{
  0%,100%{transform:translateY(-8px)}
  50%{transform:translateY(10px)}
}

@keyframes elf-tumble{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

/* ---- Halloween: phantom orbs (faint will-o'-wisps) ---- */
.critter.orb{
  opacity:.5;
}

.critter.orb .drift{
  animation:orb-drift 5.5s ease-in-out infinite;
}

/* ---- Thanksgiving: wind-blown leaf band ---- */
.critter.leafgust{
  opacity:.9;
}

.critter.leafgust svg{
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
}

/* ---- Christmas: sled-riding elf ---- */
.critter.sled svg{
  filter:drop-shadow(0 0 10px rgba(215,70,70,.5)) drop-shadow(0 6px 16px rgba(0,0,0,.6));
}

.critter.sled .sledrun{
  animation:sled-bounce .9s ease-in-out infinite;
}

/* ---- Christmas: waddling penguin ---- */
.critter.penguin svg{
  filter:drop-shadow(0 0 10px rgba(150,180,220,.5)) drop-shadow(0 6px 14px rgba(0,0,0,.6));
}

.critter.penguin .waddle{
  transform-origin:50% 88%;
  animation:penguin-waddle var(--wad,.6s) ease-in-out infinite;
}

.critter.penguin .limb{
  transform-box:fill-box;
  animation:limb-swing var(--wad,.6s) ease-in-out infinite alternate;
}

.critter.penguin .flip-a{
  transform-origin:50% 0%;
}

.critter.penguin .flip-b{
  transform-origin:50% 0%;
  animation-delay:calc(var(--wad,.6s) / -2);
}

/* ---- New critter keyframes (transform/opacity only) ---- */
@keyframes orb-drift{
  0%,100%{transform:translateX(-26px) translateY(8px);opacity:.45}
  50%{transform:translateX(26px) translateY(-12px);opacity:.85}
}

@keyframes sled-bounce{
  0%,100%{transform:translateY(0) rotate(-1deg)}
  50%{transform:translateY(-7px) rotate(1deg)}
}

@keyframes penguin-waddle{
  0%,100%{transform:rotate(-7deg) translateY(0)}
  50%{transform:rotate(7deg) translateY(-4px)}
}

/* ==========================================================================
 * NEW YEAR (Jan 1-7) — New Year's celebration + DJ Proud birthday week.
 * Champagne gold on midnight blue-black: Times Square-style ball drop in
 * the hero (behind copy, above art), confetti + firework bursts on the
 * particle canvas, and celebration scroll critters — rising balloons,
 * popping champagne corks, twinkling starbursts. All motion is
 * transform/opacity-only; stages stay behind content with
 * pointer-events:none; nothing renders Jan 8 onward (see seasonFor).
 * ========================================================================== */

/* ---- Per-season theme tokens ---- */
body.season-newyear{
  --prod-hero:url('newyear-hero.jpg');
  --prod-banner:url('newyear-banner.jpg');
  --prod-section:url('newyear-section-bg.jpg');
  --prod-cta:url('newyear-cta.jpg');
  --prod-texture:url('newyear-texture.jpg');
  --prod-accent:#f5d67b;            /* champagne gold */
  --prod-accent-soft:rgba(245,214,123,.14);
  --prod-ember1:#c9962e;            /* deep gold */
  --prod-ember2:#7a4d12;
  --prod-stroke:rgba(40,20,2,.6);
  --prod-glow:rgba(255,205,90,.38);
  --prod-glow-soft:rgba(255,205,90,.18);
  --prod-scrim:rgba(6,8,18,.55);
  --prod-panel-tint:rgba(10,12,26,.78);
  --prod-rule:rgba(245,214,123,.5);
  --prod-rule-soft:rgba(245,214,123,.35);
}

/* Faint gold celebration tint over the hero. */
body.season-newyear .hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(90% 70% at 50% 100%,rgba(255,205,100,.12) 0%,rgba(40,30,80,.10) 55%,rgba(0,0,0,0) 80%);
}

/* ---- Times Square ball drop (hero only; injected by seasonal.js) ----
 * z-index 3: above the seasonal art overlay (z 2), below the hero copy
 * (z 4). The ball descends on its cable, then a gold "midnight" flash
 * blooms where it lands and the cycle restarts. Transform-only. */
.ny-balldrop{
  position:absolute;
  inset:0;
  z-index:3;
  overflow:hidden;
  pointer-events:none;
}

.ny-balldrop .ny-ball{
  position:absolute;
  left:72%;
  top:0;
  width:clamp(54px,6.5vw,92px);
  aspect-ratio:1;
  margin-left:calc(clamp(54px,6.5vw,92px)/-2);
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 26%,rgba(255,255,255,.95) 0%,rgba(255,246,220,.5) 16%,rgba(0,0,0,0) 44%),
    radial-gradient(circle at 50% 55%,#ffedb0 0%,#f5c445 36%,#a86e14 70%,#3f2506 100%);
  box-shadow:
    0 0 22px rgba(255,214,120,.9),
    0 0 64px rgba(255,190,80,.5),
    inset 0 0 16px rgba(255,255,255,.35),
    inset 0 -8px 18px rgba(90,50,5,.55);
  animation:ny-drop 9s cubic-bezier(.45,.03,.55,1) infinite;
  will-change:transform;
}

.ny-balldrop .ny-ball::before{
  /* twinkling crystal glints */
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(circle,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 60%) 20% 30%/14% 14% no-repeat,
    radial-gradient(circle,rgba(255,255,255,.8) 0%,rgba(255,255,255,0) 60%) 72% 62%/10% 10% no-repeat,
    radial-gradient(circle,rgba(255,240,200,.7) 0%,rgba(255,240,200,0) 60%) 55% 18%/18% 18% no-repeat;
  animation:ny-twinkle 1.4s ease-in-out infinite;
}

.ny-balldrop .ny-ball::after{
  /* drop cable trailing up off the ball */
  content:"";
  position:absolute;
  left:50%;
  bottom:100%;
  width:2px;
  height:34vh;
  margin-left:-1px;
  background:linear-gradient(180deg,rgba(255,220,140,0),rgba(255,220,140,.6));
}

.ny-balldrop .ny-flash{
  position:absolute;
  left:72%;
  top:56vh;
  width:min(46vw,340px);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,244,210,.95) 0%,rgba(255,205,100,.55) 34%,rgba(255,190,80,0) 68%);
  opacity:0;
  transform:translate(-50%,-50%) scale(.3);
  animation:ny-flash 9s ease-out infinite;
  will-change:transform,opacity;
}

@keyframes ny-drop{
  0%{transform:translate3d(0,-16vh,0);opacity:0}
  7%{opacity:1}
  68%{transform:translate3d(0,56vh,0);opacity:1}
  80%{transform:translate3d(0,56vh,0);opacity:1}
  92%{transform:translate3d(0,56vh,0);opacity:0}
  100%{transform:translate3d(0,-16vh,0);opacity:0}
}

@keyframes ny-twinkle{
  0%,100%{opacity:.55;transform:scale(.85) rotate(0deg)}
  50%{opacity:1;transform:scale(1.1) rotate(24deg)}
}

@keyframes ny-flash{
  0%,64%{opacity:0;transform:translate(-50%,-50%) scale(.3)}
  71%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  84%{opacity:0;transform:translate(-50%,-50%) scale(1.7)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.7)}
}

/* ---- New Year scroll critters: balloons, champagne corks, starbursts ---- */
.critter.ny-balloon{
  animation-name:ny-balloon-rise;
}

.critter.ny-balloon svg{
  filter:drop-shadow(0 0 12px rgba(255,205,110,.5)) drop-shadow(0 6px 16px rgba(0,0,0,.55));
}

.critter.ny-balloon .rise{
  animation:ny-sway 2.6s ease-in-out infinite;
}

.critter.ny-cork{
  animation-name:ny-cork-travel;
}

.critter.ny-cork.rtl{
  animation-name:ny-cork-travel-r;
}

.critter.ny-cork svg{
  filter:drop-shadow(0 0 10px rgba(255,220,150,.55)) drop-shadow(0 4px 12px rgba(0,0,0,.5));
}

.critter.ny-star svg{
  filter:drop-shadow(0 0 14px rgba(255,215,130,.75));
}

.critter.ny-star.faint{
  opacity:.6;
}

.critter.ny-star .twinkle{
  transform-box:fill-box;
  transform-origin:center;
  animation:ny-star-twinkle 1.7s ease-in-out infinite;
}

@keyframes ny-balloon-rise{
  from{transform:translate3d(var(--bx,20vw),26vh,0) rotate(-5deg)}
  50%{transform:translate3d(calc(var(--bx,20vw) + 3vw),-24vh,0) rotate(4deg)}
  to{transform:translate3d(var(--bx,20vw),-72vh,0) rotate(-4deg)}
}

@keyframes ny-sway{
  0%,100%{transform:translateX(-7px) rotate(-4deg)}
  50%{transform:translateX(7px) rotate(4deg)}
}

@keyframes ny-cork-travel{
  from{transform:translate3d(-14vw,12vh,0) rotate(-32deg)}
  to{transform:translate3d(114vw,-34vh,0) rotate(28deg)}
}

@keyframes ny-cork-travel-r{
  from{transform:translate3d(114vw,12vh,0) rotate(32deg)}
  to{transform:translate3d(-14vw,-34vh,0) rotate(-28deg)}
}

@keyframes ny-star-twinkle{
  0%,100%{transform:scale(.65) rotate(0deg);opacity:.5}
  50%{transform:scale(1.18) rotate(40deg);opacity:1}
}

/* ---- Reduced motion: no ball drop, no critter stages ---- */
@media (prefers-reduced-motion:reduce){
  .ny-balldrop{
    display:none;
  }
}