/* Northstar Halloween kit styles. Nothing shows unless hw-kit.js adds .hw-on to <html>. */
.hw-layer,.hw-web,.hw-scarecrow,.hw-pumpkin,.hw-spider,.hw-moon,.hw-fog,.hw-bat,.hw-field{display:none}
.hw-on .hw-layer,.hw-on .hw-web,.hw-on .hw-scarecrow,.hw-on .hw-pumpkin,.hw-on .hw-spider,.hw-on .hw-moon,.hw-on .hw-fog,.hw-on .hw-bat,.hw-on .hw-field{display:block}
.hw-layer{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
/* Difference blending keeps the silk light over the navy sections and dark over the white ones. */
.hw-layer.hw-blend{mix-blend-mode:difference}
.hw-layer.hw-blend .hw-web{filter:none}

/* Corner webs */
.hw-web{position:absolute;width:clamp(130px,24vmin,290px);aspect-ratio:1;filter:drop-shadow(0 0 1.5px rgba(159,212,255,.35))}
.hw-web svg{display:block;width:100%;height:100%;overflow:visible}
.hw-tl{top:0;left:0}.hw-tr{top:0;right:0}.hw-bl{bottom:0;left:0}.hw-br{bottom:0;right:0}
.hw-tl svg{transform-origin:0 0}.hw-tr svg{transform-origin:100% 0}.hw-bl svg{transform-origin:0 100%}.hw-br svg{transform-origin:100% 100%}
.hw-web .dw{animation:hw-twinkle 6s ease-in-out infinite}
@keyframes hw-twinkle{0%,100%{opacity:.55}45%{opacity:1}50%{opacity:.4}}

/* Scarecrow */
.hw-scarecrow{position:absolute;width:200px;aspect-ratio:220/330;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.hw-scarecrow svg{display:block;width:100%;height:100%;overflow:visible}
.sc-sway{transform-origin:110px 330px;animation:sc-sway 5.2s ease-in-out infinite alternate}
.sc-flip{transform:scaleX(-1)}
.hw-scarecrow .sc-flip{animation-name:sc-sway-flip}
.sc-head{transform-origin:110px 112px;animation:sc-tilt 4.4s ease-in-out infinite alternate}
.sc-hat{transform-origin:110px 52px;animation:sc-hat 3.1s ease-in-out infinite alternate}
.sc-arm-l{transform-origin:86px 138px;animation:sc-flutter 2.7s ease-in-out infinite alternate}
.sc-arm-r{transform-origin:134px 138px;animation:sc-flutter 2.3s ease-in-out infinite alternate-reverse}
.sc-straw{transform-box:fill-box;transform-origin:50% 0;animation:sc-straw 1.9s ease-in-out infinite alternate}
.sc-eye{transform-box:fill-box;transform-origin:50% 50%;transition:transform .08s}
.sc-blink .sc-eye{transform:scaleY(.08)}
.sc-crow-head{transform-box:fill-box;transform-origin:20% 80%;animation:sc-peck 3.6s ease-in-out infinite}
.sc-waving .sc-arm-r{animation:sc-wave .45s ease-in-out 4 alternate}
.sc-waving .sc-mouth{d:path("M91 99 Q110 120 129 99")}
.sc-waving .sc-crow{animation:sc-crow-hop .5s ease-out 2}
.sc-hop .sc-sway{animation:sc-hop .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes sc-sway{from{transform:rotate(-1.4deg)}to{transform:rotate(1.4deg)}}
@keyframes sc-sway-flip{from{transform:scaleX(-1) rotate(-1.4deg)}to{transform:scaleX(-1) rotate(1.4deg)}}
@keyframes sc-tilt{from{transform:rotate(-4deg)}to{transform:rotate(5deg)}}
@keyframes sc-hat{from{transform:rotate(-2deg) translateY(0)}to{transform:rotate(3deg) translateY(-1.5px)}}
@keyframes sc-flutter{from{transform:rotate(-2.5deg) skewY(-1deg)}to{transform:rotate(2.5deg) skewY(1.5deg)}}
@keyframes sc-straw{from{transform:skewX(-6deg)}to{transform:skewX(6deg)}}
@keyframes sc-peck{0%,62%,100%{transform:rotate(0)}68%{transform:rotate(28deg)}74%{transform:rotate(0)}80%{transform:rotate(22deg)}86%{transform:rotate(-6deg)}}
@keyframes sc-wave{from{transform:rotate(4deg)}to{transform:rotate(-38deg)}}
@keyframes sc-crow-hop{0%,100%{transform:translate(172px,108px)}50%{transform:translate(172px,92px)}}
@keyframes sc-hop{0%{transform:translateY(0)}40%{transform:translateY(-14px) rotate(2deg)}100%{transform:translateY(0)}}

/* Jack-o'-lantern */
.hw-pumpkin{width:74px;aspect-ratio:120/104}
.hw-pumpkin svg{display:block;width:100%;height:100%;overflow:visible}
.hw-pumpkin.lit svg{filter:drop-shadow(0 0 10px rgba(255,170,40,.75)) drop-shadow(0 0 26px rgba(255,120,20,.35))}
.hw-pumpkin.lit .pk-face{animation:pk-flicker 2.4s steps(1) infinite}
@keyframes pk-flicker{0%{opacity:1}12%{opacity:.82}14%{opacity:1}48%{opacity:.9}50%{opacity:1}76%{opacity:.78}79%{opacity:1}}

/* Spider */
.hw-spider{position:fixed;top:0;right:clamp(46px,9vmin,110px);z-index:61;width:52px;pointer-events:none}
.hw-silk{position:absolute;left:50%;top:0;width:1px;margin-left:-.5px;background:linear-gradient(rgba(228,240,255,.15),rgba(228,240,255,.75))}
.hw-spider-body{all:unset;position:absolute;left:0;top:0;width:52px;display:block;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent}
.hw-spider-body:focus-visible{outline:2px solid #9FD4FF;outline-offset:2px;border-radius:50%}
.hw-spider-body svg{display:block;width:52px;height:auto}
.sp-moving .sp-l1,.sp-moving .sp-l3{animation:sp-leg .35s ease-in-out infinite alternate}
.sp-moving .sp-l2,.sp-moving .sp-l4{animation:sp-leg .35s ease-in-out infinite alternate-reverse}
.sp-legs path{transform-box:fill-box;transform-origin:100% 0}
.sp-legs path:nth-child(n+5){transform-origin:0 0}
@keyframes sp-leg{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}

/* Bats */
.hw-bat{position:absolute;left:0;width:56px;will-change:transform}
.hw-bat svg{display:block;width:100%;height:auto;filter:drop-shadow(0 0 6px rgba(255,200,120,.25))}
.bw-l{transform-origin:30px 16px;animation:bw-flap .18s ease-in-out infinite alternate}
.bw-r{transform-origin:34px 16px;animation:bw-flap .18s ease-in-out infinite alternate}
@keyframes bw-flap{from{transform:scaleY(1)}to{transform:scaleY(-.35)}}

/* Harvest moon: soft halo behind, mottled disc, a thin cloud drifting across */
.hw-moon{position:absolute;width:clamp(96px,13vw,200px);aspect-ratio:1;pointer-events:none;animation:hw-moon 9s ease-in-out infinite alternate}
.hw-moon::before{content:"";position:absolute;inset:-85%;border-radius:50%;background:radial-gradient(circle,rgba(255,200,130,.55) 30%,rgba(255,180,100,.3) 38%,rgba(255,160,80,.12) 52%,rgba(255,150,70,.04) 64%,transparent 72%)}
.hw-moon b{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(ellipse 24% 17% at 60% 31%,rgba(178,104,40,.28),transparent 72%),radial-gradient(ellipse 30% 20% at 42% 63%,rgba(170,98,36,.24),transparent 72%),
    radial-gradient(ellipse 14% 12% at 30% 38%,rgba(185,112,46,.22),transparent 72%),radial-gradient(circle at 72% 60%,rgba(190,120,52,.2) 0 5%,transparent 10%),
    radial-gradient(circle at 24% 66%,rgba(255,255,255,.18) 0 3%,transparent 6%),
    radial-gradient(circle at 38% 34%,#FFF3D4 0%,#FFE2A2 32%,#F6BC63 70%,#E2903C 100%);
  box-shadow:0 0 24px 4px rgba(255,205,130,.55),inset -16px -20px 36px rgba(176,92,28,.38),inset 6px 8px 18px rgba(255,250,230,.35)}
.hw-moon::after{content:"";position:absolute;top:56%;left:-40%;width:180%;height:20%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(10,22,42,.8),rgba(10,22,42,.35) 45%,transparent 70%);filter:blur(5px);animation:hw-cloud 46s linear infinite}
@keyframes hw-moon{from{transform:translateY(0)}to{transform:translateY(-10px)}}
@keyframes hw-cloud{from{transform:translateX(-70%)}to{transform:translateX(70%)}}

/* Rolling fog */
.hw-fog{position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none;overflow:hidden;
  -webkit-mask:linear-gradient(transparent,#000 45%);mask:linear-gradient(transparent,#000 45%)}
.hw-fog i{position:absolute;bottom:-20%;left:-50%;width:200%;height:100%;opacity:.5;
  background:radial-gradient(ellipse 18% 40% at 20% 70%,rgba(190,215,240,.32),transparent 70%),radial-gradient(ellipse 22% 36% at 55% 75%,rgba(190,215,240,.26),transparent 70%),radial-gradient(ellipse 16% 30% at 85% 65%,rgba(190,215,240,.3),transparent 70%);
  animation:hw-fog 38s linear infinite}
.hw-fog i:nth-child(2){bottom:-30%;opacity:.4;animation-duration:56s;animation-direction:reverse;transform:scaleX(-1)}
.hw-fog i:nth-child(3){bottom:-40%;opacity:.35;animation-duration:74s}
@keyframes hw-fog{from{translate:0 0}to{translate:25% 0}}

/* Spooky on/off switch */
.hw-toggle{position:fixed;left:14px;bottom:14px;z-index:62;display:flex;align-items:center;gap:.4rem;font:600 .8rem Inter,sans-serif;color:#FFE1B0;background:rgba(14,22,38,.82);border:1px solid rgba(255,180,90,.35);border-radius:99px;padding:.55rem .9rem;min-height:44px;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hw-toggle:hover{border-color:rgba(255,180,90,.7)}
.hw-toggle:focus-visible{outline:2px solid #FFB24A;outline-offset:2px}
html:not(.hw-on) .hw-toggle{color:#C9DDF2;border-color:rgba(159,212,255,.3)}

/* Reduced motion: keep the decorations, drop the movement. */
.hw-still .sc-sway,.hw-still .sc-head,.hw-still .sc-hat,.hw-still .sc-arm,.hw-still .sc-straw,.hw-still .sc-crow-head,.hw-still .hw-fog i,.hw-still .hw-moon,.hw-still .hw-moon::after,.hw-still .pk-face,.hw-still .dw{animation:none!important}
.motion-paused .sc-sway,.motion-paused .sc-head,.motion-paused .sc-hat,.motion-paused .sc-arm,.motion-paused .sc-straw,.motion-paused .sc-crow-head,.motion-paused .hw-fog i,.motion-paused .hw-moon,.motion-paused .hw-moon::after,.motion-paused .dw{animation-play-state:paused}
/* Phones and small tablets: the site's quick-contact bar owns the bottom 66px, so everything sits above it. */
@media (max-width:820px){
  .hw-toggle{bottom:calc(74px + env(safe-area-inset-bottom));left:10px;width:44px;justify-content:center;padding:0;font-size:1.05rem}
  .hw-toggle b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .hw-bl,.hw-br{bottom:calc(66px + env(safe-area-inset-bottom))}
  .hw-spider{right:32vw}  /* clear of the menu button */
}