/* KOLAS Halloween 2026 — served by mu-plugin kolas-halloween.php on every front-end page.
   Source: homepage-build/dist-halloween/. Off: wp option update kolas_halloween_on 0. Ends itself 2026-11-02 00:00 PT.
   One switch on <html>: data-hw="day" | "night", set by halloween.js from the real Sacramento sunset.
   html.hw-home = the homepage: only there does the page itself go to night (the other templates
   hard-code colours that were never checked on a dark ground).
   Every layer is absolute/fixed + pointer-events:none (the spider alone takes a tap), so it never
   moves layout. Style rule: silhouettes and line work only. No faces, no cartoons, no candy.
   Night tokens, contrast on --surface #1B1030: ink 15.65 · ink-2 11.01 · muted 7.01 · link 9.83 ·
   gold 9.09 · open 9.69 · closed 8.11 · edge 3.98 (1.4.11 needs 3). */

@property --hw-r{syntax:'<length>';inherits:true;initial-value:0px}

/* ---------- 1. Sunset switch: the light page goes to night ---------- */
html.hw-home[data-hw="night"]{
  --ground:#120A22; --surface:#1B1030; --sunken:#160C29; --chip:#24153F;
  --ink:#F1EDF8; --ink-2:#CFC6E0; --muted:#A79CBF;
  --border:rgba(255,255,255,.10); --hair:rgba(255,255,255,.07); --edge:#7D6F9C;
  --link:#C9B6F0; --soft:#C9B6F0;
  --deep:#0D0619; --deep-2:#1A0D33;
  --gold-struct:#D8B36A; --gold-text:#D8B36A;
  --open:#5FD39A; --closed:#FF8F75;
  color-scheme:dark;
}
html.hw-home[data-hw="night"] body{background:var(--ground)}
html.hw-home[data-hw="night"] .btn--brand{box-shadow:inset 0 0 0 1px rgba(201,182,240,.38)}
html.hw-home[data-hw="night"] .faq__i summary:hover,html.hw-home[data-hw="night"] .faq__i summary:focus-visible{color:var(--link);background:rgba(201,182,240,.06)}
html.hw-home[data-hw="night"] .faq__i summary:hover::after,html.hw-home[data-hw="night"] .faq__i summary:focus-visible::after{border-color:var(--link)}
html.hw-home[data-hw="night"] .ldg__i:hover .ldg__b b,html.hw-home[data-hw="night"] .post__b .lbl{color:var(--link)}
@media(hover:hover){
  html.hw-home[data-hw="night"] .who__n a:hover,
  html.hw-home[data-hw="night"] .pick__o:hover{background:var(--chip)}
}
html.hw-home[data-hw="night"] img{filter:brightness(.92)}
html.hw-home[data-hw="night"] .mark img,html.hw-home[data-hw="night"] .bw__c img{filter:none}
/* Deal photos with a white ground are multiplied onto --ground; at night that ground is #120A22, so the photo went black (Bogdan 2026-10-30). Show the photo as it is. */
html.hw-home[data-hw="night"] .ldg__pic--photo{background:transparent}
html.hw-home[data-hw="night"] .ldg__pic--photo img{mix-blend-mode:normal;border-radius:14px}
.bwall,.ftr,.kp-hero,.jb-hero{position:relative}   /* .hero__bg and .bh-hero are already positioned */

