/* 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:700;letter-spacing:.01em;/* dimensional champagne metal (no-JS fallback; the letterforms script
     upgrades this to the animated soft-metal grade when JS runs) */
color:#edc66d;-webkit-text-fill-color:#edc66d;-webkit-text-stroke:.5px rgba(74,48,12,.55);text-shadow:0 -1px 1px rgba(255,251,235,.55), 0 1px 0 rgba(0,0,0,.75), 0 0 14px rgba(240,214,150,.28);filter:none;}

.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(240,205,110,.16);
  --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);
}

body.season-thanksgiving{
  --prod-hero:url('thanksgiving-hero.jpg');
  --prod-banner:url('thanksgiving-banner.jpg');
  --prod-section:url('thanksgiving-section-bg.jpg');
  --prod-cta:url('thanksgiving-cta.jpg');
  --prod-texture:url('thanksgiving-texture.jpg');
  --prod-accent:#f2b25c;            /* candlelight amber */
  --prod-accent-soft:rgba(242,178,92,.14);
  --prod-ember1:#c96a2c;            /* copper */
  --prod-ember2:#6e3410;            /* deep brown */
  --prod-stroke:rgba(80,38,6,.6);
  --prod-glow:rgba(255,150,52,.38);
  --prod-glow-soft:rgba(255,170,80,.17);
  --prod-scrim:rgba(24,11,2,.55);
  --prod-panel-tint:rgba(38,19,4,.78);
  --prod-rule:rgba(242,178,92,.5);
  --prod-rule-soft:rgba(242,178,92,.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;color:var(--prod-accent);-webkit-text-fill-color:var(--prod-accent);-webkit-text-stroke:1px var(--prod-stroke);text-shadow:0 -1px 1px rgba(255,251,235,.55), 0 1px 0 rgba(74,48,12,.55), 0 2px 0 rgba(15,5,3,.9), 0 10px 24px rgba(0,0,0,.85), 0 0 30px var(--prod-glow);filter:none;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%,#b08227 68%,#c9962e 85%,#a87c26 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-thanksgiving .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-thanksgiving .hero .overline,
body.season-newyear .hero .overline{
  color:var(--prod-accent);
  text-shadow:0 0 18px var(--prod-glow);
}

/* Ornate dimensional headline: BRIGHT CHAMPAGNE metal per Barry's standing
 * law — filled letters, luminous champagne-gold gradient (bright highlights,
 * zero muddy dark-brown stops), slow sheen sweep.
 * ENGINEERING (2026-09-24): filter:drop-shadow() on large background-clip:text
 * type tessellates the glyph mask in Chromium (the "wireframe" artifact), so
 * depth and glow come from the 1px bronze edge — which this Chromium also
 * requires for the fill to composite — plus a warm radial wash on
 * .hero-lockup::before. Never a filter on the type itself. */
body.season-winter .hero h1:not(.craft):not(.hero-lockup),
body.season-halloween .hero h1:not(.craft):not(.hero-lockup),
body.season-thanksgiving .hero h1:not(.craft):not(.hero-lockup),
body.season-newyear .hero h1:not(.craft):not(.hero-lockup){color:#edc66d;-webkit-text-fill-color:#edc66d;-webkit-text-stroke:1px rgba(70,44,8,.55);filter:none;animation:xprod-sheen 8s ease-in-out infinite;text-shadow:0 -1px 1px rgba(255,251,235,.55), 0 1px 0 rgba(74,48,12,.55), 0 2px 0 rgba(18,10,1,.92), 0 14px 30px rgba(0,0,0,.72), 0 0 38px rgba(240,214,150,.30);}

/* Warm outer glow for the seasonal headline — a light wash behind the
 * lockup, never a filter on the type (see note above). */
body.season-winter .hero-lockup::before,
body.season-halloween .hero-lockup::before,
body.season-thanksgiving .hero-lockup::before,
body.season-newyear .hero-lockup::before{
  content:"";
  position:absolute;
  inset:-10% -12%;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(52% 44% at 50% 36%,var(--prod-glow-soft) 0%,rgba(0,0,0,0) 70%);
}

/* ---- 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;
  overflow:hidden;
  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))}
}

/* ==========================================================================
 * HALLOWEEN CINEMATIC ATMOSPHERE (replaces the retired cartoon critter
 * cast, 2026-09-24). Injected by renderHalloweenAtmos() as a fixed
 * full-viewport film grade: giant full moon, five layers of drifting fog,
 * out-of-focus bare-branch foreground silhouettes, candle-flicker glows,
 * animated film grain, and a deep vignette. Sits at z-index 89 — just
 * under the ember particle canvas (z 90) so embers float IN FRONT of the
 * fog for real depth. pointer-events:none, aria-hidden.
 * Halloween enters through ATMOSPHERE (fog, candlelight, pumpkins, full
 * moon) — never cartoon creatures, never a "Halloween bash" title.
 * ========================================================================== */
.halloween-atmos{
  position:fixed;
  inset:0;
  z-index:89;
  pointer-events:none;
  overflow:hidden;
}

/* Cinematic full moon, restrained: a ~35%-smaller disc whose center sits
 * up and right of the nav zone — the bright core stays off-viewport while
 * the cratered lower-left limb kisses the top-right corner of the scene.
 * Moonlight, never a nuke: the halo is capped so nav text (CHECK YOUR
 * DATE / DM) stays fully legible. (2026-09-24: was 46vmax blown out over
 * the nav buttons.) */
.hw-moon{
  position:absolute;
  top:-18vmax;
  right:-20vmax;
  width:30vmax;
  height:30vmax;
  background:
    radial-gradient(7% 7% at 10% 58%,rgba(140,154,186,.55) 0%,rgba(0,0,0,0) 70%),
    radial-gradient(5% 5% at 18% 68%,rgba(132,146,180,.48) 0%,rgba(0,0,0,0) 70%),
    radial-gradient(4.5% 4.5% at 6% 45%,rgba(142,156,188,.42) 0%,rgba(0,0,0,0) 70%),
    radial-gradient(6% 6% at 22% 52%,rgba(132,146,180,.46) 0%,rgba(0,0,0,0) 70%),
    radial-gradient(4% 4% at 14% 74%,rgba(140,154,186,.38) 0%,rgba(0,0,0,0) 70%),
    radial-gradient(circle at 50% 50%,rgba(236,241,250,.94) 0%,rgba(226,234,248,.88) 30%,rgba(202,213,236,.55) 41%,rgba(160,180,216,.16) 50%,rgba(0,0,0,0) 60%),
    radial-gradient(52% 52% at 50% 50%,rgba(180,196,228,.16) 0%,rgba(0,0,0,0) 68%);
}

.hw-fog{
  position:absolute;
  width:175vmax;
  height:46vmax;
  filter:blur(46px);
  will-change:transform;
}

/* Upper fog bank: cool moonlit blue-grey, slow drift. */
.hw-fog-a{
  top:4%;
  left:-35vmax;
  opacity:.55;
  background:
    radial-gradient(28% 62% at 22% 46%,rgba(170,180,202,.17) 0%,rgba(0,0,0,0) 70%),
    radial-gradient(34% 68% at 58% 40%,rgba(152,162,192,.14) 0%,rgba(0,0,0,0) 70%),
    radial-gradient(26% 60% at 84% 52%,rgba(170,180,202,.13) 0%,rgba(0,0,0,0) 70%);
  animation:hw-fog-a 76s ease-in-out infinite alternate;
}

/* Mid fog band: thinner, faster — parallax against the upper bank. */
.hw-fog-b{
  top:38%;
  left:-45vmax;
  opacity:.42;
  background:
    radial-gradient(30% 64% at 30% 50%,rgba(160,168,190,.15) 0%,rgba(0,0,0,0) 70%),
    radial-gradient(24% 56% at 68% 44%,rgba(172,180,200,.12) 0%,rgba(0,0,0,0) 70%);
  animation:hw-fog-b 52s ease-in-out infinite alternate;
}

/* Ground fog: faint warm candlelight bounce along the bottom edge. */
.hw-fog-c{
  bottom:-14%;
  left:-30vmax;
  opacity:.5;
  background:
    radial-gradient(32% 66% at 26% 60%,rgba(196,150,104,.13) 0%,rgba(0,0,0,0) 70%),
    radial-gradient(28% 60% at 62% 55%,rgba(170,150,170,.11) 0%,rgba(0,0,0,0) 70%),
    radial-gradient(24% 58% at 88% 62%,rgba(196,150,104,.10) 0%,rgba(0,0,0,0) 70%);
  animation:hw-fog-c 64s ease-in-out infinite alternate;
}

/* Low creeping fog: the densest bank, hugging the bottom of frame. */
.hw-fog-d{
  bottom:-20%;
  left:-25vmax;
  opacity:.62;
  background:
    radial-gradient(36% 70% at 24% 62%,rgba(120,110,128,.20) 0%,rgba(0,0,0,0) 70%),
    radial-gradient(30% 64% at 56% 58%,rgba(140,120,100,.16) 0%,rgba(0,0,0,0) 70%),
    radial-gradient(28% 60% at 82% 64%,rgba(120,110,128,.18) 0%,rgba(0,0,0,0) 70%);
  animation:hw-fog-d 88s ease-in-out infinite alternate;
}

/* High moonlit veil: thin cold wash across the top of frame. */
.hw-fog-e{
  top:-10%;
  left:-40vmax;
  opacity:.34;
  background:
    radial-gradient(38% 60% at 30% 50%,rgba(170,185,215,.13) 0%,rgba(0,0,0,0) 70%),
    radial-gradient(30% 55% at 70% 45%,rgba(160,175,210,.11) 0%,rgba(0,0,0,0) 70%);
  animation:hw-fog-e 96s ease-in-out infinite alternate;
}

@keyframes hw-fog-a{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(16vmax,-2vmax,0)}
}

@keyframes hw-fog-b{
  from{transform:translate3d(10vmax,1vmax,0)}
  to{transform:translate3d(-9vmax,-1vmax,0)}
}

@keyframes hw-fog-c{
  from{transform:translate3d(-6vmax,0,0)}
  to{transform:translate3d(13vmax,2vmax,0)}
}

@keyframes hw-fog-d{
  from{transform:translate3d(8vmax,0,0)}
  to{transform:translate3d(-11vmax,1vmax,0)}
}

@keyframes hw-fog-e{
  from{transform:translate3d(-4vmax,1vmax,0)}
  to{transform:translate3d(12vmax,-1vmax,0)}
}

/* Out-of-focus bare-branch foreground silhouettes: fractal branches,
 * near-black, heavily blurred — foreground occlusion in front of the
 * lens, not clip-art. Top-left cascades down, bottom-right rises up. */
.hw-branches{
  position:absolute;
  filter:blur(7px);
  opacity:.88;
}

.hw-branches svg{
  display:block;
  width:100%;
  height:100%;
}

.hw-branches-tl{
  top:-6vmax;
  left:-8vmax;
  width:44vmax;
  height:44vmax;
}

.hw-branches-br{
  bottom:-10vmax;
  right:-9vmax;
  width:48vmax;
  height:48vmax;
  transform:scaleX(-1) rotate(8deg);
}

/* Candle-flicker glows: warm breathing light low in frame, as if just
 * out of shot. Two sources, different rhythms, never in sync. */
.hw-candle{
  position:absolute;
  bottom:-12%;
  width:46vmax;
  height:36vmax;
  filter:blur(34px);
  will-change:opacity,transform;
}

.hw-candle-l{
  left:-10vmax;
  background:radial-gradient(closest-side,rgba(255,150,52,.22) 0%,rgba(255,118,30,.08) 52%,rgba(0,0,0,0) 76%);
  animation:hw-flick-l 3.7s ease-in-out infinite;
}

.hw-candle-r{
  right:-12vmax;
  background:radial-gradient(closest-side,rgba(255,166,66,.18) 0%,rgba(230,120,40,.07) 52%,rgba(0,0,0,0) 76%);
  animation:hw-flick-r 4.6s ease-in-out infinite;
}

@keyframes hw-flick-l{
  0%,100%{opacity:.72;transform:translate3d(0,0,0) scale(1)}
  28%{opacity:.95;transform:translate3d(.6vmax,-.4vmax,0) scale(1.03)}
  55%{opacity:.8;transform:translate3d(-.4vmax,.3vmax,0) scale(.99)}
  79%{opacity:1;transform:translate3d(.3vmax,-.2vmax,0) scale(1.02)}
}

@keyframes hw-flick-r{
  0%,100%{opacity:.85;transform:translate3d(0,0,0) scale(1)}
  33%{opacity:.66;transform:translate3d(-.5vmax,.4vmax,0) scale(.98)}
  61%{opacity:.97;transform:translate3d(.4vmax,-.3vmax,0) scale(1.03)}
  84%{opacity:.74;transform:translate3d(-.2vmax,-.4vmax,0) scale(1)}
}

/* Animated film grain over the seasonal art — the texture wash, alive. */
.hw-grain{
  position:absolute;
  inset:-4%;
  background:var(--prod-texture) center/420px repeat;
  opacity:.08;
  mix-blend-mode:overlay;
  animation:hw-grain 1.2s steps(6) infinite;
}

@keyframes hw-grain{
  0%{transform:translate(0,0)}
  20%{transform:translate(-2%,1%)}
  40%{transform:translate(1%,-2%)}
  60%{transform:translate(-1%,2%)}
  80%{transform:translate(2%,1%)}
  100%{transform:translate(0,0)}
}

/* Deep cinematic vignette — holds the edges of every section. */
.hw-vignette{
  position:absolute;
  inset:0;
  background:
    radial-gradient(118% 118% at 50% 46%,rgba(0,0,0,0) 52%,rgba(2,1,2,.44) 100%),
    linear-gradient(180deg,rgba(2,1,2,.28) 0%,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 84%,rgba(2,1,2,.34) 100%);
}

/* ==========================================================================
 * HALLOWEEN "MORE" PASS (2026-10-14 — Barry: "we needed more"): the four
 * committed additions. (1) countdown + booking CTA band, (2) denser
 * mid-page atmosphere (scroll-ramped fog banks f/g + fog wash on the
 * accent bands), (3) haunted architectural silhouettes on the hero's
 * horizon line, (4) heavier ground mist + drifting dead leaves.
 * Everything below is scoped to body.season-halloween or to nodes the
 * Halloween path injects, so the rest of the year is untouched.
 * ========================================================================== */

/* ---- (3) Horizon skyline: haunted architecture inside the hero ---- */
.hw-skyline{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:clamp(96px,17vh,185px);
  z-index:2;
  pointer-events:none;
  overflow:hidden;
}

.hw-skyline svg{
  display:block;
  width:100%;
  height:100%;
  filter:blur(.6px);
  opacity:.96;
}

/* The silhouette melts into the hero's own bottom fade — no hard seam. */
.hw-skyline::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(5,6,8,0) 62%,rgba(5,6,8,.45) 90%,#050608 100%);
}

/* Two candlelit windows breathe out of sync with everything else. */
.hw-skyline .hw-win{
  animation:hw-win-flick 4.3s ease-in-out infinite;
}

.hw-skyline .hw-win-b{
  animation-duration:5.7s;
  animation-delay:1.4s;
}

@keyframes hw-win-flick{
  0%,100%{opacity:.85}
  38%{opacity:.45}
  55%{opacity:.9}
  76%{opacity:.6}
}

/* ---- (2) Mid-page fog banks: invisible over the hero, ramped in by the
 * scroll handler in renderHalloweenAtmos as the visitor moves below it. */
.hw-fog-f{
  top:46%;
  left:-40vmax;
  opacity:0;
  background:
    radial-gradient(30% 62% at 26% 50%,rgba(158,150,168,.16) 0%,rgba(0,0,0,0) 70%),
    radial-gradient(26% 58% at 58% 44%,rgba(186,150,110,.12) 0%,rgba(0,0,0,0) 70%),
    radial-gradient(24% 56% at 84% 54%,rgba(150,142,170,.13) 0%,rgba(0,0,0,0) 70%);
  animation:hw-fog-f 68s ease-in-out infinite alternate;
}

.hw-fog-g{
  bottom:-16%;
  left:-32vmax;
  opacity:0;
  background:
    radial-gradient(34% 68% at 30% 58%,rgba(128,118,134,.19) 0%,rgba(0,0,0,0) 70%),
    radial-gradient(28% 62% at 66% 52%,rgba(160,128,96,.14) 0%,rgba(0,0,0,0) 70%);
  animation:hw-fog-g 92s ease-in-out infinite alternate;
}

@keyframes hw-fog-f{
  from{transform:translate3d(-7vmax,0,0)}
  to{transform:translate3d(11vmax,-1.5vmax,0)}
}

@keyframes hw-fog-g{
  from{transform:translate3d(9vmax,1vmax,0)}
  to{transform:translate3d(-10vmax,0,0)}
}

/* Fog wash inside the section accent bands (above #packages and #book):
 * the bands already carry the seasonal section art; this drifts a slow
 * bank of mist across them so mid-page dividers breathe. */
body.season-halloween .xprod-accent::after{
  content:"";
  position:absolute;
  inset:-24% -12%;
  pointer-events:none;
  background:
    radial-gradient(34% 70% at 28% 60%,rgba(170,160,180,.20) 0%,rgba(0,0,0,0) 70%),
    radial-gradient(28% 64% at 68% 46%,rgba(190,155,110,.15) 0%,rgba(0,0,0,0) 70%);
  filter:blur(18px);
  animation:hw-accent-fog 26s ease-in-out infinite alternate;
}

@keyframes hw-accent-fog{
  from{transform:translate3d(-2.5%,0,0)}
  to{transform:translate3d(2.5%,-4%,0)}
}

/* ---- (4a) Ground mist: two heavy banks hugging the floor of the frame,
 * soft top edge via mask so the mist has a surface, not a hard line. ---- */
.hw-groundmist{
  position:absolute;
  left:-12vmax;
  right:-12vmax;
  bottom:-10vmax;
  height:31vmax;
  filter:blur(36px);
  opacity:.82;
  will-change:transform;
  background:
    radial-gradient(30% 62% at 22% 66%,rgba(146,138,158,.30) 0%,rgba(0,0,0,0) 70%),
    radial-gradient(26% 58% at 52% 60%,rgba(120,112,138,.26) 0%,rgba(0,0,0,0) 70%),
    radial-gradient(28% 60% at 80% 68%,rgba(172,138,104,.20) 0%,rgba(0,0,0,0) 70%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 42%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 42%);
  animation:hw-mist-a 74s ease-in-out infinite alternate;
}

/* The dense core of the mist: thinner, lower, brighter — the layer the
 * dead leaves skim through. */
.hw-groundmist-b{
  bottom:-7vmax;
  height:17vmax;
  filter:blur(24px);
  opacity:.6;
  background:
    radial-gradient(32% 66% at 34% 64%,rgba(168,160,182,.30) 0%,rgba(0,0,0,0) 70%),
    radial-gradient(26% 60% at 72% 58%,rgba(150,140,168,.24) 0%,rgba(0,0,0,0) 70%);
  animation:hw-mist-b 57s ease-in-out infinite alternate;
}

@keyframes hw-mist-a{
  from{transform:translate3d(-5vmax,0,0)}
  to{transform:translate3d(6vmax,.8vmax,0)}
}

@keyframes hw-mist-b{
  from{transform:translate3d(6vmax,.5vmax,0)}
  to{transform:translate3d(-6vmax,0,0)}
}

/* ---- (4b) Drifting dead leaves: skimming along the ground, through
 * the mist. Recalibrated 2026-10-14 on Barry's note ("falling way too
 * much for this time of year and it looks clip art"): density now lives
 * in startHwLeaves (max 2 on screen, 24-48s apart, big photographic
 * sprites); the motion here is a slow FLIP-tumble — ~320° of rotation
 * across a 30-44s crossing with scaleX narrowing at the quarter points
 * so the leaf reads as a real leaf turning in the air, not a spinning
 * flat shape. The drop-shadow grounds each leaf in the mist (a soft
 * contact shadow, following the sprite's own alpha). Transform-only
 * keyframes (GPU composited); duration and depth set inline. ---- */
.hw-leaves{
  position:absolute;
  inset:0;
  overflow:hidden;
}

.hw-leaf{
  position:absolute;
  left:0;
  height:auto;
  pointer-events:none;
  will-change:transform;
  filter:drop-shadow(0 10px 10px rgba(0,0,0,.45));
  animation-timing-function:linear;
  animation-fill-mode:forwards;
}

.hw-leaf-r{ animation-name:hw-leaf-r; }
.hw-leaf-l{ animation-name:hw-leaf-l; }

@keyframes hw-leaf-r{
  0%{transform:translate3d(-10vw,0,0) rotate(0deg) scaleX(1)}
  18%{transform:translate3d(12vw,-2.8vh,0) rotate(58deg) scaleX(.48)}
  38%{transform:translate3d(34vw,.6vh,0) rotate(118deg) scaleX(.95)}
  58%{transform:translate3d(56vw,-3vh,0) rotate(182deg) scaleX(.44)}
  78%{transform:translate3d(78vw,.4vh,0) rotate(246deg) scaleX(.92)}
  100%{transform:translate3d(110vw,-1vh,0) rotate(318deg) scaleX(.8)}
}

@keyframes hw-leaf-l{
  0%{transform:translate3d(110vw,0,0) rotate(0deg) scaleX(1)}
  18%{transform:translate3d(88vw,-2.6vh,0) rotate(-60deg) scaleX(.46)}
  38%{transform:translate3d(66vw,.6vh,0) rotate(-120deg) scaleX(.94)}
  58%{transform:translate3d(44vw,-3vh,0) rotate(-184deg) scaleX(.42)}
  78%{transform:translate3d(22vw,.4vh,0) rotate(-248deg) scaleX(.9)}
  100%{transform:translate3d(-10vw,-1vh,0) rotate(-322deg) scaleX(.78)}
}

/* ---- (5) Ambient characters (2026-10-14 — Barry: "make sure animated
 * characters are present as you scroll down the page"): five cinematic
 * silhouettes injected by renderHalloweenCharacters() into per-section
 * .critter-stages, so they always paint BEHIND section content — they
 * can never cover copy or a CTA. Slow premium motion only (drift,
 * glide, sway), transform/opacity throughout. Each figure fades in via
 * .hw-on (IntersectionObserver in JS) to its own resting presence
 * (--hw-o); the witch's long keyframe cycle self-gates instead.
 * Sizes are clamp()ed with vw terms so phones get the same cast,
 * smaller — and the stage's overflow:hidden makes clipping or
 * horizontal scroll impossible. ---- */
.hw-char{
  position:absolute;
  z-index:0;
  pointer-events:none;
  opacity:0;
  transition:opacity 2.6s ease;
}

.hw-char.hw-on{
  opacity:var(--hw-o,1);
}

.hw-char svg{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
}

.hw-char-in{
  position:relative;
  will-change:transform;
}

/* Ghost: a draped figure drifting through the ground fog in #about. No
 * face, no features — pure form, veil-gradient fill, heavy soft glow. */
.hw-char-ghost{
  --hw-o:.82;
  left:3.5%;
  bottom:-6px;
  width:clamp(118px,13vw,190px);
}

.hw-char-ghost svg{
  filter:blur(2px) drop-shadow(0 0 26px rgba(198,210,238,.22));
}

.hw-char-ghost .hw-char-in{
  animation:hw-ghost-drift 26s ease-in-out infinite alternate;
}

@keyframes hw-ghost-drift{
  from{transform:translate3d(-2.2%,0,0)}
  to{transform:translate3d(3.2%,-1.6%,0)}
}

/* Witch: crosses the sky of .energy on a 74s cycle — a slow moonlit
 * glide with a halo she carries, then a long absence. Small, distant,
 * high in the section; never near the copy. */
.hw-char-witch{
  left:0;
  top:4%;
  width:clamp(148px,17vw,250px);
  opacity:1;
  transition:none;
  animation:hw-witch-cross 74s linear infinite;
}

.hw-char-witch svg{
  position:relative;
  filter:blur(.6px) drop-shadow(0 0 16px rgba(190,170,255,.16));
}

.hw-char-halo{
  position:absolute;
  left:50%;
  top:42%;
  width:175%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(228,236,250,.30) 0%,rgba(202,214,240,.10) 42%,rgba(0,0,0,0) 68%);
}

