/* BLACK DECK STICKER -- the "Play Black Deck" die-cut sticker hanging from the site header.
   Hand-maintained, new-site only (like js/halloween.js); docs/design/split-wireframe.py keeps this file and
   images/blackdeck/ through its cleanup and links it only when $graveyardOn (the same check that prints the sticker).
   Images were cut offline at 2x: sticker-130/64.webp have the 1.5px white stroke and brightness(1.6) baked in;
   glow-130/64.webp are the pumpkin's carved eyes and mouth, aligned pixel for pixel with the sticker.
   Desktop (>1000px): 130px tall, centred in the empty header space between the nav and the night switch, hanging
   below the 78px bar. Narrower (<=1000px; that space is too tight for it, and below 900px the header wraps into two
   rows): 64px, hanging from the header's bottom edge at the right. Every animation is transform or opacity only. */

.bd-stk{--bd-h:133px;--bd-x:-50%;--bd-rot:-3deg;--px:19.5%;--py:80.6%;
  position:absolute;top:6px;left:50%;z-index:1;display:block;border-radius:46%;
  transform:translateX(var(--bd-x)) rotate(var(--bd-rot));transform-origin:50% 8%;
  transition:transform .22s cubic-bezier(.3,1.4,.5,1)}
.bd-stk:hover,.bd-stk:focus-visible{transform:translateX(var(--bd-x)) translateY(-3px) rotate(calc(var(--bd-rot) - 5deg)) scale(1.03)}
.bd-stk:focus-visible{outline:2px solid #fff;outline-offset:3px}
.bd-stk *{pointer-events:none}
.bd-stk img{display:block;height:var(--bd-h);width:auto;max-width:none}

/* the sticker itself, with a soft shadow as if it lay on the page */
.bd-p{display:block;position:relative;z-index:1;
  filter:drop-shadow(0 1.5px 1.9px rgba(25,12,35,.38)) drop-shadow(0 7.5px 12px rgba(25,12,35,.34))}
html[data-theme="night"] .bd-p{filter:drop-shadow(0 1.5px 1.9px rgba(0,0,0,.53)) drop-shadow(0 7.5px 12px rgba(0,0,0,.47))}

/* candle light: two copies of the carved-face layer added on top, flickering on unrelated periods, plus a warm spill */
.bd-g{position:absolute;left:0;top:0;z-index:1;mix-blend-mode:screen;mix-blend-mode:plus-lighter}
.bd-g1{opacity:.9;animation:bd-f1 2.9s linear infinite}
.bd-g2{opacity:.35;animation:bd-f2 4.7s linear infinite}
.bd-spill{position:absolute;z-index:1;left:var(--px);top:var(--py);width:calc(var(--bd-h) * .62);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,176,70,.45),rgba(255,120,30,.18) 45%,rgba(255,100,20,0));
  mix-blend-mode:screen;opacity:.9;transform:translate(-50%,-50%);animation:bd-f3 6.1s ease-in-out infinite}
@keyframes bd-f1{0%{opacity:1}7%{opacity:.82}11%{opacity:.96}19%{opacity:.7}23%{opacity:.9}34%{opacity:1}41%{opacity:.76}
  46%{opacity:.88}58%{opacity:.64}63%{opacity:.93}71%{opacity:.84}78%{opacity:1}86%{opacity:.72}92%{opacity:.9}100%{opacity:1}}
@keyframes bd-f2{0%{opacity:.55}13%{opacity:.15}17%{opacity:.45}29%{opacity:.3}44%{opacity:.6}52%{opacity:.1}57%{opacity:.4}
  69%{opacity:.25}83%{opacity:.6}91%{opacity:.2}100%{opacity:.55}}
@keyframes bd-f3{0%{opacity:.85;transform:translate(-50%,-50%) scale(.95)}21%{opacity:1;transform:translate(-50%,-50%) scale(1.02)}
  37%{opacity:.78;transform:translate(-50%,-50%) scale(.92)}55%{opacity:.95;transform:translate(-50%,-50%) scale(1)}
  74%{opacity:.8;transform:translate(-50%,-50%) scale(.94)}88%{opacity:1;transform:translate(-50%,-50%) scale(1.02)}
  100%{opacity:.85;transform:translate(-50%,-50%) scale(.95)}}

