/* =====================================================================
   SEASONAL THEME: HALLOWEEN (October 2026)
   Loaded only by the "SEASONAL THEME" block in index.html.
   Decorations only: every element is aria-hidden, pointer-events:none
   and painted BEHIND the content (z-index:-1 inside an isolated host),
   so no text, price, tag or button is covered, moved or recoloured.
   Remove the block in index.html to switch it off.
   ===================================================================== */
.sn-hw-host{isolation:isolate}
.sn-hw-host.sn-hw-static{position:relative}
.sn-hw{position:absolute;pointer-events:none;user-select:none;z-index:-1}
.sn-hw img{display:block;width:100%;height:auto}
.sn-hw-clip{inset:0;overflow:hidden;border-radius:inherit}
.sn-hw-clip>.sn-hw{z-index:auto}

/* ---------- webs ---------- */
.sn-hw-web{width:var(--s,230px)}
.sn-hw-tl{top:0;left:0}
.sn-hw-tr{top:0;right:0;transform:scaleX(-1)}
.sn-hw-bl{bottom:0;left:0;transform:scaleY(-1)}
.sn-hw-br{bottom:0;right:0;transform:scale(-1,-1)}
.sn-hw-web.sm{--s:118px}
.sn-hw-web.xs{--s:var(--xs,62px)}
.offer-hero .sn-hw-web{opacity:.7}

/* ---------- hanging spiders ---------- */
.sn-hw-spider{--L:var(--len);top:0;left:calc(var(--x) - 15px);width:30px;height:calc(var(--L) + 34px)}
.sn-hw-spider .thr{position:absolute;left:50%;top:0;width:1px;height:var(--L);background:linear-gradient(rgba(59,47,87,.2),rgba(59,47,87,.65));transform-origin:top;animation:snHwThr var(--t,4.8s) ease-in-out var(--d,0s) infinite alternate}
.sn-hw-spider.lt .thr{background:linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.7))}
.sn-hw-spider img{position:absolute;left:0;top:calc(var(--L) - 6px);width:30px;filter:drop-shadow(0 0 5px rgba(242,140,40,.55));animation:snHwSp var(--t,4.8s) ease-in-out var(--d,0s) infinite alternate}
@keyframes snHwThr{from{transform:scaleY(1)}to{transform:scaleY(.75)}}
@keyframes snHwSp{from{transform:translateY(0) rotate(-5deg)}to{transform:translateY(calc(var(--L) * -.25)) rotate(5deg)}}

/* ---------- flying bats (in the empty top/bottom padding band of each section) ---------- */
.sn-hw-band{left:0;right:0;top:0;height:var(--band,96px);overflow:hidden}
.sn-hw-band.bottom{top:auto;bottom:0}
.sn-hw-bat{position:absolute;top:var(--y);left:-90px;width:var(--w,50px);animation:snHwFly var(--t,18s) linear var(--d,0s) infinite;will-change:transform}
.sn-hw-bat img{filter:drop-shadow(0 0 6px rgba(242,140,40,.5));animation:snHwWave 2.4s ease-in-out infinite alternate}
.sn-hw-bat.rev{left:auto;right:-90px;animation-name:snHwFlyR}
.sn-hw-bat.rev img{transform:scaleX(-1);animation-name:snHwWaveR}
@keyframes snHwFly{to{transform:translateX(calc(100vw + 180px))}}
@keyframes snHwFlyR{to{transform:translateX(calc(-100vw - 180px))}}
@keyframes snHwWave{from{transform:translateY(-8px) rotate(-6deg)}to{transform:translateY(8px) rotate(5deg)}}
@keyframes snHwWaveR{from{transform:scaleX(-1) translateY(-8px) rotate(-6deg)}to{transform:scaleX(-1) translateY(8px) rotate(5deg)}}

/* ---------- ghosts ---------- */
.sn-hw-ghost{width:var(--w,46px);left:var(--x);top:var(--y);opacity:.95;filter:drop-shadow(0 0 10px rgba(107,63,160,.4));animation:snHwGhost 5.5s ease-in-out var(--d,0s) infinite alternate}
@keyframes snHwGhost{from{transform:translate(0,0) rotate(-4deg)}to{transform:translate(10px,-12px) rotate(4deg)}}

/* ---------- jack-o'-lanterns (some with a softly glowing face) ---------- */
.sn-hw-jack{width:var(--w,52px);left:var(--x);bottom:var(--b,8px)}
.sn-hw-jack img{position:relative}
.sn-hw-jack.lit::before{content:"";position:absolute;inset:-35%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,190,70,.55),rgba(242,140,40,.18) 60%,transparent);animation:snHwFlicker 3.2s ease-in-out infinite}
@keyframes snHwFlicker{0%,100%{opacity:.65}20%{opacity:1}35%{opacity:.75}55%{opacity:.95}80%{opacity:.7}}