.hw-char-witch .hw-char-in{
  animation:hw-witch-bob 5.5s ease-in-out infinite alternate;
}

@keyframes hw-witch-cross{
  0%{transform:translate3d(-34vw,0,0);opacity:0}
  5%{opacity:.92}
  47%{transform:translate3d(50vw,-2vh,0)}
  90%{opacity:.92}
  97%,100%{transform:translate3d(112vw,-4vh,0);opacity:0}
}

@keyframes hw-witch-bob{
  from{transform:translateY(0)}
  to{transform:translateY(-7px)}
}

/* Black cat: perched at the foot of #packages, mostly still — a slow
 * tail sway and a breathing settle are the whole performance. */
.hw-char-cat{
  left:14px;
  bottom:4px;
  width:clamp(84px,9vw,132px);
}

.hw-char-cat svg{
  filter:blur(.4px) drop-shadow(0 8px 14px rgba(0,0,0,.55)) drop-shadow(-3px 0 9px rgba(255,166,66,.12));
}

.hw-char-cat .hw-char-in{
  transform-origin:50% 100%;
  animation:hw-cat-breathe 7s ease-in-out infinite alternate;
}

.hw-char-cat .hw-tail{
  transform-box:fill-box;
  transform-origin:27% 96%;
  animation:hw-tail-sway 6.5s ease-in-out infinite alternate;
}

