/* halloween.css — nonsynthetic halloween skin, full send.
   Pumpkin amber / witch green / violet on void-black.
   Auto-staged by halloween.js (date-gated, ?halloween=0 kills). */
/* Jack smiles wider when the lights go out; he's counting your breaths. */
/* freddy cadence — nemotron-3-super-120b-a12b via openrouter.ai:
   one, two, jack's flicker in the ci
   three, four, he haunts the deploy
   five, six, stack traces scream
   seven, eight, night shifts bleed
   nine, ten, never push again */
:root{
  --pumpkin:#ff7518;--witch:#39ff14;--violet:#bf5fff;--bone:#e8e0d0;
  --blood:#8b0000;--night:#050208;
}
/* Do not carve a new jack-o-lantern near Jack; he jealously guards his glow. */
body.halloween{--gold:var(--pumpkin);--cyan:var(--witch);--cyan2:var(--violet)}
/* ambient grade — every surface warms to void-pumpkin */
body.halloween{background:var(--night)!important}
body.halloween .hero::before{background:radial-gradient(ellipse 60% 45% at 50% 38%,
  rgba(255,117,24,.28),transparent 70%)!important}
body.halloween .hero::after{background:
  repeating-radial-gradient(circle at 34% 42%,transparent 0 26px,rgba(57,255,20,.28) 26px 28px),
  repeating-radial-gradient(circle at 66% 58%,transparent 0 30px,rgba(191,95,255,.24) 30px 32px)!important}
