/* Halloween 2026 header logo flyby (6 bats + broom).
   Only active when the inline date check in the header adds .pp-boo to .brand
   (visitor's local date before Nov 1, 2026). Transform-only animation inside an
   absolutely positioned, clipped, non-clickable layer, so nothing else on the page moves.
   Fully off under prefers-reduced-motion. 16s loop:
   0-46%  loose cluster of 3 bats L->R along the top    16-50% broom L->R along the bottom
   52-84% small bat L->R along the bottom               54-94% pair of bats R->L along the top */
.brand.pp-boo{position:relative}
.pp-fly{position:absolute;left:-18px;right:-70px;top:calc(50% - 46px);height:92px;overflow:hidden;pointer-events:none;z-index:2}
.pp-fly svg{display:block;overflow:visible}
.pp-lane{position:absolute;inset:0;will-change:transform}
.pp-lane > *{position:absolute;left:0}
.pp-bw svg{width:100%;height:100%}

/* bats */
.pp-bat{fill:#3b2350}
.pp-wings{transform-box:view-box;transform-origin:32px 13px;animation:pp-flap .26s ease-in-out infinite alternate}
.pp-b1{top:6px;width:26px;height:13px}
.pp-b2{top:12px;width:17px;height:9px}
.pp-b3{top:15px;width:18px;height:9px}
.pp-b4{top:1px;width:14px;height:7px}
.pp-b5{top:3px;width:21px;height:11px}
.pp-b6{top:72px;width:15px;height:8px}
.pp-b2 .pp-wings{animation-duration:.22s;animation-delay:-.1s}
.pp-b3 .pp-wings{animation-duration:.24s;animation-delay:-.07s}
.pp-b4 .pp-wings{animation-duration:.2s;animation-delay:-.15s}
.pp-b5 .pp-wings{animation-duration:.3s;animation-delay:-.05s}
.pp-b6 .pp-wings{animation-duration:.23s;animation-delay:-.12s}
.pp-lb1{animation:pp-l1 16s ease-in-out infinite}
.pp-lb2{animation:pp-l2 16s ease-in-out infinite}
.pp-lb3{animation:pp-l3 16s ease-in-out infinite}
.pp-lb4{animation:pp-l4 16s ease-in-out infinite}
.pp-lb5{animation:pp-l5 16s ease-in-out infinite}
.pp-lb6{animation:pp-l6 16s ease-in-out infinite}

/* broom */
.pp-broom{top:68px;width:58px;height:16px;transform-origin:70% 50%;animation:pp-bob 1.7s ease-in-out infinite alternate}
.pp-broom .pp-stick{fill:none;stroke:#3b2350;stroke-width:2.4;stroke-linecap:round}
.pp-broom .pp-straw{fill:#3b2350}
.pp-broom .pp-band{fill:#e8862a}
.pp-broom .pp-spark{fill:#e8a93a;animation:pp-twinkle .9s ease-in-out infinite alternate}
.pp-broom .pp-spark:nth-of-type(2){animation-delay:.3s}
.pp-broom .pp-spark:nth-of-type(3){animation-delay:.6s}
.pp-lbr{animation:pp-lbr 16s ease-in-out infinite}

@keyframes pp-flap{from{transform:scaleY(1)}to{transform:scaleY(-.55)}}
@keyframes pp-bob{from{transform:translateY(-1px) rotate(-8deg)}to{transform:translateY(1.5px) rotate(-3deg)}}
@keyframes pp-twinkle{from{opacity:.25}to{opacity:1}}
/* cluster leader: L->R top, 0-38% */
@keyframes pp-l1{
  0%{transform:translate(-30px,6px)}
  10%{transform:translate(28%,-2px)}
  20%{transform:translate(52%,7px)}
  30%{transform:translate(78%,0)}
  38%,100%{transform:translate(calc(100% + 30px),5px)}
}
/* cluster follower: L->R, a little lower, 4-43% */
@keyframes pp-l3{
  0%,4%{transform:translate(-30px,0)}
  14%{transform:translate(26%,-5px)}
  24%{transform:translate(50%,1px)}
  34%{transform:translate(76%,-6px)}
  43%,100%{transform:translate(calc(100% + 30px),-1px)}
}
/* cluster straggler: tiny, L->R high, 7-46% */
@keyframes pp-l4{
  0%,7%{transform:translate(-30px,4px)}
  16%{transform:translate(22%,1px)}
  27%{transform:translate(49%,6px)}
  37%{transform:translate(72%,2px)}
  46%,100%{transform:translate(calc(100% + 30px),5px)}
}
/* broom: L->R along the bottom, 16-50% */
@keyframes pp-lbr{
  0%,16%{transform:translate(-70px,4px)}
  26%{transform:translate(30%,-1px)}
  38%{transform:translate(64%,3px)}
  50%,100%{transform:translate(calc(100% + 20px),-2px)}
}
/* low bat: L->R along the bottom after the broom, 52-84% */
@keyframes pp-l6{
  0%,52%{transform:translate(-30px,0)}
  62%{transform:translate(30%,-4px)}
  72%{transform:translate(60%,2px)}
  84%,100%{transform:translate(calc(100% + 30px),-3px)}
}
/* return pair: R->L along the top, 54-88% and 60-94% */
@keyframes pp-l2{
  0%,54%{transform:translate(calc(100% + 24px),2px)}
  64%{transform:translate(70%,-6px)}
  76%{transform:translate(38%,3px)}
  88%,100%{transform:translate(-24px,-4px)}
}
@keyframes pp-l5{
  0%,60%{transform:translate(calc(100% + 30px),4px)}
  70%{transform:translate(66%,0)}
  81%{transform:translate(34%,6px)}
  94%,100%{transform:translate(-30px,1px)}
}

@media (max-width:760px){
  .pp-fly{left:-16px;right:-28px;top:calc(50% - 36px);height:72px}
  .pp-b1{top:3px;width:19px;height:10px}
  .pp-b2{top:8px;width:14px;height:7px}
  .pp-b3{top:11px;width:14px;height:7px}
  .pp-b4{top:0;width:11px;height:6px}
  .pp-b5{top:2px;width:16px;height:8px}
  .pp-b6{top:55px;width:12px;height:6px}
  .pp-broom{top:53px;width:44px;height:12px}
}
@media (prefers-reduced-motion:reduce){
  .pp-fly{display:none}
}

/* "Happy Halloween" strip above the header. Inserted by the same date check
   (before the header is parsed, so it is there at first paint; nothing jumps).
   It scrolls away normally; the sticky header behaves exactly as before. */
.pp-hello{background:#3b2350;border-bottom:2px solid #e8862a;color:#fbeee2;text-align:center;
  font-family:var(--serif);font-style:italic;font-weight:500;font-size:16.5px;line-height:1;letter-spacing:.02em;
  height:34px;display:flex;align-items:center;justify-content:center;gap:.45em;padding:0 16px;white-space:nowrap;overflow:hidden}
.pp-hello .pp-pump{font-style:normal;font-size:15px;line-height:1}
@media (max-width:760px){
  .pp-hello{height:30px;font-size:15.5px}
  .pp-hello .pp-pump{font-size:14px}
}

/* tablet/desktop header is 100px tall since the bigger logo (Oct 2026) */
@media (min-width:761px){
  .pp-fly{top:calc(50% - 50px);height:100px}
  .pp-broom{top:76px}
  .pp-b6{top:80px}
}