@keyframes hw-cat-breathe{
  from{transform:scale(1)}
  to{transform:scale(1.012)}
}

@keyframes hw-tail-sway{
  from{transform:rotate(-2.5deg)}
  to{transform:rotate(3deg)}
}

/* Owl: on a branch reaching in from the top-right of #gallery, a slow
 * sway from the perch and a blink every few seconds — two dim amber
 * eyes, nothing more. */
.hw-char-owl{
  right:0;
  top:14px;
  width:clamp(108px,12vw,172px);
}

/* The owl carries a smaller moon halo than the witch (same mechanism):
 * a dark bird on a near-black header needs the glow to exist at all. */
.hw-char-owl .hw-char-halo{
  width:150%;
  top:36%;
  opacity:.8;
}

.hw-char-owl svg{
  position:relative;
  filter:blur(.5px) drop-shadow(0 10px 18px rgba(0,0,0,.5));
}

.hw-char-owl .hw-char-in{
  transform-origin:88% 4%;
  animation:hw-owl-sway 11s ease-in-out infinite alternate;
}

.hw-char-owl .hw-owl-eye{
  transform-box:fill-box;
  transform-origin:center;
  animation:hw-owl-blink 7.5s ease-in-out infinite;
}

@keyframes hw-owl-sway{
  from{transform:rotate(-1.1deg)}
  to{transform:rotate(1.3deg)}
}