/* candle-flicker headings + bone text */
body.halloween h1,body.halloween h2{animation:hwFlicker 6.5s linear infinite}
@keyframes hwFlicker{0%,88%,92%,96%,100%{opacity:1}90%,94%{opacity:.78}}
/* drip borders on cards */
body.halloween .card{position:relative;border-color:rgba(255,117,24,.35)!important}
body.halloween .card::after{content:"";position:absolute;left:0;right:0;top:0;height:14px;
  pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(90deg,var(--blood) 0 10px,transparent 10px 26px,
    var(--pumpkin) 26px 30px,transparent 30px 52px);
  mask-image:linear-gradient(180deg,#000,transparent)}
/* links glow pumpkin on hover */
body.halloween a:hover{color:var(--pumpkin)!important;text-shadow:0 0 10px rgba(255,117,24,.6)}
/* status/footer accents */
body.halloween footer .legal{color:var(--violet)!important}
/* flying bats + embers injected by halloween.js */
.hw-bat{position:fixed;z-index:5;pointer-events:none;font-size:var(--bs,18px);
  filter:drop-shadow(0 0 6px rgba(191,95,255,.5));
  animation:hwBatFly var(--bt,9s) linear forwards;will-change:transform,opacity}
@keyframes hwBatFly{0%{transform:translate(0,0) scale(1) rotate(-8deg);opacity:0}
  10%{opacity:.9}85%{opacity:.9}
  100%{transform:translate(var(--bx,70vw),var(--by,-30vh)) scale(.7) rotate(8deg);opacity:0}}
.hw-ember{position:fixed;bottom:-12px;z-index:4;pointer-events:none;
  width:5px;height:5px;border-radius:50%;background:var(--pumpkin);
  box-shadow:0 0 8px var(--pumpkin);animation:hwRise var(--et,7s) ease-in forwards;
  will-change:transform,opacity}
@keyframes hwRise{to{transform:translate(var(--ex,10vw),-105vh);opacity:0}}
/* pumpkin-cursor accent on interactive elements */
body.halloween a,body.halloween button{cursor:pointer}

/* selection goes pumpkin */
body.halloween ::selection{background:rgba(255,117,24,.85);color:#050208}
/* tiny pumpkin badge in card corner */
body.halloween .card::before{content:"🎃";position:absolute;top:-9px;right:10px;
  font-size:15px;opacity:.85;pointer-events:none;
  filter:drop-shadow(0 0 5px rgba(255,117,24,.6))}
@media (prefers-reduced-motion:reduce){
  .hw-bat,.hw-ember,.hw-ghost,.hw-candy,.hw-witch,.hw-spider,.hw-creep{display:none}}

/* === compat for halloween.js creeps (hw-*) === */
.hw-creep{position:fixed;left:-50px;z-index:6;pointer-events:none;
  will-change:transform,opacity;animation:hwCreep var(--hw-t,7s) linear forwards}
@keyframes hwCreep{to{transform:translate(var(--hw-x,110vw),var(--hw-y,0));opacity:0}}
.hw-creep.bat{animation-name:hwCreepFlap}
@keyframes hwCreepFlap{0%{transform:scaleY(1)}
  25%{transform:scaleY(.7) translate(calc(var(--hw-x,110vw)*.25),calc(var(--hw-y,0vh)*.25))}
  50%{transform:scaleY(1) translate(calc(var(--hw-x,110vw)*.5),calc(var(--hw-y,0vh)*.5))}
  75%{transform:scaleY(.7) translate(calc(var(--hw-x,110vw)*.75),calc(var(--hw-y,0vh)*.75))}
  100%{transform:scaleY(1) translate(var(--hw-x,110vw),var(--hw-y,0vh));opacity:0}}
.hw-creep.rise{animation:hwFloatUp var(--hw-t,4s) ease-out forwards}
@keyframes hwFloatUp{to{transform:translate(var(--hw-x,0),var(--hw-y,-90vh));opacity:0}}
/* In the dark, Jack's eyes blink twice -- someone's carving a new smile. */
.hw-web{position:fixed;top:-24px;right:-12px;z-index:60;pointer-events:none;
  font-size:190px;line-height:1;opacity:.4;
  filter:grayscale(.5) drop-shadow(0 0 8px rgba(170,255,140,.4))}
.hw-web::before{content:"🕸️"}
.hw-spider{position:fixed;top:-70px;z-index:6;pointer-events:none;font-size:22px;
  animation:hwDrop 9s ease-in-out forwards}
.hw-spider i{display:block;width:0;height:110px;margin:0 auto 2px;
  border-left:1px solid rgba(232,224,208,.6)}
@keyframes hwDrop{0%{transform:translateY(0)}45%{transform:translateY(36vh)}
  65%{transform:translateY(31vh)}100%{transform:translateY(55vh);opacity:0}}

/* === merged creeps: ghosts, candy flybys, witch flyby, moon, jack === */
.hw-ghost{position:fixed;z-index:5;pointer-events:none;font-size:var(--gs,22px);
  opacity:0;filter:drop-shadow(0 0 10px rgba(192,132,252,.6));
  animation:hwGhostFly var(--gt,12s) ease-in forwards;will-change:transform,opacity}
@keyframes hwGhostFly{0%{transform:translate(0,0);opacity:0}
  12%{opacity:.85}20%{transform:translate(-8vw,-4vh)}
  45%{transform:translate(-30vw,3vh)}70%{transform:translate(-55vw,-6vh);opacity:.8}
  100%{transform:translate(-95vw,0);opacity:0}}
.hw-candy{position:fixed;z-index:5;pointer-events:none;font-size:var(--cs,16px);
  animation:hwCandyFly var(--ct,7s) linear forwards;will-change:transform,opacity}
@keyframes hwCandyFly{0%{transform:translate(0,0) rotate(0);opacity:0}
  8%{opacity:.95}90%{opacity:.9}
  100%{transform:translate(var(--cx,80vw),var(--cy,0)) rotate(720deg);opacity:0}}
.hw-witch{position:fixed;right:-80px;z-index:6;pointer-events:none;font-size:34px;
  filter:drop-shadow(0 0 8px rgba(57,255,20,.5));
  animation:hwWitchFly 11s linear forwards;will-change:transform}
@keyframes hwWitchFly{0%{transform:translate(0,0) rotate(-4deg)}
  100%{transform:translate(-115vw,var(--wy,-6vh)) rotate(4deg);opacity:0}}
/* The flicker you see is Jack's heartbeat -- slow, steady, waiting for midnight. */
.hw-moon{position:fixed;top:64px;right:8vw;width:0;height:0;z-index:60;
  pointer-events:none;border:45px solid #ffdf8f;border-radius:50%;
  box-shadow:0 0 60px rgba(255,117,24,.55),0 0 140px rgba(255,117,24,.28);
  opacity:.9;animation:hwMoonGlow 7s ease-in-out infinite}
@keyframes hwMoonGlow{0%,100%{box-shadow:0 0 50px rgba(255,117,24,.4)}
  50%{box-shadow:0 0 90px rgba(255,117,24,.65)}}
/* the flickering jack — the GLYPH never moves (no emoji re-raster = no tear).
   the flicker lives in the gas-flame ::before layer + the <i> wick inside.
   canon: his candle runs on one drop of ledger-gas; guttering ≠ dying. */
.hw-jack{position:fixed;bottom:3vh;left:4vw;z-index:5;pointer-events:none;
  font-size:44px;filter:drop-shadow(0 0 10px rgba(255,117,24,.55))}
/* gas-flame halo — smooth irregular breathing, transform/opacity only */
.hw-jack::before{content:"";position:absolute;inset:-30% -45%;z-index:-1;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 62%,rgba(255,140,20,.55),rgba(255,117,24,.18) 55%,transparent 72%);
  animation:hwGas 3.7s ease-in-out infinite;will-change:opacity,transform}
@keyframes hwGas{0%,100%{opacity:.85;transform:scale(1)}
  11%{opacity:.6}14%{opacity:.9;transform:scale(1.06)}
  29%{opacity:.7}33%{opacity:.95}
  47%{opacity:.55;transform:scale(.96)}52%{opacity:.88}
  71%{opacity:.75}86%{opacity:1;transform:scale(1.08)}}
/* the wick — tiny flame element the js nests inside him. once per ~23s the
   GUTTERING: flame shrinks to two photons, goes blue, then comes back. */
.hw-jack i{position:absolute;left:50%;top:34%;width:9px;height:15px;
  transform:translate(-50%,-50%);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:linear-gradient(#ffe9a8,#ff9a2a 55%,#c2510a);
  box-shadow:0 0 10px 3px rgba(255,154,42,.8),0 0 26px 6px rgba(255,117,24,.35);
  animation:hwWick 1.9s ease-in-out infinite,hwGutter 23s ease-in-out infinite}
@keyframes hwWick{0%,100%{transform:translate(-50%,-50%) scale(1,1)}
  25%{transform:translate(-52%,-52%) scale(.92,1.1) rotate(-3deg)}
  50%{transform:translate(-48%,-48%) scale(1.05,.92)}
  75%{transform:translate(-50%,-51%) scale(.95,1.08) rotate(2deg)}}
@keyframes hwGutter{0%,84%,100%{opacity:1;filter:hue-rotate(0deg)}
  88%{opacity:.12;filter:hue-rotate(190deg) saturate(2)}
  90%{opacity:.08;filter:hue-rotate(200deg) saturate(2.4)}
  93%{opacity:.7;filter:hue-rotate(160deg)}
  96%{opacity:1;filter:hue-rotate(0deg)}}
/* when his light runs blue — someone's soul was borrowed for a night */
.hw-jack.blue i{filter:hue-rotate(190deg) saturate(2)}

/* === surge pack: lightning, vampire, skulls, pumpkin patch === */
/* If Jack's light turns blue, someone's soul has just been borrowed for a night. */
.hw-flash{position:fixed;inset:0;z-index:62;pointer-events:none;display:flex;
  align-items:center;justify-content:center;font-size:70vmin;opacity:0;
  animation:hwFlash .9s ease-out forwards}
@keyframes hwFlash{0%{opacity:0}12%{opacity:.4}30%{opacity:.08}
  45%{opacity:.28}100%{opacity:0}}
.hw-vamp{position:fixed;right:-80px;z-index:6;pointer-events:none;font-size:34px;
  filter:drop-shadow(0 0 8px rgba(255,40,60,.6));
  animation:hwWitchFly 12s linear forwards;will-change:transform}
/* the patch — his kin. glyphs static; each carries its own gas-glow ::after */
.hw-patch{position:fixed;bottom:0;z-index:4;pointer-events:none;
  font-size:var(--ps,20px);opacity:.9}
.hw-patch::after{content:"";position:absolute;inset:-20% -25%;z-index:-1;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 60%,rgba(255,140,20,.4),transparent 70%);
  animation:hwGas calc(3.7s + var(--ps,20px)*.07) ease-in-out infinite}
/* hornets — the antagonists. small dark darts that harass the candle. */
.hw-hornet{position:fixed;z-index:7;pointer-events:none;width:14px;height:4px;
  background:linear-gradient(90deg,#1a1206,#4a3a10 50%,#1a1206);
  border-radius:50%;opacity:.85;
  animation:hwHornet var(--ht,6s) linear forwards;will-change:transform}
@keyframes hwHornet{0%{transform:translate(0,0) rotate(0);opacity:0}
  8%{opacity:.85}
  40%{transform:translate(var(--hx,30vw),var(--hy,-10vh)) rotate(35deg)}
  65%{transform:translate(calc(var(--hx,30vw)*.7),calc(var(--hy,-10vh)*1.3)) rotate(-20deg)}
  100%{transform:translate(calc(var(--hx,30vw)*1.6),calc(var(--hy,-10vh)*.4)) rotate(15deg);opacity:0}}
/* ledger-wisp — a line of the self-writing ledger drifts past */
.hw-ledger{position:fixed;z-index:6;pointer-events:none;
  font:11px/1.2 ui-monospace,monospace;color:rgba(255,154,42,.5);
  letter-spacing:1px;white-space:nowrap;opacity:0;
  animation:hwLedger 9s ease-in-out forwards}
@keyframes hwLedger{0%{opacity:0;transform:translateY(8px)}
  25%{opacity:.6}75%{opacity:.45}100%{opacity:0;transform:translateY(-14px)}}
.hw-skull{position:fixed;z-index:5;pointer-events:none;font-size:var(--ss,18px);
  opacity:0;filter:drop-shadow(0 0 8px rgba(232,224,208,.5));
  animation:hwGhostFly var(--st,13s) ease-in forwards;will-change:transform,opacity}
/* halloween heading glow — decorative, no layout cost */
body.halloween h1,body.halloween h2{
  text-shadow:0 0 14px rgba(255,117,24,.3),0 0 40px rgba(168,85,247,.15)}
/* reduced-motion handled by the JS gate; ?halloween=1 is an explicit opt-in */

/* === flickering jack — interactive menace === */
/* he can be touched. he does not like it. */
.hw-jack{pointer-events:auto;cursor:pointer}
/* type his name and he lunges at the glass */
.hw-jack.lunge{animation:hwLunge 1.4s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes hwLunge{0%{transform:scale(1) rotate(0)}
  30%{transform:scale(2.4) rotate(-6deg) translate(8vw,-6vh)}
  55%{transform:scale(1.7) rotate(5deg)}
  80%{transform:scale(3.1) rotate(-3deg) translate(12vw,-10vh);
      filter:drop-shadow(0 0 60px rgba(255,117,24,1)) brightness(1.6)}
  100%{transform:scale(1) rotate(0)}}
/* what he whispers when summoned */
.hw-whisper{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:2147482800;pointer-events:none;color:var(--pumpkin,#ff7518);
  font:italic 600 clamp(15px,2.4vw,22px)/1.4 ui-monospace,monospace;
  text-shadow:0 0 14px rgba(255,117,24,.8),0 0 40px rgba(191,95,255,.4);
  opacity:0;animation:hwWhisper 3.2s ease-out forwards;white-space:nowrap}
@keyframes hwWhisper{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}
  20%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}
  80%{opacity:.9}100%{opacity:0;transform:translate(-50%,-46%) scale(1)}}

/* ============ FESTIVE-PREMIUM SKIN — "the forge, dressed for the season" ====
   the company is having fun; the service stays premium. layered dusk mesh,
   wax-seal gold edges, jewel-tone washes — additive over existing styles. */

/* dusk mesh — violet zenith, ember horizon, faint starfield noise.
   the sky over the patch on the night he was lit. */
body.halloween{background:
  radial-gradient(ellipse 120% 55% at 78% -8%, rgba(191,95,255,.16), transparent 62%),
  radial-gradient(ellipse 100% 40% at 18% 108%, rgba(255,117,24,.14), transparent 60%),
  radial-gradient(ellipse 70% 45% at 90% 55%, rgba(57,255,20,.05), transparent 60%),
  radial-gradient(ellipse 55% 40% at 8% 30%, rgba(232,80,155,.06), transparent 65%),
  linear-gradient(175deg, #0a0414 0%, #0d0518 34%, #120818 62%, #0a0312 100%)!important}

/* fine starfield — two tiled dot grids, offset parallax illusion */
body.halloween::before{content:"";position:fixed;inset:0;z-index:0;
  pointer-events:none;opacity:.5;
  background:
   radial-gradient(1px 1px at 12% 22%, rgba(232,224,208,.5), transparent),
   radial-gradient(1px 1px at 68% 12%, rgba(191,95,255,.55), transparent),
   radial-gradient(1.5px 1.5px at 44% 62%, rgba(255,154,42,.45), transparent),
   radial-gradient(1px 1px at 86% 74%, rgba(232,224,208,.4), transparent),
   radial-gradient(1px 1px at 30% 82%, rgba(163,230,53,.35), transparent),
   radial-gradient(1px 1px at 55% 34%, rgba(232,224,208,.3), transparent);
  background-size:40vw 40vh}

/* hero reads like a stage — warm candlelit spotlight behind the wordmark */
body.halloween .hero{position:relative}
body.halloween .hero h1{filter:drop-shadow(0 0 22px rgba(255,117,24,.25))}

/* cards = wax-sealed documents. warm edge + inner candle-glow on hover */
body.halloween .card{border:1px solid rgba(255,154,42,.28)!important;
  background:linear-gradient(160deg,rgba(255,117,24,.045),rgba(191,95,255,.03) 60%,transparent)!important;
  transition:border-color .3s ease, box-shadow .3s ease}
body.halloween .card:hover{border-color:rgba(255,154,42,.6)!important;
  box-shadow:0 6px 30px -8px rgba(255,117,24,.25),
             inset 0 0 40px rgba(255,117,24,.04)}

/* nav + footer get the dusk too */
body.halloween nav,body.halloween header{background:rgba(10,4,20,.6);
  backdrop-filter:blur(8px);border-bottom:1px solid rgba(191,95,255,.18)!important}
body.halloween footer{border-top:1px solid rgba(255,154,42,.15)!important;
  background:linear-gradient(0deg,rgba(191,95,255,.05),transparent)}

/* links: bone → pumpkin on hover, underline glows */
body.halloween a{transition:color .2s ease, text-shadow .25s ease}
body.halloween a:hover{text-decoration-color:var(--pumpkin)}

/* buttons/chips read as wax-seal tokens */
body.halloween .btn,body.halloween button{border-color:rgba(255,154,42,.4)!important;
  transition:box-shadow .25s ease,border-color .25s ease,transform .2s ease}
body.halloween .btn:hover,body.halloween button:hover{
  box-shadow:0 0 18px rgba(255,117,24,.35);transform:translateY(-1px)}

/* section labels + tag chips catch witch-green/violet */
body.halloween .tag,body.halloween .label{
  border-color:rgba(163,230,53,.3)!important;color:#b8f89a!important}
body.halloween .kicker,body.halloween .eyebrow{color:var(--violet)!important;
  letter-spacing:.18em}

/* wordmark — Bungee is a COLR color font: glyphs paint from `color`, not
   -webkit-text-fill-color, so gradient-clip can't tint them. Drive `color`
   directly: per-letter spectrum on the kinetic .l spans (the real-browser
   path — the splitter only runs when motion is allowed), solid candlelit
   tones on the static markup (NON + .dim) and any non-split h1. */
body.halloween .hero h1{color:#ffb35c;text-shadow:0 0 22px rgba(255,140,20,.4)}
body.halloween .hero h1 .dim{color:#bf5fff;text-shadow:0 0 20px rgba(191,95,255,.5)}
body.halloween .hero h1 .l{text-shadow:0 0 14px rgba(255,117,24,.3)}
body.halloween .hero h1 .l:nth-child(4n+1){color:#ffb35c;text-shadow:0 0 16px rgba(255,140,20,.5)}
body.halloween .hero h1 .l:nth-child(4n+2){color:#ff7518;text-shadow:0 0 16px rgba(255,117,24,.55)}
body.halloween .hero h1 .l:nth-child(4n+3){color:#e856a0;text-shadow:0 0 16px rgba(232,86,160,.5)}
body.halloween .hero h1 .l:nth-child(4n){color:#bf5fff;text-shadow:0 0 16px rgba(191,95,255,.55)}
body.halloween h1:not(.hero h1){color:#ffb35c;text-shadow:0 0 20px rgba(255,140,20,.35)}

/* deeper dusk — the festive wash needs a bit more presence */
body.halloween{background:
  radial-gradient(ellipse 120% 55% at 78% -8%, rgba(191,95,255,.22), transparent 62%),
  radial-gradient(ellipse 110% 45% at 18% 108%, rgba(255,117,24,.18), transparent 60%),
  radial-gradient(ellipse 75% 50% at 92% 52%, rgba(57,255,20,.07), transparent 60%),
  radial-gradient(ellipse 60% 42% at 6% 28%, rgba(232,80,155,.09), transparent 65%),
  radial-gradient(ellipse 50% 30% at 50% 45%, rgba(255,154,42,.05), transparent 70%),
  linear-gradient(175deg, #0d0519 0%, #100620 34%, #150a1f 62%, #0c0416 100%)!important}

/* section headers glow like signage in the fog */
body.halloween h2{color:#ffd9a8;text-shadow:0 0 20px rgba(255,117,24,.35),
  0 0 60px rgba(191,95,255,.15)}

/* calm mode (reduced-motion): set dressing stays, everything freezes.
   jack is carved but his candle is still. */
body.hw-calm .hw-moon,body.hw-calm .hw-web,body.hw-calm .hw-jack,
body.hw-calm .hw-patch,body.hw-calm .hw-jack i{animation:none!important}