/* ---------- 2. Candle line ---------- */
.hw-candle{position:fixed;left:0;top:0;width:100%;height:3px;z-index:95;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(var(--hw-left,1));
  background:linear-gradient(90deg,rgba(216,179,106,.15),var(--gold,#D8B36A) 92%,#FFE7B0)}
.hw-flame{position:fixed;top:-5px;left:0;width:12px;height:12px;z-index:96;pointer-events:none;
  border-radius:50%;transform:translateX(calc(var(--hw-left,1) * 100vw - 8px));
  background:radial-gradient(circle,#FFF4D6 0 18%,#F5C66A 35%,rgba(245,158,66,0) 70%);
  animation:hw-flicker 2.4s steps(1,end) infinite}
@keyframes hw-flicker{0%{opacity:1}23%{opacity:.82}31%{opacity:1}58%{opacity:.9}74%{opacity:.76}81%{opacity:1}}

/* ---------- 3. Low fog, night only ---------- */
.hw-fog{position:fixed;left:0;right:0;bottom:0;height:48vh;z-index:85;pointer-events:none;
  overflow:hidden;opacity:0;transition:opacity 1.2s var(--ease,cubic-bezier(.2,0,0,1));
  -webkit-mask-image:linear-gradient(to top,#000 0,#000 45%,transparent 100%);
          mask-image:linear-gradient(to top,#000 0,#000 45%,transparent 100%)}
html.hw-home[data-hw="night"] .hw-fog{opacity:1}
html[data-hw-fog="off"] .hw-fog{opacity:0}
.hw-fog::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(214,204,236,.16),rgba(214,204,236,0) 55%)}
.hw-fog i{position:absolute;top:0;bottom:0;left:0;width:200%;will-change:transform;
  background:
    radial-gradient(22% 30% at 12% 62%,rgba(214,204,236,.30),rgba(214,204,236,0)),
    radial-gradient(18% 26% at 34% 70%,rgba(214,204,236,.24),rgba(214,204,236,0)),
    radial-gradient(24% 30% at 62% 64%,rgba(214,204,236,.28),rgba(214,204,236,0)),
    radial-gradient(18% 26% at 86% 70%,rgba(214,204,236,.22),rgba(214,204,236,0));
  animation:hw-drift 70s linear infinite}
.hw-fog i+i{transform:translateY(12%);opacity:.8;animation-duration:110s;animation-direction:reverse}
@keyframes hw-drift{to{translate:-50% 0}}

/* ---------- 4. The real moon in the hero sky ---------- */
.hw-moon{display:block;width:100%;height:100%}
.hw-moon .dk{fill:rgba(255,255,255,.06)}
.hw-moon .lt{fill:#F5D99A}
.hw-sky{position:absolute;z-index:1;top:22px;right:var(--gutter,20px);width:30px;height:30px;opacity:.55;
  transition:opacity 1.2s var(--ease,cubic-bezier(.2,0,0,1))}
html[data-hw="night"] .hw-sky{opacity:1}
html[data-hw="night"] .hw-sky .hw-moon{filter:drop-shadow(0 0 14px rgba(245,217,154,.6)) drop-shadow(0 0 40px rgba(245,217,154,.25))}
@media(min-width:768px){.hw-sky{top:6%;right:auto;left:46%;width:56px;height:56px}}

/* ---------- 5. Cobwebs: thin line work, spun out from the corner once ---------- */
.hw-web{position:absolute;z-index:1;pointer-events:none;width:var(--s,130px);height:var(--s,130px);
  clip-path:circle(0 at 0 0)}
.hw-web.is-spun{clip-path:circle(150% at 0 0);transition:clip-path 1.6s cubic-bezier(.3,.1,.3,1)}
.hw-web--tl{top:0;left:0}
.hw-web--tr{top:0;right:0;transform:scaleX(-1)}
.hw-web path{fill:none;stroke:rgba(232,226,248,.42);stroke-width:1;vector-effect:non-scaling-stroke}
.hw-web path.sp{stroke:rgba(232,226,248,.55)}
.hero .hw-web{--s:140px}
.bwall .hw-web{--s:110px}
.ftr .hw-web{--s:120px}
.hw-web--card{--s:64px!important}
.hw-web--page{--s:120px!important}
.hw-web--ink path{stroke:rgba(64,28,123,.26)}
.hw-web--ink path.sp{stroke:rgba(64,28,123,.36)}
@media(min-width:768px){.hero .hw-web{--s:260px}.bwall .hw-web{--s:200px}.ftr .hw-web{--s:180px}.hw-web--card{--s:96px!important}.hw-web--page{--s:220px!important}}

/* ---------- 6. The spider: hangs from the top, lowers as you read, tap and it climbs away ---------- */
.hw-spider{position:fixed;top:0;right:14px;z-index:94;width:0;height:0;pointer-events:none;
  transform-origin:0 0;animation:hw-sway 6s ease-in-out infinite}
.hw-thread{position:absolute;top:0;left:0;width:1px;height:100px;transform-origin:0 0;
  transform:scaleY(calc(var(--hw-drop,0) / 100));background:rgba(232,226,248,.55);
  transition:transform .9s cubic-bezier(.3,1.4,.5,1)}
.hw-bug{position:absolute;top:0;left:-20px;width:40px;height:40px;padding:0;border:0;background:none;
  pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transform:translateY(calc(var(--hw-drop,0) * 1px - 8px));transition:transform .9s cubic-bezier(.3,1.4,.5,1)}
/* A third-party sheet paints every bare button (border/background #c36 on hover and focus). */
.hw-spider .hw-bug,.hw-spider .hw-bug:hover,.hw-spider .hw-bug:focus,.hw-spider .hw-bug:active{
  border:0!important;background:none!important;box-shadow:none!important;padding:0!important;margin:0!important;
  width:40px!important;height:40px!important;min-width:0!important;min-height:0!important;border-radius:50%!important;
  box-sizing:border-box!important;color:inherit!important}
.hw-bug svg{width:100%;height:100%;overflow:visible}
.hw-spi .b{fill:#0B0614;stroke:rgba(216,204,240,.75);stroke-width:.6}
.hw-spi .l{fill:none;stroke:#0B0614;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
html[data-hw="night"] .hw-spi .l{stroke:#8A7DAE}
html[data-hw="night"] .hw-spi .b{fill:#241A38;stroke:rgba(232,224,250,.95);stroke-width:.8}
.hw-bug:focus-visible{outline:2px solid var(--gold,#D8B36A);outline-offset:2px;border-radius:50%}
.hw-spider.is-gone .hw-thread,.hw-spider.is-gone .hw-bug{transition-duration:.5s;transition-timing-function:cubic-bezier(.5,0,.8,.4)}
 /* card spiders: drop in when the card scrolls into view, climb back up when it leaves */
.hw-hang{position:absolute;top:0;left:var(--x,72%);z-index:2;width:0;height:0;pointer-events:none}
.hw-hang i{position:absolute;top:0;left:0;width:1px;height:100px;background:rgba(232,226,248,.6);transform-origin:0 0;
  transform:scaleY(calc(var(--d,0) / 100));transition:transform 1.1s cubic-bezier(.3,1.35,.5,1)}
.hw-hang b{position:absolute;top:0;left:-13px;width:26px;height:26px;
  transform:translateY(calc(var(--d,0) * 1px - 6px));transition:transform 1.1s cubic-bezier(.3,1.35,.5,1)}
.hw-hang svg{width:100%;height:100%;overflow:visible;animation:hw-bob 2.6s ease-in-out infinite alternate}
.hw-hang.is-up i,.hw-hang.is-up b{transition-duration:.6s;transition-timing-function:cubic-bezier(.5,0,.8,.4)}
@keyframes hw-bob{to{transform:translateY(5px) rotate(4deg)}}
@keyframes hw-sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}

/* ---------- 7. Bats: one flight across the moon, after the lights come up ---------- */
.hw-bats{position:fixed;inset:0;z-index:93;pointer-events:none;overflow:hidden}
.hw-bat{position:absolute;left:0;top:0;width:var(--w,28px);height:calc(var(--w,28px) / 2);opacity:0}
.hw-bat svg{display:block;width:100%;height:100%;fill:#08040F;animation:hw-flap .16s ease-in-out infinite alternate;transform-origin:50% 45%}
html[data-hw="night"] .hw-bat svg{fill:#05020A;filter:drop-shadow(0 0 1px rgba(245,217,154,.35))}
@keyframes hw-flap{from{transform:scaleY(1)}to{transform:scaleY(.3)}}

/* ---------- 8. The pumpkin: the real pinwheel, carved, lit at night ---------- */
.hw-pump{position:absolute;z-index:1;right:var(--gutter,20px);top:28px;width:84px;height:72px;pointer-events:none}
@media(min-width:768px){.hw-pump{width:124px;height:106px;top:40px}}
.hw-pump svg{position:absolute;inset:0;width:100%;height:100%}
.hw-pump__cut{position:absolute;left:50%;top:56%;width:44%;aspect-ratio:1;transform:translate(-50%,-50%);
  -webkit-mask:url(pin.webp) center/contain no-repeat;mask:url(pin.webp) center/contain no-repeat;
  background:#2A1206}
html[data-hw="night"] .hw-pump__cut{background:radial-gradient(circle,#FFF1C2 0,#FFC860 45%,#F07D1E 100%);
  animation:hw-flicker 2.8s steps(1,end) infinite}
html[data-hw="night"] .hw-pump::after{content:"";position:absolute;left:-30%;right:-30%;bottom:-24%;height:60%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(245,140,50,.30),transparent 70%);animation:hw-flicker 2.8s steps(1,end) infinite}

/* ---------- 9. Lights-out intro: dark page, a flashlight finds the moon, the lights come up ---------- */
.hw-dark{position:fixed;inset:0;z-index:97;pointer-events:none;opacity:0;visibility:hidden;
  background:radial-gradient(circle var(--hw-r) at var(--hw-x,50%) var(--hw-y,45%),
    rgba(6,3,12,0) 0,rgba(6,3,12,0) 55%,rgba(6,3,12,.8) 80%,rgba(6,3,12,.975) 100%)}
html[data-hw-intro] .hw-dark{opacity:1;visibility:visible}
html[data-hw-intro="end"] .hw-dark{opacity:0;transition:opacity .45s var(--ease,cubic-bezier(.2,0,0,1))}
html[data-hw-intro] .bar{z-index:99}   /* the order bar never goes dark */
/* Before halloween.js runs: a plain cover, set by boot.js. It lifts itself after 3.5 s in any case. */
html[data-hw-intro="pending"]::after{content:"";position:fixed;inset:0;z-index:97;pointer-events:none;
  background:rgba(6,3,12,.975);animation:hw-lift .4s 3.5s forwards}
@keyframes hw-lift{to{opacity:0;visibility:hidden}}

/* ---------- Motion: off means off ---------- */
@media (prefers-reduced-motion:reduce){
  .hw-fog i,.hw-flame,.hw-spider,.hw-bat svg,.hw-hang svg,.hw-pump__cut,.hw-pump::after{animation:none!important}
  .hw-thread,.hw-bug,.hw-hang i,.hw-hang b,.hw-web.is-spun{transition:none}
}