@keyframes hw-owl-blink{
  0%,91%,100%{transform:scaleY(1)}
  94%{transform:scaleY(.08)}
  97%{transform:scaleY(1)}
}

/* Shadow figure: stands in the fog at the edge of #book. The slowest
 * fade of the cast (3.8s) and the lowest presence — it should register
 * a half-second after you notice it. */
.hw-char-shadow{
  --hw-o:.62;
  right:2%;
  bottom:0;
  width:clamp(94px,10.5vw,150px);
  transition-duration:3.8s;
}

.hw-char-shadow svg{
  filter:blur(1.6px);
}

.hw-char-shadow .hw-char-in{
  animation:hw-shadow-sway 13s ease-in-out infinite alternate;
}

@keyframes hw-shadow-sway{
  from{transform:translateX(-4px)}
  to{transform:translateX(5px)}
}

@media (max-width:620px){
  .hw-char-ghost{ left:1%; }
  .hw-char-cat{ left:4px; }
  .hw-char-shadow{ right:0; }
  .hw-char-witch{ top:2%; }
}

/* ---- (1) Countdown + booking CTA band ---- */
.hw-countdown{
  position:relative;
  overflow:hidden;
  text-align:center;
  background:
    linear-gradient(180deg,rgba(5,6,8,.72) 0%,rgba(5,6,8,.30) 26%,rgba(5,6,8,.30) 74%,rgba(5,6,8,.82) 100%),
    radial-gradient(62% 92% at 50% 0%,var(--prod-glow) 0%,rgba(0,0,0,0) 66%),
    var(--prod-section) center 32%/cover no-repeat,
    #070405;
  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,.20);
}

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

.hw-cd-inner{
  position:relative;
  max-width:920px;
  margin:0 auto;
  padding:clamp(2.8rem,6vw,4.2rem) clamp(1.2rem,5vw,3rem);
}

.hw-cd-digits{
  display:flex;
  justify-content:center;
  gap:clamp(.65rem,3.2vw,2.1rem);
  margin-top:1.5rem;
}

.hw-cd-cell{
  min-width:clamp(66px,11vw,106px);
  padding:.95rem .4rem .75rem;
  border:1px solid var(--prod-rule-soft);
  background:linear-gradient(180deg,rgba(12,6,3,.78),rgba(12,6,3,.48));
  box-shadow:inset 0 1px 0 rgba(255,220,150,.16),0 12px 28px rgba(0,0,0,.55);
}

/* Gold dimensional numerals — same champagne-metal recipe as .xprod-h,
 * no filter on the type (see the engineering note at the hero headline). */