/* ---------- heading accents (candy corn / little bat beside the kicker) ---------- */
.sn-hw-accent{width:var(--w,20px);left:var(--ax);top:var(--ay);transform:rotate(var(--r,0deg))}

/* ---------- garland along the top of the hero ---------- */
.sn-hw-garland{left:0;right:0;top:0;height:var(--gh,54px);background:url(assets/halloween/garland.svg) repeat-x 0 0/auto 100%;animation:snHwSwing 6s ease-in-out infinite alternate;transform-origin:top}
@keyframes snHwSwing{from{transform:translateY(-1px)}to{transform:translateY(2px)}}

/* ---------- small ribbon in the hero's empty top padding ---------- */
.sn-hw-ribbon{top:clamp(.45rem,1.4vw,1.6rem);left:50%;transform:translateX(-50%);z-index:1;display:flex;align-items:center;gap:.45rem;white-space:nowrap;padding:.22rem .8rem;border-radius:999px;background:linear-gradient(90deg,#2a1d45,#6B3FA0);color:#FFE2C2;font-family:var(--display);font-weight:800;font-size:.74rem;letter-spacing:.04em;box-shadow:0 0 14px rgba(242,140,40,.45)}
.sn-hw-ribbon img{width:16px;height:auto;flex:none}
.sn-hw-ribbon img.bat{width:24px}

/* ---------- phones ---------- */
@media (max-width:760px){
  .sn-hw-web{--s:136px}
  .sn-hw-web.sm{--s:84px}
  .sn-hw-web.xs{--s:var(--xsm,50px)}
  .sn-hw-spider{--L:var(--lm)}
  .sn-hw-band{height:var(--bandm,58px)}
  .sn-hw-bat{width:calc(var(--w,50px) * .78)}
  .sn-hw-jack{width:calc(var(--w,52px) * .75)}
  .sn-hw-ghost{width:calc(var(--w,46px) * .8)}
  .sn-hw-garland{height:34px}
  .sn-hw.d-only{display:none}
  .sn-hw-ribbon{top:.28rem;font-size:.62rem;padding:.12rem .6rem;gap:.35rem}
  .sn-hw-ribbon img{width:13px}
}

.sn-hw-hide{display:none!important}

/* ================= round 3 extras ================= */
/* faint full-page cobweb texture (behind everything in the section, ~15% opacity) */
.sn-hw-tex{inset:0;z-index:-2;opacity:.16;background:url(assets/halloween/web-tile-dark.svg) 0 0/240px 260px repeat}
.sn-hw-tex.lt{opacity:.14;background-image:url(assets/halloween/web-tile-light.svg)}
/* fog wisps drifting along the bottom of each section */
.sn-hw-fog{left:0;right:0;bottom:0;height:var(--fh,110px);overflow:hidden;opacity:.5}
.sn-hw-fog i{position:absolute;left:0;bottom:-10px;width:200%;height:100%;background:radial-gradient(90px 34px at 60px 70%,rgba(190,180,225,.75),transparent 70%) repeat-x 0 0/360px 100%,radial-gradient(130px 40px at 230px 85%,rgba(170,160,210,.6),transparent 70%) repeat-x 0 0/360px 100%;animation:snHwFog 46s linear var(--fd,0s) infinite}
.sn-hw-fog i+i{opacity:.7;bottom:-22px;animation-duration:64s;animation-direction:reverse}
.sn-hw-fog.lt{opacity:.28}
@keyframes snHwFog{to{transform:translateX(-50%)}}
/* faint bats crossing behind text: phones only */
.sn-hw-faintbats{inset:0;overflow:hidden;display:none}
.sn-hw-faintbats .sn-hw-bat{opacity:.22}
/* dropping spider */
.sn-hw-drop .thr{transform:scaleY(0);transition:transform 1.8s cubic-bezier(.3,1.25,.5,1)}
.sn-hw-drop img{transform:translateY(calc(var(--L) * -1));transition:transform 1.8s cubic-bezier(.3,1.25,.5,1)}
.sn-hw-drop .thr,.sn-hw-drop img{animation:none}
.sn-hw-in .sn-hw-drop .thr{transform:none}
.sn-hw-in .sn-hw-drop img{transform:none;animation:snHwSp 4.6s ease-in-out 1.9s infinite alternate}
/* hero sky: moon + drifting clouds (in the empty area above the photo) */
.sn-hw-sky{z-index:-2;top:0;left:56%;right:0;height:var(--skyh,150px);overflow:hidden}
.sn-hw-sky .moon{position:absolute;top:var(--mt,30px);left:50%;margin-left:calc(var(--mw,130px) / -2);width:var(--mw,130px);animation:snHwMoon 9s ease-in-out infinite alternate}
.sn-hw-sky .cloud{position:absolute;width:var(--cw,110px);top:var(--cy,40px);left:-30%;opacity:.85;animation:snHwCloud var(--ct,38s) linear var(--cd,0s) infinite}
.sn-hw-sky .c1{--cy:34px;--cw:120px;--ct:40s;--cd:-6s}
.sn-hw-sky .c2{--cy:78px;--cw:90px;--ct:52s;--cd:-30s}
.sn-hw-sky .c3{--cy:12px;--cw:70px;--ct:60s;--cd:-44s;opacity:.6}
@keyframes snHwCloud{to{transform:translateX(220%)}}
@keyframes snHwMoon{to{transform:translateY(-5px) scale(1.02)}}
.sn-hw-sky .cloud{will-change:transform}
/* cauldron (bubbling) + witch hat */
.sn-hw-cauldron{width:var(--w,96px);left:var(--x);bottom:8px;filter:drop-shadow(0 0 12px rgba(124,216,106,.35))}
.sn-hw-cauldron b{position:absolute;left:var(--bx,40%);top:22%;width:9px;height:9px;border-radius:50%;background:#9BEA7F;opacity:0;animation:snHwBub 2.6s ease-out var(--bd,0s) infinite}
.sn-hw-cauldron b:nth-of-type(2){--bx:55%;--bd:-.9s;width:7px;height:7px}
.sn-hw-cauldron b:nth-of-type(3){--bx:66%;--bd:-1.7s;width:6px;height:6px}
@keyframes snHwBub{0%{opacity:0;transform:translateY(0)}20%{opacity:.9}100%{opacity:0;transform:translateY(-34px) scale(1.4)}}
.sn-hw-hat{width:var(--w,64px);left:var(--x);top:4px;transform:rotate(-8deg);filter:drop-shadow(0 0 8px rgba(242,140,40,.4))}
@media (max-width:760px){
  .sn-hw-tex{opacity:.19;background-size:200px 217px}
  .sn-hw-tex.lt{opacity:.18}
  .sn-hw-faintbats{display:block}
  .sn-hw-fog{--fh:80px}
  .sn-hw-sky{left:auto;right:0;width:78%;height:260px;opacity:.34}
  .sn-hw-sky .moon{left:auto;right:4%;margin-left:0;top:120px;width:120px}
  .sn-hw-jack{width:calc(var(--w,52px) * .9)}
  .sn-hw-cauldron{width:74px}
  .sn-hw-hat{width:48px}
}

/* pause animations while a section is off-screen (smooth on phones) */
.sn-hw-host.sn-hw-off .sn-hw,.sn-hw-host.sn-hw-off .sn-hw *,.sn-hw-host.sn-hw-off .sn-hw::before,.sn-hw-host.sn-hw-off .sn-hw i{animation-play-state:paused}

/* Reduced motion: everything stands still (overrides the site-wide rule) */
@media (prefers-reduced-motion:reduce){
  .sn-hw,.sn-hw *,.sn-hw::before{animation:none!important}
  .sn-hw-bat,.sn-hw-bat.rev{left:var(--sx,10%);right:auto;transform:none}
  .sn-hw-drop .thr,.sn-hw-drop img{transform:none;transition:none}
  .sn-hw-sky .cloud{left:var(--cl,10%)}.sn-hw-sky .c2{--cl:45%}.sn-hw-sky .c3{--cl:70%}
}

.sn-hw-sky .moon img,.sn-hw-sky .cloud img{display:block;width:100%;height:auto}
@media (min-width:761px){.sn-hw-sky{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);mask-image:linear-gradient(90deg,transparent,#000 36px)}}

/* ===================== HALLOWEEN INTRO (horror version, orange + black) =====================
   Only restyles the existing intro: same markup, same assembly sequence and timing (fixture 0.45s,
   abutment 1.6s, crown 2.25s, click 2.95s, logo 3.75s, hand-off 5.2s), same skip button,
   once-per-session gate, ?intro=1 and reduced-motion behavior (the gate never shows it under reduced motion).
   Removing halloween.css restores the normal intro. */
#intro{background:
  url(assets/halloween/intro-web-tl.svg) left top/clamp(120px,24vw,230px) no-repeat,
  url(assets/halloween/intro-web-tr.svg) right top/clamp(120px,24vw,230px) no-repeat,
  url(assets/halloween/intro-web-bl.svg) left bottom/clamp(90px,16vw,170px) no-repeat,
  url(assets/halloween/intro-web-br.svg) right bottom/clamp(90px,16vw,170px) no-repeat,
  radial-gradient(800px 560px at 50% 42%,#2a1203 0,#120701 45%,#000 100%);color:#fff}
/* lightning: full-screen flash + a bolt, once before the fixture drops and again as the crown clicks on */
#intro::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:url(assets/halloween/bolt.svg) 16% 0/auto 62% no-repeat,radial-gradient(120% 90% at 30% 0,rgba(255,236,200,.95),rgba(255,138,31,.35) 45%,rgba(0,0,0,0) 80%);
  animation:snHwBolt 5.2s linear both}
@keyframes snHwBolt{0%,5%{opacity:0}6%{opacity:.95}7%{opacity:.15}8%{opacity:.8}10%{opacity:0}
  55%{opacity:0}56.5%{opacity:.9}57.5%{opacity:.2}58.5%{opacity:.7}61%{opacity:0}100%{opacity:0}}
/* low fog rolling across the bottom */
#intro::after{content:"";position:absolute;left:-30%;right:-30%;bottom:-6%;height:46%;z-index:1;pointer-events:none;opacity:.75;
  background:radial-gradient(40% 55% at 20% 70%,rgba(255,150,60,.16),transparent 70%),radial-gradient(35% 50% at 55% 80%,rgba(220,210,200,.14),transparent 70%),
  radial-gradient(40% 60% at 85% 70%,rgba(255,170,90,.13),transparent 70%),linear-gradient(0deg,rgba(40,20,8,.75),transparent);
  filter:blur(6px);animation:snHwIntroFog 6s ease-in-out infinite alternate}
@keyframes snHwIntroFog{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
#intro .intro-ui{z-index:4}
/* orange glow that flickers like candlelight */
#intro .intro-glow{background:radial-gradient(circle,rgba(255,122,24,.42),rgba(255,90,0,.12) 45%,transparent 68%);
  animation:glow 4.6s ease-in-out both,snHwFlicker 1.7s steps(1,end) .2s infinite}
@keyframes snHwFlicker{0%{filter:brightness(1)}12%{filter:brightness(.55)}16%{filter:brightness(1.15)}40%{filter:brightness(.9)}46%{filter:brightness(.4)}50%{filter:brightness(1.1)}78%{filter:brightness(.8)}}
/* spooky glow on the implant parts while they assemble, a pulse on the click, then fade with the implant */
#intro .implant{animation:implantOut .55s 3.4s cubic-bezier(.4,0,.2,1) both,snHwPartsGlow 3.4s .4s ease-in-out both}
@keyframes snHwPartsGlow{0%{filter:drop-shadow(0 0 0 rgba(255,122,24,0))}30%{filter:drop-shadow(0 0 10px rgba(255,122,24,.75)) drop-shadow(0 0 26px rgba(255,80,0,.35))}
  45%{filter:drop-shadow(0 0 5px rgba(255,122,24,.5))}75%{filter:drop-shadow(0 0 22px rgba(255,140,40,.95)) drop-shadow(0 0 44px rgba(255,80,0,.5))}
  100%{filter:drop-shadow(0 0 12px rgba(255,122,24,.7)) drop-shadow(0 0 30px rgba(255,80,0,.3))}}
#intro .smile-line{stroke:#FF8A1F;filter:drop-shadow(0 0 6px #FF7A18)}
#intro .click-ring{stroke:#FF8A1F;stroke-width:3}
#intro .jaw path:first-child{stroke:rgba(255,170,90,.4)}
/* creepy shake as the crown clicks on (2.95s) */
#intro .intro-stage{animation:snHwShake .55s 2.95s linear both}
@keyframes snHwShake{0%{transform:none}10%{transform:translate(-5px,2px) rotate(-.6deg)}20%{transform:translate(6px,-3px) rotate(.7deg)}30%{transform:translate(-4px,3px) rotate(-.4deg)}
  45%{transform:translate(4px,-1px) rotate(.4deg)}60%{transform:translate(-2px,1px)}80%{transform:translate(1px,0)}100%{transform:none}}
/* logo arrives with an orange glow */
#intro .logo-type .logo-full{filter:drop-shadow(0 0 10px rgba(255,122,24,.75)) drop-shadow(0 0 28px rgba(255,90,0,.4))}
#intro .logo-type .sweep{filter:brightness(1.4) sepia(1) saturate(6) hue-rotate(-12deg) drop-shadow(0 0 8px rgba(255,138,31,.95))}
#intro .logo-sub{color:#FF9A3C;text-shadow:0 0 10px rgba(255,122,24,.6)}
#intro .intro-steps span{color:#FFD9B0}
#intro .intro-steps span::before{background:#FF8A1F;box-shadow:0 0 8px #FF7A18}
#intro .intro-skip{border-color:rgba(255,138,31,.55);background:rgba(255,122,24,.1)}
#intro .intro-skip:hover{background:rgba(255,122,24,.22)}
@media (prefers-reduced-motion:reduce){#intro::before,#intro::after,#intro .intro-glow,#intro .intro-stage{animation:none}#intro::before{opacity:0}}