/* halloween.css : Finotive Halloween theme for the v4 dashboard, styles. Goes with halloween.js.
   Everything sits under html.hw, so with the theme off the dashboard looks exactly as before.
   Palette: violet surfaces (recoloured live by halloween.js), ember #ff8a2b in place of the brand mint, candle gold #f6c27a.
   Type: Pirata One and Cinzel (bunny.net, loaded by halloween.js) for the page title and the intro.
   Images: img/logo-word.svg, img/logo-mark.svg, img/streaks.svg next to this file. */
html.hw{--hw-ember:#ff8a2b;--hw-gold:#f6c27a;--hw-moon:#f3e6c4;--hw-violet:#5b2a8f;color-scheme:dark}
/* the brand mint tokens turn ember. halloween.js also swaps them in the stylesheets, but it cannot read a stylesheet served
   from another origin (the Vite dev server), and it misses colours written as oklab or space-separated rgb */
html.hw{--color-v4-brand:#ff8a2b;--color-v4-brand-disabled:#8a4513;--color-v4-loading:#f07a1f;--livewire-progress-bar-color:#ff8a2b;
  --color-primary-400:#ffa75c;--color-primary-600:#ff8a2b;--color-primary-650:#c9621a;--color-primary-700:#e8761f}
/* the warm grey surface tokens turn violet, the same values halloween.js's violet() gives them */
html.hw{--color-v4-bg:#1c0c2d;--color-v4-card-top:#2b1445;--color-v4-card-mid:#24103a;--color-v4-card-bottom:#200e33;
  --color-v4-card-top-hover:#31174e;--color-v4-card-mid-hover:#2a1343;--color-v4-card-bottom-hover:#26113d;
  --color-v4-inset-top:#321750;--color-v4-inset-bottom:#2b1445;--color-v4-input:#3f1d63;--color-v4-tip:#2d1447;
  --color-v4-panel-2:#31164d;--color-v4-sb-accent:#3b1b5d;--color-v4-hover:#371956;--color-v4-menu:#25113b;--color-v4-tip-banner:#411e66}
/* these utilities write their greys in oklab, which halloween.js does not swap; Tailwind layers its utilities, so every state is restated */
html.hw .v4-choice{background:linear-gradient(180deg,#351853,#30164c) padding-box,linear-gradient(180deg,rgb(255 255 255 / 10%),rgb(255 255 255 / 3%)) border-box}
@media (hover:hover){html.hw .v4-choice:hover:not([role="radio"][aria-checked="true"],[aria-disabled="true"]){
  background:linear-gradient(180deg,#351853,#30164c) padding-box,linear-gradient(180deg,rgb(255 255 255 / 18%),rgb(255 255 255 / 6%)) border-box}}
html.hw .v4-choice[role="radio"][aria-checked="true"],html.hw .v4-choice[data-checkable]:has(input:checked){
  background:linear-gradient(180deg,#3c1c5f,#341852) padding-box,linear-gradient(180deg,rgb(241 239 235 / 60%),rgb(241 239 235 / 25%)) border-box}
html.hw .v4-switcher{background:linear-gradient(180deg,#341852,#2e1549) padding-box,linear-gradient(180deg,rgb(255 255 255 / 16%),rgb(255 255 255 / 5%)) border-box}
html.hw .v4-inset-open{background:linear-gradient(180deg,var(--color-v4-inset-top),var(--color-v4-inset-bottom)) padding-box,linear-gradient(180deg,rgb(255 138 43 / 70%),rgb(255 138 43 / 20%)) border-box}
html.hw .v4-raised-brand{
  background:linear-gradient(180deg,var(--color-v4-card-top) 0%,var(--color-v4-card-mid) 55%,var(--color-v4-card-bottom) 100%) padding-box,
    linear-gradient(180deg,rgb(255 138 43 / 75%) 0%,rgb(255 138 43 / 35%) 45%,rgb(255 138 43 / 12%) 100%) border-box;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / 5%),0 0 0 4px rgb(255 138 43 / 5%),0 22px 44px -26px rgb(255 138 43 / 35%)}
/* brand buttons get the glowing ember gradient of the Halloween banner's Claim button; dots, bars and disabled buttons stay flat */
html.hw :is(a,button).bg-v4-brand:not([data-promo-carousel] button,:disabled,[aria-disabled="true"]),html.hw .v4-press-icon.bg-v4-brand{
  border-color:rgb(255 196 120 / 55%);background-image:linear-gradient(155.6deg,#ffd166 0%,#ff9a3c 55%,#ff6a1a 100%);color:#1a0d04;
  box-shadow:inset 0 -2px 0 rgb(120 40 0 / 35%),inset 0 1px 0 rgb(255 255 255 / 35%),0 8px 18px -6px rgb(255 138 43 / 60%)}
html.hw{background:#0b0614}
html.hw body{background:transparent !important}   /* the night sits behind the body: if the body paints, it hides it */
html.hw-prep body{opacity:0}
html.hw body{transition:opacity .12s ease}

/* ======================= the night behind the whole dashboard, drawn by halloween.js ======================= */
#hwNight{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:#0b0614;will-change:transform;transform:translateZ(0);contain:strict}   /* its own layer: steady while the page scrolls */
html:not(.hw) #hwNight{display:none}
#hwNight .hw-ground{position:absolute;inset:0;width:100%;height:100%;display:block}
/* the light smoke, two tiles wide and slid by one tile: s2 is a different cloud drifting the other way, so the two layers churn */
#hwNight .hw-smoke{position:absolute;top:0;left:0;width:200%;height:100%;background-size:50% 100%;background-repeat:repeat-x;will-change:transform;animation:hw-smoke 60s linear infinite}
#hwNight .hw-smoke.s1{opacity:.16}
#hwNight .hw-smoke.s2{opacity:.1;animation-duration:95s;animation-direction:reverse}
@keyframes hw-smoke{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hw-deco{position:absolute;pointer-events:none;aspect-ratio:1}
.hw-deco > svg{display:block;width:100%;height:100%;overflow:visible}
.hw-deco{filter:brightness(.58) saturate(.78)}
.hw-deco.tl{top:0;left:var(--hw-gut,0px);width:clamp(220px,34vmax,620px)}
.hw-deco.tr{top:0;right:0;width:clamp(240px,40vmax,720px)}
.hw-deco.bl{bottom:0;left:var(--hw-gut,0px);width:clamp(200px,30vmax,560px)}
.hw-deco.br{bottom:0;right:0;width:clamp(180px,26vmax,480px)}
.hw-deco .wb{fill:none;stroke:rgba(236,140,96,.38);stroke-width:1;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 2px rgba(255,110,50,.3))}
.hw-deco .dw{fill:rgba(255,214,170,.45)}
.hw-deco .tw{fill:none;stroke:#0e0317;stroke-linecap:round;filter:drop-shadow(0 0 1px rgba(190,150,240,.25))}
.hw-deco .vn{fill:none;stroke:#1d1608;stroke-width:3;stroke-linecap:round}
.hw-deco .vn.tn{stroke-width:1.6}
.hw-deco .bt{fill:#10051a;filter:drop-shadow(0 0 1px rgba(214,180,255,.4))}
.hw-deco.sp{top:0;left:58%;width:34px;height:auto;aspect-ratio:auto;display:flex;flex-direction:column;align-items:center}
.hw-deco.sp i{display:block;width:1px;height:16vh;background:linear-gradient(rgba(240,226,255,.15),rgba(240,226,255,.6))}
.hw-deco.sp svg{width:34px;height:34px;margin-top:-12px;overflow:visible;filter:drop-shadow(0 3px 4px rgba(0,0,0,.6))}

/* ======================= glass top bar, Pirata One title, eyes that follow the pointer ======================= */
html.hw [data-top-bar]{background:linear-gradient(180deg,rgba(40,18,66,.78),rgba(26,11,44,.72)) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(214,170,255,.3),0 0 0 3px rgba(18,7,30,.55),0 24px 60px -30px rgba(0,0,0,.9),0 0 50px -20px rgba(255,138,43,.35) !important}
html.hw header:has(> [data-top-bar])::before{background:transparent}   /* the strip above the sticky bar would show as a flat violet band */
html.hw [data-top-bar] [data-top-bar-title]{font-family:'Pirata One','Cinzel',serif !important;font-weight:400 !important;letter-spacing:.03em !important;
  background:linear-gradient(180deg,#ffe2a8 0%,#ff9a3c 55%,#c2410c 100%);-webkit-background-clip:text;background-clip:text;color:transparent !important;
  filter:drop-shadow(0 2px 0 #2a0f3d) drop-shadow(0 0 14px rgba(255,138,43,.45))}
html.hw [data-top-bar] [data-top-bar-title]{font-size:24px !important}
@media (min-width:640px){html.hw [data-top-bar] [data-top-bar-title="visible"]{font-size:32px !important;line-height:34px !important}}
/* a creature's eyes looking out of the dark next to the title.
   Almond eyes, amber irises with fibres, slit pupils that follow the pointer and open wide when it comes close, a wet shine, real blinks */
.hw-eyes{position:relative;display:inline-flex;flex:none;align-items:center;gap:16px;margin:0 10px 0 12px;vertical-align:middle}
html:not(.hw) .hw-eyes{display:none}
.hw-eyes .pair{position:relative;display:flex;align-items:center;gap:9px}
.hw-eyes .pair::before{content:"";position:absolute;inset:-12px -16px;border-radius:50%;background:radial-gradient(closest-side,rgba(3,1,6,.9),rgba(3,1,6,.5) 55%,rgba(3,1,6,0))}
.hw-eyes .ew{position:relative;filter:drop-shadow(0 0 3px rgba(255,166,48,.75)) drop-shadow(0 0 9px rgba(255,120,20,.35))}
.hw-eyes .eye{position:relative;display:block;width:26px;height:14px;overflow:hidden;
  -webkit-clip-path:path('M0 8Q12 -4 26 6Q14 17 0 8Z');clip-path:path('M0 8Q12 -4 26 6Q14 17 0 8Z');
  background:radial-gradient(circle at 50% 55%,#5a2208,#1c0702 75%);animation:hw-blink2 6.4s infinite}
.hw-eyes .ew.r .eye{-webkit-clip-path:path('M26 8Q14 -4 0 6Q12 17 26 8Z');clip-path:path('M26 8Q14 -4 0 6Q12 17 26 8Z')}
.hw-eyes .eye::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,0) 48%,rgba(0,0,0,0) 78%,rgba(0,0,0,.4))}
.hw-eyes .iris{position:absolute;left:50%;top:50%;width:17px;height:17px;margin:-8px 0 0 -8.5px;border-radius:50%;transition:transform .14s ease-out;
  background:repeating-conic-gradient(from 3deg,rgba(110,34,0,.2) 0 2deg,rgba(255,226,140,.06) 2deg 7deg),
    radial-gradient(circle,#fff2b8 0,#ffc63f 26%,#f08812 54%,#943604 82%,#3c1003 100%)}
.hw-eyes .pup{position:absolute;left:50%;top:50%;width:2.6px;height:13px;margin:-6.5px 0 0 -1.3px;border-radius:50%;background:#070101;
  box-shadow:0 0 1.5px 1px rgba(40,8,0,.6);transition:width .3s ease,margin .3s ease}
.hw-eyes.near .pup{width:6px;margin-left:-3px}
.hw-eyes .shine{position:absolute;left:57%;top:24%;width:4px;height:2.6px;border-radius:50%;background:rgba(255,252,240,.9);filter:blur(.3px);z-index:1}
.hw-eyes .ew.r .shine{left:auto;right:36%}
.hw-eyes .ew.l{transform:rotate(9deg)}.hw-eyes .ew.r{transform:rotate(-9deg)}
/* a second, smaller pair further back in the dark: it shows now and then, a little red */
.hw-eyes .p2{transform:scale(.56);opacity:0;filter:hue-rotate(-28deg) saturate(1.2);animation:hw-peek 17s ease-in-out 4s infinite}
.hw-eyes .p2 .eye{animation:hw-blink2 4.1s .9s infinite}
@keyframes hw-blink2{0%,90%,100%{transform:scaleY(1)}93%{transform:scaleY(.06)}96%{transform:scaleY(1)}}
@keyframes hw-peek{0%,8%{opacity:0}16%,48%{opacity:.6}58%,100%{opacity:0}}


/* ======================= the logo: carved wood, the symbol on one nail, about to fall ======================= */
html.hw .hw-brand{position:relative}
html.hw .hw-brand.hw-logo-on > img{visibility:hidden}
html.hw .hw-brand:not(.hw-logo-on) .hw-logo{display:none}
.hw-logo{position:absolute;pointer-events:none}
html:not(.hw) .hw-logo{display:none}
/* carved wood in three layers: a dark extruded side (stacked shadows), the grained face, a thin light edge on top.
   contain + center matches how the <img> letterboxes the logo SVG */
.hw-word,.hw-mark{position:absolute;inset:0}
.hw-word{-webkit-mask:url(img/logo-word.svg) center/contain no-repeat;mask:url(img/logo-word.svg) center/contain no-repeat}
.hw-mark{-webkit-mask:url(img/logo-mark.svg) center/contain no-repeat;mask:url(img/logo-mark.svg) center/contain no-repeat}
.hw-word:not(.hw-deep):not(.hw-edge),.hw-mark:not(.hw-deep):not(.hw-edge){
  background:radial-gradient(140% 60% at 30% -20%,rgba(255,226,170,.35),rgba(255,226,170,0) 60%),
    repeating-linear-gradient(177deg,rgba(92,44,14,0) 0 2px,rgba(92,44,14,.55) 2px 2.6px,rgba(92,44,14,0) 2.6px 4.4px,rgba(120,60,20,.28) 4.4px 5px,rgba(92,44,14,0) 5px 7px),
    repeating-radial-gradient(ellipse 34px 9px at 36% 60%,rgba(255,214,150,.0) 0 2px,rgba(110,52,16,.32) 2px 3px,rgba(255,214,150,0) 3px 5px),
    linear-gradient(180deg,#f0b46e 0%,#cf8641 38%,#a3602a 70%,#7d4318 100%)}
.hw-deep{background:#3d1d08;transform:translate(1.4px,2.6px);
  filter:drop-shadow(-.4px -.7px 0 #5b2d0e) drop-shadow(-.4px -.7px 0 #6b3612) drop-shadow(0 3px 4px rgba(0,0,0,.7))}
.hw-edge{background:linear-gradient(180deg,rgba(255,236,200,.9),rgba(255,236,200,0) 40%);transform:translate(-.5px,-.6px);opacity:.55;
  -webkit-mask-composite:source-in;mix-blend-mode:screen}
.hw-mark:not(.hw-deep):not(.hw-edge){background:radial-gradient(120% 60% at 30% 0%,rgba(255,226,170,.3),rgba(255,226,170,0) 60%),
  repeating-linear-gradient(94deg,rgba(80,36,10,0) 0 1.6px,rgba(80,36,10,.55) 1.6px 2.3px,rgba(80,36,10,0) 2.3px 4.6px),linear-gradient(160deg,#e3a061,#a9652a 55%,#6f3a14)}
.hw-mk{position:absolute;inset:0;transform-origin:17% 6%;animation:hw-loose 7s ease-in-out infinite}
.hw-nail{position:absolute;left:17%;top:6%;width:7px;height:7px;z-index:2;margin:-3px 0 0 -3px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f4f0ff,#8c84a6 60%,#3a3448);box-shadow:0 1px 2px rgba(0,0,0,.7)}
/* the symbol swings on its nail and now and then slips, as if about to fall */
@keyframes hw-loose{0%,100%{transform:rotate(0)}12%{transform:rotate(2.5deg)}24%{transform:rotate(-1.5deg)}36%{transform:rotate(1deg)}
  62%{transform:rotate(0)}66%{transform:rotate(16deg) translateY(2px)}69%{transform:rotate(9deg) translateY(1px)}72%{transform:rotate(13deg) translateY(1.5px)}
  78%{transform:rotate(6deg)}86%{transform:rotate(-2deg)}92%{transform:rotate(1deg)}}

/* ======================= every card: the game style ======================= */
.hw-card{isolation:isolate}
.hw-rel{position:relative}
html:not(.hw) .hw-glow,html:not(.hw) .hw-clip,html:not(.hw) .hw-tex,html:not(.hw) .hw-web,html:not(.hw) .hw-sweep,html:not(.hw) .hw-spider,html:not(.hw) .hw-pin{display:none}
/* the frame: a light top edge, a dark lower edge, a violet rim, a dark outer line and a warm glow that breathes */
.hw-glow{position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:-1;
  box-shadow:inset 0 1.5px 0 rgba(226,190,255,.30),inset 0 -2px 0 rgba(10,4,18,.55),0 0 0 1px rgba(164,110,236,.55),0 0 0 3.5px rgba(16,6,28,.7),
    0 0 34px -8px rgba(255,138,43,.38),0 26px 70px -34px rgba(91,42,143,.8);animation:hw-breathe 6s ease-in-out infinite}
@keyframes hw-breathe{0%,100%{opacity:.7}50%{opacity:1}}
/* the texture and the webs live in a clip with the card's rounded corners */
.hw-clip{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:-1;
  background:radial-gradient(120% 70% at 22% -10%,rgba(176,118,255,.20),rgba(176,118,255,0) 62%),radial-gradient(90% 60% at 100% 110%,rgba(255,138,43,.07),rgba(255,138,43,0) 60%),linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.12))}
/* drip streaks running down from the top edge */
.hw-tex{position:absolute;left:0;right:0;top:0;height:min(70%,260px);pointer-events:none;opacity:.32;
  background:url(img/streaks.svg) 0 0/220px 100% repeat-x;
  -webkit-mask:linear-gradient(#000,rgba(0,0,0,.4) 60%,transparent);mask:linear-gradient(#000,rgba(0,0,0,.4) 60%,transparent)}
.hw-web{position:absolute;pointer-events:none;color:rgba(244,236,255,.38);transition:color .4s}
.hw-web.hw-tl{top:0;left:0}
.hw-web.hw-tr{top:0;right:0;transform:scaleX(-1)}
.hw-web.hw-bl{bottom:0;left:0;transform:scaleY(-1)}
.hw-web.hw-br{bottom:0;right:0;transform:scale(-1,-1)}
.hw-web svg{display:block;overflow:visible}
.hw-web path{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 1px rgba(0,0,0,.6))}
.hw-web .dew{fill:#fff3d6;animation:hw-dew 4.5s ease-in-out infinite}
@keyframes hw-dew{0%,100%{opacity:.3}50%{opacity:1;filter:drop-shadow(0 0 3px #ffd08a)}}
.hw-card:hover > .hw-clip .hw-web{color:rgba(255,236,200,.8)}
.hw-pin{position:absolute;top:-9px;right:var(--x);width:22px;height:22px;z-index:3;pointer-events:none;filter:drop-shadow(0 3px 2px rgba(0,0,0,.6))}
.hw-pin svg{width:100%;height:100%;display:block}
.hw-sweep{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;padding:1.5px;opacity:0;
  background:linear-gradient(115deg,transparent 35%,rgba(255,214,150,.85) 50%,transparent 65%) 0 0/260% 100% no-repeat;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.hw-card:hover > .hw-sweep{opacity:1;animation:hw-sweep 1.4s ease-out}
@keyframes hw-sweep{from{background-position:120% 0}to{background-position:-60% 0}}
.hw-spider{position:absolute;top:0;right:var(--x);z-index:2;display:flex;flex-direction:column;align-items:center;pointer-events:none;color:#08050c;
  animation:hw-dangle 9s ease-in-out infinite;transform-origin:top center}
.hw-spider i{display:block;width:1px;height:28px;background:linear-gradient(rgba(244,236,255,.1),rgba(244,236,255,.6));transition:height 1.2s cubic-bezier(.3,.7,.2,1)}
.hw-spider svg{width:34px;height:34px;margin-top:-14px;overflow:visible;filter:drop-shadow(0 4px 4px rgba(0,0,0,.6)) drop-shadow(0 0 6px rgba(255,138,43,.25));animation:hw-turn 6s ease-in-out infinite alternate}
.hw-card:hover > .hw-spider i{height:70px}
@keyframes hw-dangle{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(12px) rotate(3deg)}60%{transform:translateY(4px) rotate(-2deg)}}
.hw-spider .lg1,.hw-drop .lg1{animation:hw-legs 1.6s ease-in-out infinite;transform-origin:24px 21px}
.hw-spider .lg2,.hw-drop .lg2{animation:hw-legs 1.6s ease-in-out -.8s infinite;transform-origin:24px 21px}
@keyframes hw-legs{0%,40%,100%{transform:rotate(0)}48%{transform:rotate(-5deg)}56%{transform:rotate(3deg)}64%{transform:rotate(0)}}
@keyframes hw-turn{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}

/* progress fills amber */
html.hw .hw-amber{background:linear-gradient(90deg,#ffd166,#ff9a3c 55%,#ff6a1a) !important;box-shadow:0 0 12px rgba(255,138,43,.55),inset 0 1px 0 rgba(255,255,255,.4) !important}
html.hw ::selection{background:rgba(255,138,43,.35)}

/* ======================= the scene in front ======================= */
#hwSky{position:fixed;inset:0;z-index:20;pointer-events:none;overflow:hidden}   /* over the sticky top bar (z-20, earlier in the page), under the phone nav, panels and modals (z-21 and up) */
html:not(.hw) #hwSky{display:none}
.hw-vig{position:absolute;inset:0;background:radial-gradient(130% 110% at 50% 40%,rgba(0,0,0,0) 62%,rgba(6,3,10,.5) 100%)}
.hw-mist{position:absolute;left:-20%;right:-20%;bottom:-60px;height:240px;filter:blur(18px);opacity:.55}
.hw-mist.m1{background:radial-gradient(40% 60% at 25% 70%,rgba(196,180,240,.18),transparent),radial-gradient(35% 55% at 70% 80%,rgba(196,180,240,.14),transparent);animation:hw-drift 38s ease-in-out infinite alternate}
.hw-mist.m2{bottom:-90px;height:280px;background:radial-gradient(45% 60% at 55% 75%,rgba(170,150,220,.16),transparent),radial-gradient(30% 50% at 10% 80%,rgba(170,150,220,.12),transparent);animation:hw-drift 52s ease-in-out -20s infinite alternate-reverse}
.hw-mist.m3{bottom:-40px;height:160px;background:radial-gradient(30% 60% at 90% 70%,rgba(255,170,110,.09),transparent),radial-gradient(40% 60% at 40% 90%,rgba(210,195,255,.12),transparent);animation:hw-drift 30s ease-in-out -8s infinite alternate}
@keyframes hw-drift{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
/* spiders dropping from the top edge on threads */
.hw-topweb{position:absolute;left:0;right:0;top:0;height:200px;color:rgba(244,236,255,.34)}
.hw-drop{position:absolute;top:0;display:flex;flex-direction:column;align-items:center;color:#0a0610}
.hw-drop i{display:block;width:1px;height:20px;background:linear-gradient(rgba(244,236,255,0),rgba(244,236,255,.35))}
.hw-drop svg{width:58px;height:58px;margin-top:-24px;overflow:visible;filter:drop-shadow(0 0 1px rgba(214,190,255,.9)) drop-shadow(0 6px 8px rgba(0,0,0,.7)) drop-shadow(0 0 12px rgba(160,110,236,.45));animation:hw-turn 5s ease-in-out infinite alternate}
.hw-drop.d1{left:34%}.hw-drop.d2{left:61%}.hw-drop.d3{left:88%}
.hw-drop.d1 i{animation:hw-fall 14s ease-in-out infinite}
.hw-drop.d2 i{animation:hw-fall 17s ease-in-out -6s infinite}
.hw-drop.d3 i{animation:hw-fall 12s ease-in-out -9s infinite}
@keyframes hw-fall{0%,100%{height:0}30%{height:0}42%{height:min(20vh,170px)}48%{height:min(17vh,150px)}54%{height:min(19vh,160px)}62%{height:min(19vh,160px)}74%{height:0}}
/* bats: silhouettes, wings drawn by the script, a faint moonlit rim */
.hw-flock{position:absolute;inset:0}
.hw-bat{position:absolute;left:0;top:0;display:block;color:#0b0810;will-change:transform;pointer-events:none}
.hw-bat svg{display:block;width:100%;height:auto;overflow:visible;fill:currentColor}
.hw-flash{position:absolute;inset:0;opacity:0;background:radial-gradient(70% 55% at 75% 0%,rgba(230,225,255,.6),rgba(230,225,255,0) 70%)}
.hw-flash.go{animation:hw-flash 1.6s ease-out}
@keyframes hw-flash{0%{opacity:0}4%{opacity:.34}9%{opacity:.04}14%{opacity:.2}40%,100%{opacity:0}}

/* the skeleton peeking over the bottom of the sidebar and the phone menu: it hides below the edge, rises, looks around, ducks.
   The phone menu is fixed, so only the sidebar section is made relative; short sidebars skip it so it never covers a link */
html:not(.hw) .hw-peek{display:none}
#v4-sidebar .hw-peek-host{position:relative}
/* a promo banner with Halloween artwork shows it while the theme is on and its everyday artwork otherwise */
html.hw [data-halloween-art="off"],html:not(.hw) [data-halloween-art="on"]{display:none !important}
.hw-peek{position:absolute;bottom:100%;z-index:1;overflow:hidden;pointer-events:none}
.hw-peek.sb{right:22px;width:76px;height:61px}
.hw-peek.nb{right:10px;width:60px;height:48px}
.hw-peek i{display:block;width:100%;height:100%;transform:translateY(100%);transform-origin:50% 100%;animation:hw-rise 11s ease-in-out infinite}
.hw-peek.nb i{animation-delay:-5s}
.hw-peek svg{display:block;width:100%;height:100%}
@keyframes hw-rise{0%,46%,100%{transform:translateY(100%)}55%{transform:translateY(0)}64%{transform:translateY(0) rotate(-7deg)}74%{transform:translateY(0) rotate(6deg)}83%,90%{transform:translateY(0)}}
@media (max-height:760px){.hw-peek.sb{display:none}}

/* still (a capture) and reduced motion: nothing moves */
html.hw-still .hw-peek i{animation:none !important;transform:none}
html.hw-still .hw-glow,html.hw-still .hw-web .dew,html.hw-still .hw-spider,html.hw-still .hw-mist,html.hw-still .hw-smoke,html.hw-still .hw-mk,html.hw-still .hw-drop i,html.hw-still .hw-eyes .eye,html.hw-still .hw-eyes .p2{animation:none !important}
html.hw-still .hw-drop.d2 i{height:180px}
@media (prefers-reduced-motion:reduce){
  .hw-glow,.hw-web .dew,.hw-spider,.hw-mist,.hw-smoke,.hw-mk,.hw-drop i,.hw-sweep,.hw-eyes .eye,.hw-eyes .p2,.hw-spider .lg1,.hw-spider .lg2{animation:none !important}
  .hw-flock{display:none}
  .hw-peek i{animation:none !important;transform:none}
}

/* ======================= the intro ======================= */
#hwIntro{position:fixed;inset:0;z-index:9600;display:grid;place-items:center;overflow:hidden;cursor:pointer;background:#06030a;animation:hi-in .5s ease-out both}
#hwIntro.out{animation:hi-out .9s ease-in forwards}
@keyframes hi-in{from{opacity:0}to{opacity:1}}
@keyframes hi-out{to{opacity:0;visibility:hidden}}
.hi-bg{position:absolute;inset:-4%;background:radial-gradient(50vmax 40vmax at 82% 0%,rgba(222,206,255,.22),rgba(222,206,255,0) 70%),radial-gradient(44vmax 32vmax at 0% 105%,rgba(255,138,43,.14),rgba(255,138,43,0) 70%),radial-gradient(80vmax 50vmax at 50% 115%,rgba(96,44,150,.42),rgba(96,44,150,0) 70%),linear-gradient(180deg,#160c28,#0a0513);
  opacity:0;transform:scale(1.12);animation:hi-bg 4.2s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes hi-bg{0%{opacity:0;transform:scale(1.12)}8%{opacity:.9;filter:brightness(2.2)}11%{filter:brightness(.6)}15%{filter:brightness(1.6)}22%{filter:brightness(1)}100%{opacity:1;transform:scale(1.02)}}
.hi-mist{position:absolute;left:-10%;right:-10%;bottom:-40px;height:46%;filter:blur(24px);opacity:0;
  background:radial-gradient(45% 60% at 30% 80%,rgba(200,185,245,.26),transparent),radial-gradient(40% 55% at 75% 85%,rgba(200,185,245,.2),transparent);animation:hi-mist 3.4s ease-out .2s forwards}
@keyframes hi-mist{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
.hi-copy{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.hi-eyebrow{font:600 13px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.42em;text-transform:uppercase;color:rgba(246,194,122,.85);opacity:0;animation:hi-rise .9s ease-out 1s forwards}
.hi-t{margin:0;font:400 104px/1 'Pirata One','Cinzel',serif;letter-spacing:.02em;
  background:linear-gradient(180deg,#fff0c8 0%,#ffb25c 45%,#ff6a1a 75%,#a3300a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 0 #2a0f3d) drop-shadow(0 0 30px rgba(255,138,43,.55));opacity:0;transform:scale(.92);animation:hi-title 1.3s cubic-bezier(.2,.7,.2,1) 1.1s forwards}
@keyframes hi-title{0%{opacity:0;transform:scale(.92);filter:blur(12px) drop-shadow(0 4px 0 #2a0f3d)}100%{opacity:1;transform:none;filter:drop-shadow(0 4px 0 #2a0f3d) drop-shadow(0 0 30px rgba(255,138,43,.55))}}
.hi-line{width:0;height:1px;background:linear-gradient(90deg,transparent,#f6c27a,transparent);animation:hi-line 1.2s ease-out 1.7s forwards}
@keyframes hi-line{to{width:360px}}
.hi-s{margin:0;font:500 17px/1.4 'Plus Jakarta Sans',sans-serif;letter-spacing:.16em;color:rgba(243,230,196,.85);opacity:0;animation:hi-rise .9s ease-out 2s forwards}
@keyframes hi-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hi-skip{position:absolute;right:24px;bottom:24px;height:36px;padding:0 16px;border-radius:999px;border:1px solid rgba(246,194,122,.3);background:rgba(10,6,14,.5);
  color:rgba(243,230,196,.85);font:600 13px 'Plus Jakarta Sans',sans-serif;cursor:pointer}
#hwIntro.hold,#hwIntro.hold *{animation:none !important}
#hwIntro.hold .hi-bg{opacity:1;transform:none}#hwIntro.hold .hi-mist{opacity:1}
#hwIntro.hold .hi-eyebrow,#hwIntro.hold .hi-t,#hwIntro.hold .hi-s{opacity:1;transform:none}
#hwIntro.hold .hi-line{width:360px}
@media (max-width:640px){.hi-t{font-size:58px}.hi-s{font-size:14px}}

/* ======================= the switch in the top bar ======================= */
.hw-tg{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 8px 0 9px;border-radius:12px;cursor:pointer;flex:none;
  background:#2a2927;border:1px solid rgba(255,255,255,.08);color:#b3b0aa;font:600 13px 'Plus Jakarta Sans',sans-serif}
.hw-tg:hover{border-color:rgba(255,255,255,.18)}
.hw-mn{width:18px;height:18px;display:grid;place-items:center;color:#6f6d69;transition:color .25s,filter .25s}
.hw-mn svg{width:18px;height:18px;display:block}
.hw-tg[aria-pressed="true"]{color:var(--hw-moon);border-color:rgba(246,194,122,.45);background:linear-gradient(180deg,rgba(246,194,122,.16),rgba(255,138,43,.06))}
.hw-tg[aria-pressed="true"] .hw-mn{color:var(--hw-gold);filter:drop-shadow(0 0 6px rgba(246,194,122,.6))}
.hw-sw{position:relative;width:30px;height:18px;flex:none;border-radius:99px;background:#3a3936;transition:background .2s}
.hw-sw i{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#b3b0aa;transition:transform .2s,background .2s}
.hw-tg[aria-pressed="true"] .hw-sw{background:linear-gradient(90deg,#f6c27a,#ff8a2b)}
.hw-tg[aria-pressed="true"] .hw-sw i{transform:translateX(12px);background:#1a0d04}
.hw-tg:focus{outline:none}.hw-tg:focus-visible{outline:2px solid rgba(255,255,255,.45);outline-offset:2px}
@media (max-width:1100px){.hw-tx{display:none}}
@media (max-width:640px){.hw-tg{padding:0 6px;gap:6px}.hw-eyes{display:none}}

/* ======================= the switch: the new look spreads out of the switch in a glowing ring, bats burst out of it ======================= */
html.hw-vt::view-transition-old(root),html.hw-vt::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.hw-vt::view-transition-group(hw-swarm),html.hw-vt::view-transition-new(hw-swarm){animation:none}
html.hw-vt::view-transition-old(hw-swarm){display:none}
#hwSwarm{position:fixed;inset:0;z-index:9700;pointer-events:none;overflow:hidden;view-transition-name:hw-swarm}
#hwSwarm .hw-bat{color:#07040b;filter:drop-shadow(0 0 6px rgba(255,138,43,.28))}
#hwSwarm .sw-ring{position:absolute;border-radius:50%;transform:scale(0);opacity:1;animation:sw-ring 1s cubic-bezier(.62,0,.22,1) forwards;
  box-shadow:0 0 0 1.5px rgba(255,190,120,.85),0 0 24px 6px rgba(255,138,43,.45),0 0 90px 30px rgba(140,80,230,.32),inset 0 0 60px 10px rgba(140,80,230,.25)}
#hwSwarm .sw-ring.off{box-shadow:0 0 0 1.5px rgba(160,255,225,.8),0 0 24px 6px rgba(0,255,186,.32),0 0 90px 30px rgba(120,90,220,.25)}
@keyframes sw-ring{0%{transform:scale(0);opacity:1}80%{opacity:1}100%{transform:scale(1);opacity:0}}
#hwSwarm .sw-glow{position:absolute;width:220px;height:220px;margin:-110px 0 0 -110px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(255,236,200,.9),rgba(255,160,70,.45) 30%,rgba(140,80,230,0) 70%);animation:sw-glow .9s ease-out forwards}
@keyframes sw-glow{0%{opacity:0;transform:scale(.2)}18%{opacity:1}100%{opacity:0;transform:scale(1.6)}}
@media (prefers-reduced-motion:reduce){#hwSwarm{display:none}}