.hw-cd-num{display:block;font-family:'Bodoni Moda',Georgia,serif;font-weight:600;font-size:clamp(2.05rem,5.6vw,3.5rem);line-height:1;font-variant-numeric:tabular-nums;color:#edc66d;-webkit-text-fill-color:#edc66d;-webkit-text-stroke:1px var(--prod-stroke);text-shadow:0 -1px 1px rgba(255,251,235,.55), 0 1px 0 rgba(74,48,12,.55), 0 2px 0 rgba(15,5,3,.9), 0 8px 20px rgba(0,0,0,.8);}

.hw-cd-lab{
  display:block;
  margin-top:.5rem;
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:#e9e2d4;
  opacity:.85;
}

.hw-cd-line{
  max-width:56ch;
  margin:1.4rem auto 0;
  font-size:clamp(1rem,1.6vw,1.15rem);
}

/* Halloween day state: digits retire, the tonight line takes the stage. */
.hw-cd-tonight{display:none;margin:1.2rem 0 0;font-family:'Bodoni Moda',Georgia,serif;font-weight:600;font-size:clamp(1.9rem,4.6vw,3.2rem);line-height:1.05;color:#edc66d;-webkit-text-fill-color:#edc66d;-webkit-text-stroke:1px var(--prod-stroke);text-shadow:0 -1px 1px rgba(255,251,235,.55), 0 1px 0 rgba(74,48,12,.55), 0 2px 0 rgba(15,5,3,.9), 0 10px 24px rgba(0,0,0,.85), 0 0 30px var(--prod-glow);}

.hw-countdown.hw-cd-live .hw-cd-digits{ display:none; }
.hw-countdown.hw-cd-live .hw-cd-tonight{ display:block; }

/* ---- "More" pass on small screens: cheaper blurs, tighter countdown ---- */
@media (max-width:620px){
  .hw-groundmist{
    filter:blur(24px);
    opacity:.62;
  }
  .hw-groundmist-b{
    filter:blur(16px);
    opacity:.48;
  }
  .hw-cd-cell{
    min-width:60px;
    padding:.7rem .25rem .55rem;
  }
  .hw-skyline{
    height:104px;
  }
}

/* ==========================================================================
 * CHRISTMAS CINEMATIC ATMOSPHERE (replaces the retired cartoon critter
 * cast, 2026-09-24 — Barry: "like Santa himself threw up on it",
 * MAXIMALIST but luxe, never clip-art). Injected by
 * renderChristmasAtmos() as a fixed full-viewport film grade: two layers
 * of drifting foreground snowfall depth, glinting ornament bokeh, warm
 * candlelight flicker glows, a deep green vignette, and animated film
 * grain. Sits at z-index 89 — just under the snowfall particle canvas
 * (z 90) so flakes fall IN FRONT of the grade for real depth.
 * pointer-events:none, aria-hidden. Garland + twinkling string lights
 * drape the hero top (inside .hero, below the nav) and deck the
 * production banner, accent bands, and booking panel.
 * Christmas enters through ATMOSPHERE (snow, candlelight, garlands,
 * ornaments, warm red/green/gold) — never cartoon creatures, never flat
 * vector icons.
 * ========================================================================== */
.christmas-atmos{
  position:fixed;
  inset:0;
  z-index:89;
  pointer-events:none;
  overflow:hidden;
}

/* Foreground snowfall depth: big soft out-of-focus flakes drifting down
 * in two parallax layers around the particle-canvas snow. */
.xm-snowdeep{
  position:absolute;
  left:-10%;
  width:120%;
  top:-12%;
  height:124%;
  will-change:transform;
}

.xm-snowdeep-a{
  background:radial-gradient(circle,rgba(255,255,255,.9) 0 5px,rgba(255,255,255,0) 7px) 0 0/260px 260px repeat;
  filter:blur(2.5px);
  opacity:.5;
  animation:xm-snowfall 26s linear infinite;
}

.xm-snowdeep-b{
  background:radial-gradient(circle,rgba(255,252,244,.95) 0 3px,rgba(255,252,244,0) 5px) 130px 60px/200px 200px repeat;
  filter:blur(1px);
  opacity:.65;
  animation:xm-snowfall 17s linear infinite;
}

@keyframes xm-snowfall{
  from{transform:translate3d(0,-6%,0)}
  to{transform:translate3d(-2%,6%,0)}
}

/* Glinting ornament bokeh: red, gold, green, and champagne orbs floating
 * through the grade (spans generated by renderChristmasAtmos). */
.xm-bokeh{
  position:absolute;
  inset:0;
}

.xm-bokeh span{
  position:absolute;
  border-radius:50%;
  filter:blur(6px);
  background:radial-gradient(circle,rgba(var(--bk,240,205,109),.85) 0%,rgba(var(--bk,240,205,109),0) 70%);
  animation:xm-bokeh-float 8s ease-in-out infinite;
  will-change:transform,opacity;
}

@keyframes xm-bokeh-float{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.32}
  50%{transform:translate3d(1.5vmax,-2vmax,0) scale(1.15);opacity:.6}
}

/* Warm candlelight glows breathing low in frame, two rhythms, never
 * in sync. */
.xm-candle{
  position:absolute;
  bottom:-14%;
  width:52vmax;
  height:40vmax;
  filter:blur(38px);
  will-change:opacity,transform;
}

.xm-candle-l{
  left:-12vmax;
  background:radial-gradient(closest-side,rgba(255,120,60,.20) 0%,rgba(200,40,40,.08) 55%,rgba(0,0,0,0) 75%);
  animation:xm-flick-l 4.2s ease-in-out infinite;
}

.xm-candle-r{
  right:-14vmax;
  background:radial-gradient(closest-side,rgba(255,180,90,.16) 0%,rgba(255,120,50,.06) 55%,rgba(0,0,0,0) 75%);
  animation:xm-flick-r 5.1s ease-in-out infinite;
}

@keyframes xm-flick-l{
  0%,100%{opacity:.72;transform:translate3d(0,0,0) scale(1)}
  28%{opacity:.95;transform:translate3d(.6vmax,-.4vmax,0) scale(1.03)}
  55%{opacity:.8;transform:translate3d(-.4vmax,.3vmax,0) scale(.99)}
  79%{opacity:1;transform:translate3d(.3vmax,-.2vmax,0) scale(1.02)}
}

@keyframes xm-flick-r{
  0%,100%{opacity:.85;transform:translate3d(0,0,0) scale(1)}
  33%{opacity:.66;transform:translate3d(-.5vmax,.4vmax,0) scale(.98)}
  61%{opacity:.97;transform:translate3d(.4vmax,-.3vmax,0) scale(1.03)}
  84%{opacity:.74;transform:translate3d(-.2vmax,-.4vmax,0) scale(1)}
}

/* Animated film grain over the seasonal art — the texture wash, alive. */
.xm-grain{
  position:absolute;
  inset:-4%;
  background:var(--prod-texture) center/420px repeat;
  opacity:.09;
  mix-blend-mode:overlay;
  animation:xm-grain 1.1s steps(6) infinite;
}

@keyframes xm-grain{
  0%{transform:translate(0,0)}
  20%{transform:translate(-2%,1%)}
  40%{transform:translate(1%,-2%)}
  60%{transform:translate(-1%,2%)}
  80%{transform:translate(2%,1%)}
  100%{transform:translate(0,0)}
}

/* Deep green cinematic vignette — holds the edges of every section. */
.xm-vignette{
  position:absolute;
  inset:0;
  background:
    radial-gradient(118% 118% at 50% 46%,rgba(0,0,0,0) 50%,rgba(4,14,8,.5) 100%),
    linear-gradient(180deg,rgba(4,14,8,.32) 0%,rgba(0,0,0,0) 16%,rgba(0,0,0,0) 82%,rgba(4,14,8,.38) 100%);
}

/* ---- Garland + string lights, hero top ----
 * Inside .hero at z-index 5: above the seasonal art overlay (z 2) and the
 * hero copy layer (z 4) — but the strand lives in the top 132px where the
 * hero-inner padding leaves no copy — and below the nav (z-index 20), so
 * nav legibility is never touched. */
.xm-hero-garland{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:132px;
  z-index:5;
  pointer-events:none;
  background:
    radial-gradient(circle at 60px -4px,#4a9a5c 0 6px,#2a7a3f 18px,#0e3a20 33px,#06180d 36px,rgba(0,0,0,0) 37px),
    radial-gradient(circle at 0 -4px,#3d8a50 0 5px,#1d5c33 16px,#0a2f18 29px,rgba(0,0,0,0) 31px),
    linear-gradient(180deg,rgba(6,20,11,.95) 0%,rgba(6,20,11,0) 100%);
  background-size:120px 76px,120px 76px,100% 76px;
  background-repeat:repeat-x,repeat-x,no-repeat;
}

.xm-hero-garland svg{
  position:absolute;
  top:52px;
  left:0;
  width:100%;
  height:80px;
  display:block;
  overflow:visible;
}

.xm-bulb{
  animation:xm-bulb-tw 2.6s ease-in-out infinite;
}

.xm-bulb-halo{
  fill:rgba(255,200,110,.28);
}

.xm-bulb-core{
  fill:var(--bc,#ffd98a);
  filter:drop-shadow(0 0 7px var(--bc,#ffd98a));
}

@keyframes xm-bulb-tw{
  0%,100%{opacity:.62}
  50%{opacity:1}
}

/* ---- Garland boughs + twinkling bulbs decking the production banner,
 * accent bands, and booking panel (Christmas only). Garland is a CSS
 * scallop band (::after); the twinkling bulb strand is a JS-injected
 * .xm-bandlights div (first child) so the twinkle never pulses the
 * garland itself. */
body.season-winter .xprod-banner::after,
body.season-winter .xprod-panel::after,
body.season-winter .xprod-accent::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:36px;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 32px -4px,#4a9a5c 0 5px,#2a7a3f 16px,#0e3a20 29px,#06180d 30px,rgba(0,0,0,0) 31px),
    radial-gradient(circle at 0 -4px,#3d8a50 0 4px,#1d5c33 14px,#0a2f18 26px,rgba(0,0,0,0) 28px),
    linear-gradient(180deg,rgba(8,26,15,.9) 0%,rgba(8,26,15,0) 100%);
  background-size:64px 36px,64px 36px,100% 36px;
  background-repeat:repeat-x,repeat-x,no-repeat;
}

.xm-bandlights{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:46px;
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(circle,#fff6d8 0 3px,rgba(255,190,90,.5) 4px,rgba(255,190,90,0) 9px) 32px 24px/64px 46px repeat-x,
    radial-gradient(circle,#ffd98a 0 3px,rgba(255,170,80,.5) 4px,rgba(255,170,80,0) 9px) 0 30px/64px 46px repeat-x;
  animation:xm-band-tw 3.2s ease-in-out infinite;
}

@keyframes xm-band-tw{
  0%,100%{opacity:.7}
  50%{opacity:1}
}

/* Christmas headline: frost-kissed bright champagne metal — icy glints
 * embedded in the fill plus the slow glint sweep. No filter on the type
 * itself (see the Chromium tessellation note on the shared rule above). */
body.season-winter .hero h1:not(.craft){color:#edc66d;-webkit-text-fill-color:#edc66d;-webkit-text-stroke:1px rgba(70,44,8,.55);animation:xm-frost-sheen 8s ease-in-out infinite;text-shadow:0 -1px 1px rgba(255,251,235,.55), 0 1px 0 rgba(74,48,12,.55), 0 2px 0 rgba(18,10,1,.92), 0 14px 30px rgba(0,0,0,.72), 0 0 38px rgba(240,214,150,.30);}

@keyframes xm-frost-sheen{
  0%,55%{background-position:130% 0,0 0,0 0,0 0}
  90%,100%{background-position:-130% 0,0 0,0 0,0 0}
}

/* ---- 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;
  }
  /* Halloween atmosphere: cheaper blur + lighter fog on small GPUs. */
  .hw-fog{
    filter:blur(28px);
    opacity:.38;
  }
  .hw-grain{
    opacity:.06;
  }
  .hw-moon{
    width:64vmax;
    height:64vmax;
    top:-40vmax;
    right:-40vmax;
    opacity:.85;
  }
  .hw-branches-tl{
    width:58vmax;
    height:58vmax;
  }
  .hw-branches-br{
    width:62vmax;
    height:62vmax;
  }
  .hw-branches{
    opacity:.72;
  }
  .hw-candle{
    filter:blur(24px);
  }
  /* Halloween hero type: "Halloween," + the tagline must fit 390px —
   * the base lockup sizes (19vw / 1.35rem floor) overflow. NOTE: the h1
   * carries .lockup-proud-img (not .lockup-proud), so the old selector
   * matched nothing and the base clamp(4rem,8vw,8.3rem) floor rendered
   * the headline 431px wide on a 390px phone — clipped on both sides.
   * Target the h1 itself; desktop rules are untouched. */
  body.season-halloween .hero h1:not(.craft){
    font-size:clamp(2.6rem,13vw,4rem);
  }
  /* Halloween eyebrow: .lockup-eyebrow is 43 characters; at the base
   * mobile size (.62rem / .32em tracking) it runs ~440px wide and the
   * centered lockup clips it on both sides. Shrink + tighten on phones
   * and let it wrap centered rather than clip. */
  body.season-halloween .lockup-eyebrow{
    font-size:.56rem;
    letter-spacing:.16em;
    text-indent:.16em;
    max-width:100%;
    text-align:center;
    text-wrap:balance;
  }
  body.season-halloween .lockup-tag{
    font-size:1.02rem;
    line-height:1.6;
    margin:1.15rem 0 0;
    max-width:100%;
    text-wrap:balance;
  }
  body.season-halloween .lockup-domain{
    margin-top:1.6rem;
  }

  /* Production mobile restack (Halloween/Christmas/New Year) (JS moves .hero-barry into .hero-lockup ahead
   * of .hero-actions and sets .xprod-mstack on body): medallion → headline →
   * tagline → djproud.com → photo → CTA flow vertically with clean
   * spacing, nothing overlapping or clipped. (2026-09-24: the portrait was
   * absolutely positioned over the CTA zone and clipped at the viewport.) */
  body.season-halloween.xprod-mstack .hero-fbc .hero-barry,
  body.season-winter.xprod-mstack .hero-fbc .hero-barry,
  body.season-thanksgiving.xprod-mstack .hero-fbc .hero-barry,
  body.season-newyear.xprod-mstack .hero-fbc .hero-barry{
    position:relative;
    inset:auto;
    right:auto;
    bottom:auto;
    display:block;
    width:min(200px,52vw);
    height:auto;
    aspect-ratio:960/1323;
    margin:1.4rem auto 0;
    z-index:4;
  }
  body.season-halloween.xprod-mstack .hero-fbc .hero-barry img,
  body.season-winter.xprod-mstack .hero-fbc .hero-barry img,
  body.season-thanksgiving.xprod-mstack .hero-fbc .hero-barry img,
  body.season-newyear.xprod-mstack .hero-fbc .hero-barry img{
    height:100%;
  }

  /* Christmas mobile: hero type mirrors the Halloween mobile fit
   * ("Christmas," is the same length class); the atmosphere gets
   * cheaper blurs and a slimmer garland so phones stay composed. */
  body.season-winter .lockup-proud{
    font-size:clamp(2.7rem,13vw,4rem);
  }
  body.season-winter .lockup-tag{
    font-size:1.02rem;
    line-height:1.6;
    margin:1.15rem 0 0;
    max-width:100%;
    text-wrap:balance;
    /* The winter hero art burns bright candles right behind this script
     * line on narrow screens — lift the ink off the flames with a deep
     * soft halo. Invisible as a fix; it only reads as legibility. */
    text-shadow:0 2px 8px rgba(0,0,0,.95), 0 0 24px rgba(0,0,0,.85), 0 0 60px rgba(24,10,2,.55);
  }
  body.season-winter .lockup-domain{
    margin-top:1.6rem;
  }
  .xm-snowdeep-a{
    filter:blur(2px);
    opacity:.4;
  }
  .xm-snowdeep-b{
    opacity:.5;
  }
  .xm-bokeh span{
    filter:blur(4px);
  }
  .xm-grain{
    opacity:.06;
  }
  .xm-candle{
    filter:blur(24px);
  }
  .xm-hero-garland{
    height:104px;
  }
  .xm-hero-garland svg{
    top:40px;
    height:64px;
  }
}

/* ---- 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-thanksgiving .hero h1,
  body.season-newyear .hero h1{
    animation:none;
    transition:none;
  }
  .critter-stage{
    display:none;
  }
  /* Halloween atmosphere: freeze the fog/grain drift; the static grade
   * (vignette, moon, still fog, candle glow) stays — it carries no
   * motion harm. */
  .hw-fog,
  .hw-grain,
  .hw-candle{
    animation:none;
  }
  /* Christmas atmosphere: freeze the snow drift, bokeh, flicker, grain,
   * and bulb twinkle; the static grade (vignette, garland, still snow,
   * glows) stays — it carries no motion harm. */
  .xm-snowdeep-a,
  .xm-snowdeep-b,
  .xm-bokeh span,
  .xm-candle-l,
  .xm-candle-r,
  .xm-grain,
  .xm-bulb,
  .xm-bandlights{
    animation:none;
  }
}

/* ==========================================================================
 * SCROLL CRITTERS — ambient seasonal creatures (added 2026-09-22, cast
 * expanded 2026-09-23: turkey-poult/leaf-shape 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 = atmosphere-only as of 2026-09-24 (Barry:
 * cartoon cast "horrible"); Christmas = atmosphere-only as of 2026-09-24
 * (Barry: maximalist but luxe, never clip-art); Thanksgiving = cinematic
 * silhouette figures (2026-10-14, Barry's production notes: animated
 * characters distributed down the page, elegant only — the cartoon
 * turkey cast and its leaf gusts are retired). 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;
}

/* ---- Thanksgiving turkey cast — RETIRED 2026-10-14 (builders kept
 * for the __critterTest exports; the live spawner fields cinematic
 * silhouette figures now — see .critter.tg-figure). ---- */
.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;
}

/* ---- 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 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 leaf-flutter{
  0%,100%{transform:translateY(-9px) rotate(-24deg)}
  50%{transform:translateY(11px) rotate(26deg)}
}






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

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

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

/* ---- New critter keyframes (transform/opacity only) ---- */

/* ==========================================================================
 * 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;
  }
  /* Halloween ambient characters are motion decor — gone entirely
   * under reduced motion (the JS also skips injecting them). */
  .hw-char{
    display:none;
  }
}

/* ==========================================================================
 * THANKSGIVING CINEMATIC ATMOSPHERE + TURKEY COUNTDOWN + FIGURES
 * (2026-10-14 — full production at the Halloween bar, built to Barry's
 * production notes on the Halloween staging). Injected by
 * renderThanksgivingAtmos() as a fixed full-viewport warm film grade:
 * drifting harvest fog (hero banks + a scroll-ramped mid-page pair),
 * candle-flicker glows, harvest bokeh, heavy ground mist, sparse
 * photographic leaves, film grain, deep warm vignette. Z-index 89 —
 * under the ember particle canvas (z 90), the same depth trick as
 * Halloween. The countdown band follows the season: here it counts to
 * the turkey — Thanksgiving Day. Animated figures are cinematic
 * harvest-world silhouettes distributed down the page by the critter
 * system (.critter.tg-figure). Thanksgiving enters through atmosphere
 * and elegant figures — never cartoon, never clip-art.
 * ========================================================================== */
.thanksgiving-atmos{
  position:fixed;
  inset:0;
  z-index:89;
  pointer-events:none;
  overflow:hidden;
}

.tg-fog{
  position:absolute;
  width:175vmax;
  height:46vmax;
  filter:blur(46px);
  will-change:transform;
}

/* Upper fog bank: warm amber-grey, slow drift. */
.tg-fog-a{
  top:4%;
  left:-35vmax;
  opacity:.5;
  background:
    radial-gradient(28% 62% at 22% 46%,rgba(216,164,102,.16) 0%,rgba(0,0,0,0) 70%),
    radial-gradient(34% 68% at 58% 40%,rgba(196,140,84,.13) 0%,rgba(0,0,0,0) 70%),
    radial-gradient(26% 60% at 84% 52%,rgba(216,164,102,.12) 0%,rgba(0,0,0,0) 70%);
  animation:tg-fog-a 78s ease-in-out infinite alternate;
}

/* Mid fog band: thinner, faster — parallax against the upper bank. */
.tg-fog-b{
  top:38%;
  left:-45vmax;
  opacity:.4;
  background:
    radial-gradient(30% 64% at 30% 50%,rgba(206,156,96,.14) 0%,rgba(0,0,0,0) 70%),
    radial-gradient(24% 56% at 68% 44%,rgba(216,170,110,.11) 0%,rgba(0,0,0,0) 70%);
  animation:tg-fog-b 54s ease-in-out infinite alternate;
}

/* Ground fog: warm candlelight bounce along the bottom edge. */
.tg-fog-c{
  bottom:-14%;
  left:-30vmax;
  opacity:.48;
  background:
    radial-gradient(32% 66% at 26% 60%,rgba(226,164,96,.13) 0%,rgba(0,0,0,0) 70%),
    radial-gradient(28% 60% at 62% 55%,rgba(200,150,100,.11) 0%,rgba(0,0,0,0) 70%),
    radial-gradient(24% 58% at 88% 62%,rgba(226,164,96,.10) 0%,rgba(0,0,0,0) 70%);
  animation:tg-fog-c 66s ease-in-out infinite alternate;
}

/* Low creeping fog: the densest bank, hugging the bottom of frame. */
.tg-fog-d{
  bottom:-20%;
  left:-25vmax;
  opacity:.58;
  background:
    radial-gradient(36% 70% at 24% 62%,rgba(168,128,84,.19) 0%,rgba(0,0,0,0) 70%),
    radial-gradient(30% 64% at 56% 58%,rgba(190,142,90,.15) 0%,rgba(0,0,0,0) 70%),
    radial-gradient(28% 60% at 82% 64%,rgba(168,128,84,.17) 0%,rgba(0,0,0,0) 70%);
  animation:tg-fog-d 90s ease-in-out infinite alternate;
}

/* Mid-page fog banks: invisible over the hero, ramped in by the scroll
 * handler in renderThanksgivingAtmos as the visitor moves below it. */
.tg-fog-f{
  top:46%;
  left:-40vmax;
  opacity:0;
  background:
    radial-gradient(30% 62% at 26% 50%,rgba(200,156,100,.15) 0%,rgba(0,0,0,0) 70%),
    radial-gradient(26% 58% at 58% 44%,rgba(220,170,105,.12) 0%,rgba(0,0,0,0) 70%),
    radial-gradient(24% 56% at 84% 54%,rgba(196,148,96,.12) 0%,rgba(0,0,0,0) 70%);
  animation:tg-fog-f 70s ease-in-out infinite alternate;
}

.tg-fog-g{
  bottom:-16%;
  left:-32vmax;
  opacity:0;
  background:
    radial-gradient(34% 68% at 30% 58%,rgba(176,132,86,.18) 0%,rgba(0,0,0,0) 70%),
    radial-gradient(28% 62% at 66% 52%,rgba(206,158,100,.14) 0%,rgba(0,0,0,0) 70%);
  animation:tg-fog-g 94s ease-in-out infinite alternate;
}

@keyframes tg-fog-a{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(16vmax,-2vmax,0)}
}

@keyframes tg-fog-b{
  from{transform:translate3d(10vmax,1vmax,0)}
  to{transform:translate3d(-9vmax,-1vmax,0)}
}

@keyframes tg-fog-c{
  from{transform:translate3d(-6vmax,0,0)}
  to{transform:translate3d(13vmax,2vmax,0)}
}

@keyframes tg-fog-d{
  from{transform:translate3d(8vmax,0,0)}
  to{transform:translate3d(-11vmax,1vmax,0)}
}

@keyframes tg-fog-f{
  from{transform:translate3d(-7vmax,0,0)}
  to{transform:translate3d(11vmax,-1.5vmax,0)}
}

@keyframes tg-fog-g{
  from{transform:translate3d(9vmax,1vmax,0)}
  to{transform:translate3d(-10vmax,0,0)}
}

/* Candle-flicker glows: warm breathing light low in frame, two rhythms,
 * never in sync (flicker keyframes shared with the Halloween grade). */
.tg-candle{
  position:absolute;
  bottom:-12%;
  width:46vmax;
  height:36vmax;
  filter:blur(34px);
  will-change:opacity,transform;
}

.tg-candle-l{
  left:-10vmax;
  background:radial-gradient(closest-side,rgba(255,160,60,.24) 0%,rgba(255,120,36,.09) 52%,rgba(0,0,0,0) 76%);
  animation:hw-flick-l 3.9s ease-in-out infinite;
}

.tg-candle-r{
  right:-12vmax;
  background:radial-gradient(closest-side,rgba(255,178,80,.20) 0%,rgba(230,120,40,.08) 52%,rgba(0,0,0,0) 76%);
  animation:hw-flick-r 4.8s ease-in-out infinite;
}

/* Harvest bokeh: warm out-of-focus orbs floating through the grade
 * (spans generated by renderThanksgivingAtmos). */
.tg-bokeh{
  position:absolute;
  inset:0;
}

.tg-bokeh span{
  position:absolute;
  border-radius:50%;
  filter:blur(6px);
  background:radial-gradient(circle,rgba(var(--bk,255,178,96),.85) 0%,rgba(var(--bk,255,178,96),0) 70%);
  animation:tg-bokeh-float 9s ease-in-out infinite;
  will-change:transform,opacity;
}

@keyframes tg-bokeh-float{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.3}
  50%{transform:translate3d(1.5vmax,-2vmax,0) scale(1.15);opacity:.55}
}

/* Ground mist: two heavy warm banks hugging the floor of the frame,
 * soft top edge via mask so the mist has a surface, not a hard line. */
.tg-groundmist{
  position:absolute;
  left:-12vmax;
  right:-12vmax;
  bottom:-10vmax;
  height:31vmax;
  filter:blur(36px);
  opacity:.8;
  will-change:transform;
  background:
    radial-gradient(30% 62% at 22% 66%,rgba(196,152,100,.28) 0%,rgba(0,0,0,0) 70%),
    radial-gradient(26% 58% at 52% 60%,rgba(172,128,80,.24) 0%,rgba(0,0,0,0) 70%),
    radial-gradient(28% 60% at 80% 68%,rgba(210,160,100,.19) 0%,rgba(0,0,0,0) 70%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 42%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 42%);
  animation:tg-mist-a 76s ease-in-out infinite alternate;
}

.tg-groundmist-b{
  bottom:-7vmax;
  height:17vmax;
  filter:blur(24px);
  opacity:.58;
  background:
    radial-gradient(32% 66% at 34% 64%,rgba(214,168,108,.28) 0%,rgba(0,0,0,0) 70%),
    radial-gradient(26% 60% at 72% 58%,rgba(192,146,92,.22) 0%,rgba(0,0,0,0) 70%);
  animation:tg-mist-b 59s ease-in-out infinite alternate;
}

@keyframes tg-mist-a{
  from{transform:translate3d(-5vmax,0,0)}
  to{transform:translate3d(6vmax,.8vmax,0)}
}

@keyframes tg-mist-b{
  from{transform:translate3d(6vmax,.5vmax,0)}
  to{transform:translate3d(-6vmax,0,0)}
}

/* Sparse drifting leaves: one or two photographic leaves skimming the
 * ground mist, slow and quiet (spawned by startTgLeaves). */
.tg-leaves{
  position:absolute;
  inset:0;
  overflow:hidden;
}

.tg-leaf{
  position:absolute;
  left:0;
  height:auto;
  pointer-events:none;
  will-change:transform;
  animation-timing-function:linear;
  animation-fill-mode:forwards;
}

.tg-leaf-r{ animation-name:tg-leaf-r; }
.tg-leaf-l{ animation-name:tg-leaf-l; }

@keyframes tg-leaf-r{
  0%{transform:translate3d(-9vw,0,0) rotate(0deg)}
  24%{transform:translate3d(21vw,-1.6vh,0) rotate(120deg)}
  50%{transform:translate3d(52vw,.6vh,0) rotate(245deg)}
  76%{transform:translate3d(81vw,-1.4vh,0) rotate(380deg)}
  100%{transform:translate3d(111vw,0,0) rotate(505deg)}
}

@keyframes tg-leaf-l{
  0%{transform:translate3d(111vw,0,0) rotate(0deg)}
  24%{transform:translate3d(82vw,-1.5vh,0) rotate(-125deg)}
  50%{transform:translate3d(52vw,.6vh,0) rotate(-250deg)}
  76%{transform:translate3d(22vw,-1.6vh,0) rotate(-385deg)}
  100%{transform:translate3d(-9vw,0,0) rotate(-510deg)}
}

/* Animated film grain over the seasonal art (shared keyframes). */
.tg-grain{
  position:absolute;
  inset:-4%;
  background:var(--prod-texture) center/420px repeat;
  opacity:.08;
  mix-blend-mode:overlay;
  animation:hw-grain 1.2s steps(6) infinite;
}

/* Deep warm cinematic vignette — holds the edges of every section. */
.tg-vignette{
  position:absolute;
  inset:0;
  background:
    radial-gradient(118% 118% at 50% 46%,rgba(0,0,0,0) 50%,rgba(10,4,0,.5) 100%),
    linear-gradient(180deg,rgba(10,4,0,.3) 0%,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 84%,rgba(10,4,0,.36) 100%);
}

/* Fog wash inside the section accent bands: the bands carry the
 * seasonal section art; this drifts a slow bank of warm mist across
 * them so mid-page dividers breathe (shared drift keyframes). */
body.season-thanksgiving .xprod-accent::after{
  content:"";
  position:absolute;
  inset:-24% -12%;
  pointer-events:none;
  background:
    radial-gradient(34% 70% at 28% 60%,rgba(216,164,102,.20) 0%,rgba(0,0,0,0) 70%),
    radial-gradient(28% 64% at 68% 46%,rgba(190,130,80,.15) 0%,rgba(0,0,0,0) 70%);
  filter:blur(18px);
  animation:hw-accent-fog 26s ease-in-out infinite alternate;
}

/* ---- Turkey countdown band: the seasonal countdown slot, counting to
 * Thanksgiving Day with the Thanksgiving Eve booking push. ---- */
.tg-countdown{
  position:relative;
  overflow:hidden;
  text-align:center;
  background:
    linear-gradient(180deg,rgba(5,6,8,.72) 0%,rgba(5,6,8,.30) 26%,rgba(5,6,8,.30) 74%,rgba(5,6,8,.82) 100%),
    radial-gradient(62% 92% at 50% 0%,var(--prod-glow) 0%,rgba(0,0,0,0) 66%),
    var(--prod-section) center 40%/cover no-repeat,
    #070403;
  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,.20);
}

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

.tg-cd-inner{
  position:relative;
  max-width:920px;
  margin:0 auto;
  padding:clamp(2.8rem,6vw,4.2rem) clamp(1.2rem,5vw,3rem);
}

.tg-cd-digits{
  display:flex;
  justify-content:center;
  gap:clamp(.65rem,3.2vw,2.1rem);
  margin-top:1.5rem;
}

.tg-cd-cell{
  min-width:clamp(66px,11vw,106px);
  padding:.95rem .4rem .75rem;
  border:1px solid var(--prod-rule-soft);
  background:linear-gradient(180deg,rgba(14,7,2,.78),rgba(14,7,2,.48));
  box-shadow:inset 0 1px 0 rgba(255,220,150,.16),0 12px 28px rgba(0,0,0,.55);
}

/* Gold dimensional numerals — same champagne-metal recipe as the
 * Halloween countdown, no filter on the type. */
.tg-cd-num{display:block;font-family:'Bodoni Moda',Georgia,serif;font-weight:600;font-size:clamp(2.05rem,5.6vw,3.5rem);line-height:1;font-variant-numeric:tabular-nums;color:#edc66d;-webkit-text-fill-color:#edc66d;-webkit-text-stroke:1px var(--prod-stroke);text-shadow:0 -1px 1px rgba(255,251,235,.55), 0 1px 0 rgba(74,48,12,.55), 0 2px 0 rgba(15,5,3,.9), 0 8px 20px rgba(0,0,0,.8);}

.tg-cd-lab{
  display:block;
  margin-top:.5rem;
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:#e9e2d4;
  opacity:.85;
}

.tg-cd-line{
  max-width:56ch;
  margin:1.4rem auto 0;
  font-size:clamp(1rem,1.6vw,1.15rem);
}

/* Thanksgiving Day state: digits retire, the Turkey Day line takes the stage. */
.tg-cd-today{display:none;margin:1.2rem 0 0;font-family:'Bodoni Moda',Georgia,serif;font-weight:600;font-size:clamp(1.9rem,4.6vw,3.2rem);line-height:1.05;color:#edc66d;-webkit-text-fill-color:#edc66d;-webkit-text-stroke:1px var(--prod-stroke);text-shadow:0 -1px 1px rgba(255,251,235,.55), 0 1px 0 rgba(74,48,12,.55), 0 2px 0 rgba(15,5,3,.9), 0 10px 24px rgba(0,0,0,.85), 0 0 30px var(--prod-glow);}

.tg-countdown.tg-cd-live .tg-cd-digits{ display:none; }
.tg-countdown.tg-cd-live .tg-cd-today{ display:block; }

/* ---- Cinematic figures (critter system): candlelit silhouettes ---- */
.critter.tg-figure svg{
  filter:drop-shadow(0 0 10px rgba(255,170,80,.28)) drop-shadow(0 8px 18px rgba(0,0,0,.65));
}

.critter.tg-figure .tg-sway{
  transform-origin:50% 92%;
  animation:tg-sway 5.2s ease-in-out infinite alternate;
}

.critter.tg-figure .tg-sway-slow{
  animation-duration:7.4s;
}

@keyframes tg-sway{
  from{transform:rotate(-.7deg) translateY(0)}
  to{transform:rotate(.7deg) translateY(-4px)}
}

.tg-flame{
  transform-origin:center;
  transform-box:fill-box;
  animation:tg-flame 1.6s ease-in-out infinite alternate;
}

@keyframes tg-flame{
  from{transform:scaleY(.88) scaleX(1)}
  to{transform:scaleY(1.1) scaleX(.94)}
}

.tg-spark{
  transform-origin:center;
  transform-box:fill-box;
  animation:tg-spark 2.8s ease-in-out infinite;
}

@keyframes tg-spark{
  0%,100%{opacity:.35;transform:scale(.8) rotate(0deg)}
  50%{opacity:1;transform:scale(1.15) rotate(20deg)}
}

/* ---- Thanksgiving on small screens: the Halloween mobile fit, mirrored
 * (headline + eyebrow targeted at the elements that actually carry them —
 * the Halloween clip bug was a selector that matched nothing). ---- */
@media (max-width:620px){
  body.season-thanksgiving .hero h1{
    font-size:clamp(2.6rem,13vw,4rem);
  }
  body.season-thanksgiving .lockup-eyebrow{
    font-size:.56rem;
    letter-spacing:.16em;
    text-indent:.16em;
    max-width:100%;
    text-align:center;
    text-wrap:balance;
  }
  body.season-thanksgiving .lockup-tag{
    font-size:1.02rem;
    line-height:1.6;
    margin:1.15rem 0 0;
    max-width:100%;
    text-wrap:balance;
  }
  body.season-thanksgiving .lockup-domain{
    margin-top:1.6rem;
  }
  .tg-fog{
    filter:blur(28px);
    opacity:.38;
  }
  .tg-grain{
    opacity:.06;
  }
  .tg-candle{
    filter:blur(24px);
  }
  .tg-groundmist{
    filter:blur(24px);
    opacity:.62;
  }
  .tg-groundmist-b{
    filter:blur(16px);
    opacity:.48;
  }
  .tg-cd-cell{
    min-width:60px;
    padding:.7rem .25rem .55rem;
  }
}

/* ---- Reduced motion: freeze the Thanksgiving grade + figures; the
 * static grade (vignette, still fog, candle glow) stays. ---- */
@media (prefers-reduced-motion:reduce){
  .tg-fog,
  .tg-grain,
  .tg-candle,
  .tg-bokeh span,
  .tg-groundmist,
  .tg-flame,
  .tg-spark,
  .critter.tg-figure .tg-sway{
    animation:none;
  }
}

/* ═══ HALLOWEEN WELCOME — ignition opening (2026-10-18, Phase 5) ═══
   Three beats over 3.2s, keyframes only (opacity/transform):
   dark hold → warm pre-glow → ignition bloom → entrance weight. */
.hw-welcome-veil{position:absolute;inset:0;z-index:6;background:#030405;opacity:.97;pointer-events:none;animation:hwVeil 3.2s ease forwards}
.hw-welcome-glow{position:absolute;inset:0;z-index:7;pointer-events:none;background:radial-gradient(circle at 24% 54%,rgba(255,190,90,.55),rgba(232,150,50,.18) 34%,transparent 62%);opacity:0;transform:scale(.82);transform-origin:24% 54%;animation:hwIgnite 3.2s ease forwards}
.hw-welcome-veil.hw-welcome-done,.hw-welcome-glow.hw-welcome-done{transition:opacity .4s ease;opacity:0!important;animation:none}
@keyframes hwVeil{0%{opacity:.97}18%{opacity:.96}34%{opacity:.78}58%{opacity:.30}78%,100%{opacity:0}}
@keyframes hwIgnite{0%,30%{opacity:0;transform:scale(.82)}52%{opacity:.55;transform:scale(.96)}68%{opacity:1;transform:scale(1.06)}100%{opacity:.5;transform:scale(1)}}
body.hw-welcome .hw-countdown{animation:hwCdIn .9s cubic-bezier(.22,.8,.3,1) 2.05s both}
@keyframes hwCdIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.hw-welcome-veil,.hw-welcome-glow{display:none}body.hw-welcome .hw-countdown{animation:none}}


/* ==========================================================================
 * ATMOS PERFORMANCE DIET (owner pass 2026-10-20 — "the website is running
 * glitchy"). Measured on a throttled phone profile, the page idled at
 * ~5 fps and scrolled at ~6.6 fps: the atmosphere stacked seven 175vmax
 * fog banks carrying CSS filter:blur(16–46px), two masked ground mists, a
 * full-viewport mix-blend-mode grain, blurred candle glows and a blurred
 * accent-band fog — every one animating continuously. The gradients are
 * already soft by construction (every stop fades to transparent), so the
 * blur filters and the blend mode are what go; the look — fog, grain,
 * vignette, candlelight — stays. On phones two fog banks retire as well:
 * fog reads as fog with five banks.
 * ========================================================================== */
.hw-fog,
.hw-groundmist,
.hw-groundmist-b,
.hw-candle {
  filter: none;
}
body.season-halloween .xprod-accent::after {
  filter: none;
}
.hw-grain {
  mix-blend-mode: normal;
}
@media (max-width: 700px) {
  .hw-fog-c,
  .hw-fog-e {
    display: none;
  }
}