/* ---------- "Boo!" hanging sign: swings down on two ropes from behind the header, then hides ---------- */
@font-face{font-family:Creepster;src:url(../assets/fonts/Creepster-Regular.ttf);font-display:swap}
.boo-wrap{position:fixed;left:50%;top:var(--boo-top,140px);z-index:61;width:min(580px,92vw);transform:translateX(-50%);pointer-events:none;padding:0 30px 30px}
.boo{position:relative;display:block;pointer-events:auto;text-decoration:none;color:#FBEBD0;padding-top:184px;
  transform:translateY(-120%);transform-origin:50% 0;will-change:transform}
.boo-ropes{position:absolute;left:0;top:0;width:100%;height:206px;overflow:visible}
.boo-ropes .rope path{stroke:#C9A46A;stroke-width:6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.boo-ropes .rope path.tw{stroke:#7A5A2E;stroke-width:6;stroke-dasharray:3 5;vector-effect:non-scaling-stroke}
.boo-sign{position:relative;display:block}
.boo-board{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 12px 14px rgba(34,22,12,.45))}
.boo-body{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 18px;padding:30px 34px 28px 30px;min-height:150px}
.boo-word{font-family:Creepster,var(--serif);font-size:66px;line-height:.85;color:#F58A24;letter-spacing:.02em;transform:rotate(-7deg);
  text-shadow:-2px -2px 0 #22160C,2px -2px 0 #22160C,-2px 2px 0 #22160C,3px 3px 0 #22160C,5px 6px 0 rgba(0,0,0,.35);grid-row:span 3}
.boo-title{font-family:var(--sans);font-weight:600;font-size:14.5px;letter-spacing:.2em;text-transform:uppercase;line-height:1.2;color:#F7C27A}
.boo-line{font-family:var(--serif);font-style:italic;font-weight:600;font-size:21px;line-height:1.2;color:#FBEBD0}
.boo-cta{justify-self:start;margin-top:8px;display:inline-flex;align-items:center;gap:8px;background:#F58A24;color:#22160C;font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase;padding:9px 16px;border-radius:30px;transform:rotate(-2deg);border:2px solid #22160C;box-shadow:0 3px 0 #22160C}
.boo:hover .boo-cta{background:#FFA445}
/* puppy-in-a-ghost-costume sits on the top-right corner of the board, paws over the edge */
.boo-ghost{position:absolute;right:-6px;top:-86px;width:108px;height:auto;z-index:2;overflow:visible;animation:ghostbob 2.8s ease-in-out infinite;transform-origin:50% 100%}
.boo-ghost .tail{transform-box:fill-box;transform-origin:0% 100%;animation:wag .32s ease-in-out infinite alternate}
.boo-ghost .ear{transform-box:fill-box;animation:flop 1.4s ease-in-out infinite alternate}
.boo-ghost .ear.l{transform-origin:100% 0%}.boo-ghost .ear.r{transform-origin:0% 0%;animation-delay:-.7s}
.boo-ghost .eyes{animation:look 5s ease-in-out infinite}
.boo-x{position:absolute;right:8px;bottom:6px;pointer-events:auto;width:30px;height:30px;border-radius:50%;border:2px solid #22160C;background:#FBEBD0;color:#22160C;font-size:17px;line-height:1;cursor:pointer;opacity:0;transition:opacity .3s;z-index:2}
.boo-wrap.on .boo-x{opacity:1}
.boo-wrap.on .boo{animation:boodrop .7s cubic-bezier(.25,1.4,.5,1) forwards, booswing 2.6s ease-out .7s forwards, boosway 4s ease-in-out 3.3s infinite}
.boo-wrap.off .boo{animation:boohide .5s cubic-bezier(.6,-0.35,.8,.5) forwards}
@keyframes boodrop{0%{transform:translateY(-120%)}100%{transform:translateY(0)}}
@keyframes booswing{0%{transform:rotate(7deg)}18%{transform:rotate(-5.5deg)}36%{transform:rotate(4deg)}54%{transform:rotate(-2.6deg)}72%{transform:rotate(1.5deg)}88%{transform:rotate(-.7deg)}100%{transform:rotate(0)}}
@keyframes boosway{0%,100%{transform:rotate(0)}25%{transform:rotate(1.4deg)}75%{transform:rotate(-1.4deg)}}
@keyframes boohide{0%{transform:translateY(0) rotate(0)}25%{transform:translateY(12px) rotate(-2deg)}100%{transform:translateY(-120%) rotate(3deg)}}
@keyframes ghostbob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-3deg)}}
@keyframes wag{from{transform:rotate(-14deg)}to{transform:rotate(16deg)}}
@keyframes flop{from{transform:rotate(-6deg)}to{transform:rotate(8deg)}}
@keyframes look{0%,40%,100%{transform:translateX(0)}50%,70%{transform:translateX(2.5px)}80%,90%{transform:translateX(-2px)}}
/* ---------- the pull rope that stays behind while the sign is away ---------- */
.boo-pullbox{position:fixed;z-index:61;left:0;top:0;width:64px;height:250px;pointer-events:none}
.boo-pull{position:relative;width:64px;padding:0;border:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;
  transform:translateY(-190px);transform-origin:50% 0;transition:transform .55s cubic-bezier(.3,1.5,.5,1);pointer-events:none;-webkit-tap-highlight-color:transparent}
.boo-pull.show{transform:translateY(0);pointer-events:auto;animation:pullsway 3.4s ease-in-out .6s infinite}
.boo-pull.tug{animation:pulltug .38s ease-in forwards}
.boo-pull-rope{width:14px;height:126px;display:block}
.boo-pull-knob{width:48px;height:46px;margin-top:-4px;filter:drop-shadow(0 3px 3px rgba(34,22,12,.35))}
.boo-pull-tag{margin-top:3px;font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:#22160C;background:#FBEBD0;border:1.5px solid #22160C;border-radius:4px;padding:3px 6px;transform:rotate(-6deg)}
.boo-pull:hover .boo-pull-knob,.boo-pull:focus-visible .boo-pull-knob{animation:knob .5s ease-in-out infinite alternate}
.boo-pull:focus-visible{outline:none}.boo-pull:focus-visible .boo-pull-tag{outline:2px solid #F58A24;outline-offset:2px}
@keyframes pullsway{0%,100%{transform:rotate(0)}30%{transform:rotate(4deg)}70%{transform:rotate(-4deg)}}
@keyframes pulltug{0%{transform:translateY(0)}45%{transform:translateY(26px)}100%{transform:translateY(-190px)}}
@keyframes knob{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
@media (max-width:640px){
  .boo-wrap{padding:0 18px 24px}
  .boo{padding-top:138px}
  .boo-ropes{height:158px}
  .boo-body{padding:22px 20px 22px 18px;gap:2px 12px;min-height:118px}
  .boo-word{font-size:44px}
  .boo-title{font-size:11px;letter-spacing:.14em}
  .boo-line{font-size:16px}
  .boo-cta{font-size:11px;padding:7px 12px}
  .boo-ghost{width:76px;right:-10px;top:-58px}
  .boo-pullbox,.boo-pull{width:56px}
  .boo-pull-rope{height:112px}
  .boo-pull-knob{width:34px;height:32px}
  .boo-pull-tag{font-size:9.5px}
  .boo-x{width:26px;height:26px;font-size:14px;right:2px}
}
@media (prefers-reduced-motion:reduce){
  .boo-wrap.on .boo{animation:none;transform:none}
  .boo-wrap.off .boo{animation:none;transform:translateY(-120%)}
  .boo-ghost,.boo-ghost *{animation:none!important}
  .boo-pull.show,.boo-pull.tug{animation:none}
}