/* bats: an ellipse from two eased axes a quarter-cycle apart, a slow wobble on top, wings beating by scaleY.
   z-index 0 flies behind the sticker, 3 in front; the loops stay out by the edges, clear of the "BLACK DECK" lettering. */
.bd-bat{position:absolute;left:50%;top:55%;z-index:3;width:max(9px,calc(var(--bd-h) * var(--bw)));aspect-ratio:2/1;
  transform:translate(-50%,-50%)}
.bd-bat span{display:block}
.bd-bat .bx{animation:bd-x var(--d) ease-in-out infinite alternate}
.bd-bat .by{animation:bd-y var(--d) ease-in-out infinite alternate;animation-delay:calc(var(--d) * -.5)}
.bd-bat .bw{animation:bd-w var(--wd) ease-in-out infinite}
.bd-bat .bf{transform-origin:50% 47%;animation:bd-flap var(--fl) ease-in-out infinite alternate}
.bd-bat svg{display:block;width:100%;height:auto;overflow:visible;fill:#120c18;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
html[data-theme="night"] .bd-bat svg{filter:drop-shadow(0 0 1px rgba(165,125,215,.95)) drop-shadow(0 0 2px rgba(110,70,160,.6))}
.bd-b1{--bw:.16;--rx:.62;--ry:.5;--d:3.7s;--wd:5.3s;--fl:.19s}
.bd-b2{--bw:.13;--rx:.55;--ry:.56;--d:5.1s;--wd:7.1s;--fl:.23s;z-index:0}
.bd-b3{--bw:.11;--rx:.7;--ry:.44;--d:4.3s;--wd:6.2s;--fl:.16s}
.bd-b2 .by{animation-direction:alternate-reverse}
.bd-b3 .bx{animation-delay:-1.9s}.bd-b3 .by{animation-delay:-4.05s}.bd-b3 .bw{animation-delay:-2.4s}
@keyframes bd-x{from{transform:translateX(calc(var(--bd-h) * var(--rx) * -1))}to{transform:translateX(calc(var(--bd-h) * var(--rx)))}}
@keyframes bd-y{from{transform:translateY(calc(var(--bd-h) * var(--ry) * -1))}to{transform:translateY(calc(var(--bd-h) * var(--ry)))}}
@keyframes bd-w{0%{transform:translate(0,0) rotate(0deg)}30%{transform:translate(calc(var(--bd-h) * .06),calc(var(--bd-h) * -.05)) rotate(9deg)}
  62%{transform:translate(calc(var(--bd-h) * -.05),calc(var(--bd-h) * .06)) rotate(-7deg)}100%{transform:translate(0,0) rotate(0deg)}}
@keyframes bd-flap{from{transform:scaleY(1)}to{transform:scaleY(-.35)}}

/* desktop: the sticker's slot takes the header spacer's place, so it sits centred in the empty space */
@media (min-width:1001px){
  .hdr:has(> .bd-slot) > .spacer{display:none}
  .hdr > .bd-slot{flex:1 1 0;min-width:0;align-self:stretch;position:relative}
}
/* narrow desktop, tablet and phone: the slot has no box; the sticker hangs from the header's bottom edge at the right.
   The <picture> sources in index.php switch to the 64px images at this same breakpoint. */
@media (max-width:1000px){
  .hdr > .bd-slot{display:contents}
  .bd-stk{--bd-h:67px;--bd-x:0px;--bd-rot:-4deg;--px:20.1%;--py:79.9%;
    top:calc(100% - 16px);left:auto;right:max(16px,env(safe-area-inset-right,0px))}
}

@media (prefers-reduced-motion:reduce){
  .bd-stk{transition:none}
  .bd-g,.bd-spill{animation:none}
  .bd-bat{display:none}
}