/* Halloween sale theme (until Sunday 1 November 2026, 11:59 PM Pacific). Everything here is added by assets/js/halloween.js,
   which does nothing after the sale ends, so removing the two tags from the pages is tidy-up, not a requirement. */

:root{--hw-orange:#ff8a1f;--hw-amber:#f5a623;--hw-wood:#8a5a32;--hw-wood-dk:#5c3a1e;--hw-ink:#0b0b0d;--hw-white:#fffaf2}

.hw-font{font-family:'Creepster','Plus Jakarta Sans',system-ui,sans-serif;font-weight:400;letter-spacing:.04em}

/* the announcement strip (home: the existing .sale-strip slot; pre-order pages: .hw-strip) */
.sale-strip.hw-on,.hw-strip{
  background:linear-gradient(90deg,#0b0b0d,#3a2414 50%,#0b0b0d);color:#fff;text-decoration:none;cursor:pointer;
  gap:10px;padding:0 12px;white-space:nowrap;overflow:hidden;border-bottom:1px solid rgba(245,166,35,.45);
}
.hw-strip{display:flex;align-items:center;justify-content:center;min-height:38px;font:600 13px/1.2 'Inter',system-ui,sans-serif;position:relative;z-index:60}
.sale-strip.hw-on b,.hw-strip b{color:var(--hw-amber)}
.hw-strip-code{border:1.5px dashed var(--hw-amber);border-radius:6px;padding:1px 7px;color:var(--hw-amber);font-weight:800;letter-spacing:.06em}
.hw-strip-clock{font-variant-numeric:tabular-nums;color:#fff;opacity:.9}
@media (max-width:640px){.hw-strip,.sale-strip.hw-on{font-size:11.5px;gap:6px}.hw-strip .hw-hide-sm,.sale-strip.hw-on .hw-hide-sm{display:none}}

/* stickers: tilted, cartoonish, a little wobbly */
.hw-sticker{
  display:inline-flex;align-items:center;gap:6px;transform:rotate(-6deg);
  background:var(--hw-orange);color:var(--hw-ink);border:3px solid var(--hw-ink);border-radius:14px;
  padding:6px 12px;font:800 15px/1.1 'Plus Jakarta Sans',system-ui,sans-serif;box-shadow:4px 4px 0 var(--hw-ink);
  animation:hw-wobble 2.6s ease-in-out infinite;white-space:nowrap;pointer-events:none;
}
.hw-sticker.wood{background:var(--hw-wood);color:var(--hw-white)}
.hw-sticker.white{background:var(--hw-white)}
.hw-cta-wrap{position:relative;display:inline-block}
.hw-cta-sticker{position:absolute;right:-18px;top:-26px;z-index:3;font-size:13px}
@media (max-width:640px){.hw-cta-sticker{right:-6px;top:-24px;font-size:11.5px;padding:4px 9px}}

/* the carved pumpkin that floats into the home hero */
.hw-hero-pumpkin{
  position:absolute;right:6%;bottom:14%;width:clamp(110px,15vw,200px);z-index:2;cursor:pointer;
  transform:translate(140%,40%) rotate(40deg);opacity:0;transition:transform 1.2s cubic-bezier(.2,1.4,.4,1),opacity .6s ease;
  filter:drop-shadow(0 0 28px rgba(255,138,31,.55));-webkit-tap-highlight-color:transparent;
}
.hw-hero-pumpkin.in{opacity:1;transform:translate(0,0) rotate(-10deg)}
.hw-hero-pumpkin.in svg{animation:hw-bob 3.2s ease-in-out infinite}
.hw-hero-pumpkin .hw-flame{animation:hw-flicker 1.4s ease-in-out infinite}
@media (max-width:760px){.hw-hero-pumpkin{right:4%;bottom:auto;top:calc(96px + var(--sale-strip-h,0px));width:96px}}

/* ghost with a speech bubble (near the pillow) */
.hw-ghost-spot{position:relative}
.hw-ghost{
  position:absolute;z-index:4;display:flex;align-items:flex-start;gap:6px;pointer-events:none;
  animation:hw-float 4s ease-in-out infinite;
}
.hw-ghost svg{width:74px;height:auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}
.hw-bubble{
  background:#fff;color:var(--hw-ink);border:3px solid var(--hw-ink);border-radius:18px 18px 18px 4px;
  padding:8px 12px;font:800 15px/1.2 'Plus Jakarta Sans',system-ui,sans-serif;transform:rotate(-4deg);
  box-shadow:3px 3px 0 var(--hw-ink);max-width:210px;
}
.hw-ghost.at-split{right:4%;top:4%;flex-direction:row-reverse}
.hw-ghost.at-split .hw-bubble{border-radius:18px 18px 4px 18px;transform:rotate(4deg)}
@media (max-width:640px){.hw-ghost.at-split{top:auto;bottom:5%}.hw-ghost svg{width:52px}.hw-bubble{font-size:12.5px;max-width:150px;padding:6px 9px}}

/* the scaredy pup on Remster Duo */
.hw-duo{display:flex;align-items:center;gap:12px;margin:14px 0 4px;pointer-events:none}
.hw-duo-art{position:relative;width:64px;height:58px;flex:none}
.hw-duo-moon{position:absolute;right:0;top:0;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#fffaf2,#f7d58e 60%,#e9b45a);box-shadow:0 0 18px rgba(247,213,142,.55)}
.hw-duo-art svg{position:absolute;left:0;bottom:0;width:40px;height:auto;animation:hw-float 4s ease-in-out infinite}
.hw-duo .hw-sticker{animation-duration:3.4s}

/* the HALLOWEEN coupon, ready to tap */
.hw-coupon{
  display:flex;align-items:center;gap:10px;width:100%;margin:4px 0 12px;cursor:pointer;text-align:left;
  background:linear-gradient(120deg,#0b0b0d,#3a2414);color:#fff;border:2px dashed var(--hw-orange);border-radius:14px;
  padding:12px 14px;font:600 14px/1.3 'Inter',system-ui,sans-serif;transform:rotate(-1deg);
  animation:hw-pulse 1.8s ease-in-out infinite;-webkit-tap-highlight-color:transparent;
}
.hw-coupon:hover{transform:rotate(0) scale(1.01)}
.hw-coupon .hw-c-emoji{font-size:28px;animation:hw-bob 2.4s ease-in-out infinite}
.hw-coupon b{color:var(--hw-amber);font-weight:800}
.hw-coupon .hw-c-tap{margin-left:auto;background:var(--hw-amber);color:var(--hw-ink);border-radius:999px;padding:6px 12px;font-weight:800;white-space:nowrap}
.hw-coupon.done{animation:none;border-style:solid;cursor:default}
.hw-coupon.done .hw-c-tap{background:var(--hw-white)}
.hw-c-timer{display:block;margin-top:3px;white-space:nowrap;font:800 13px/1 'Inter',system-ui,sans-serif;color:var(--hw-orange);font-variant-numeric:tabular-nums;letter-spacing:.02em}
/* narrow phones: the pill gets its own row so nothing spills past the chip */
@media (max-width:420px){
  .hw-coupon{flex-wrap:wrap;row-gap:8px}
  .hw-coupon .hw-c-tap{flex:1 0 100%;text-align:center;margin-left:0}
}

/* "Continue, to stop the chills": a groovy mystery-van button */
#reserveBtn.hw-van{background:var(--hw-orange);color:var(--hw-ink);border:2px solid var(--hw-ink);box-shadow:0 4px 0 var(--hw-wood-dk);font-weight:800}
#reserveBtn.hw-van:hover{background:#ff9a3d;transform:translateY(-1px);box-shadow:0 5px 0 var(--hw-wood-dk)}
#reserveBtn.hw-van:active{transform:translateY(3px);box-shadow:0 1px 0 var(--hw-wood-dk)}

/* the $200 offer form, in orange */
.offer.hw-offer h2{color:var(--hw-orange)}
.offer.hw-offer .pill{background:var(--hw-orange);color:var(--hw-ink);border-color:var(--hw-orange)}
.offer.hw-offer .pill:hover{background:#ff9a3d}
.offer.hw-offer .offer-code{border-color:var(--hw-orange)}
.offer.hw-offer .offer-code b{color:var(--hw-orange)}
.offer.hw-offer input:focus{border-color:var(--hw-orange);outline-color:var(--hw-orange)}

/* footer contact line */
.hw-contact{font:600 14px/1.5 'Inter',system-ui,sans-serif;text-align:center;padding:14px 16px 4px;color:rgba(255,255,255,.85)}
.hw-contact a{color:var(--hw-amber);font-weight:700;text-decoration:none;border-bottom:1.5px dashed currentColor}
footer .hw-contact{grid-column:1/-1;width:100%}

/* hidden pumpkins to find */
.hw-egg{
  position:absolute;z-index:5;width:34px;height:34px;padding:0;border:0;background:none;cursor:pointer;font-size:22px;line-height:34px;
  opacity:.55;transition:opacity .2s, transform .2s;-webkit-tap-highlight-color:transparent;
}
.hw-egg:hover,.hw-egg:focus-visible{opacity:1;transform:scale(1.25) rotate(-12deg)}
.hw-egg.found{animation:hw-pop .6s ease forwards;pointer-events:none}
.hw-pop{
  position:fixed;z-index:9999;pointer-events:none;font:800 16px/1 'Plus Jakarta Sans',system-ui,sans-serif;color:#fff;
  background:var(--hw-ink);color:var(--hw-orange);border:2px solid var(--hw-orange);border-radius:12px;padding:6px 10px;box-shadow:3px 3px 0 var(--hw-ink);
  animation:hw-rise 1.4s ease forwards;
}

/* flying bats and drifting ghosts (decoration only) */
.hw-sky{position:fixed;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.hw-drift{position:absolute;width:46px;opacity:.22;animation:hw-drift 9s ease-in-out infinite}
.hw-drift svg{width:100%;height:auto}
@media (max-width:640px){.hw-drift{width:30px;opacity:.16}.hw-drift:nth-child(n+3){display:none}}

/* treat confetti */
.hw-confetti{position:fixed;z-index:9998;pointer-events:none;font-size:26px;animation:hw-burst 1.6s cubic-bezier(.2,.8,.3,1) forwards}

@keyframes hw-wobble{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(-2deg) scale(1.04)}}
@keyframes hw-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes hw-float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}}
@keyframes hw-flicker{0%,100%{opacity:1}45%{opacity:.75}60%{opacity:.95}}
@keyframes hw-shiver{0%{transform:translateX(0) rotate(0)}25%{transform:translateX(-2px) rotate(-3deg)}75%{transform:translateX(2px) rotate(3deg)}}
@keyframes hw-pulse{0%,100%{box-shadow:0 0 0 0 rgba(245,166,35,.5)}50%{box-shadow:0 0 0 8px rgba(245,166,35,0)}}
@keyframes hw-pop{0%{transform:scale(1)}40%{transform:scale(1.8) rotate(20deg)}100%{transform:scale(0);opacity:0}}
@keyframes hw-rise{0%{transform:translateY(0) rotate(-6deg);opacity:0}15%{opacity:1}100%{transform:translateY(-60px) rotate(4deg);opacity:0}}
@keyframes hw-drift{0%,100%{transform:translate(0,0) rotate(-6deg)}25%{transform:translate(10px,-22px) rotate(4deg)}50%{transform:translate(0,-40px) rotate(-3deg)}75%{transform:translate(-10px,-18px) rotate(6deg)}}
@keyframes hw-burst{0%{transform:translate(0,0) rotate(0) scale(.6);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(1);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .hw-sticker,.hw-ghost,.hw-coupon,.hw-coupon .hw-c-emoji,.hw-hero-pumpkin svg,.hw-drift,.hw-flame{animation:none!important}
  .hw-sky{display:none}
  .hw-hero-pumpkin{transition:none}
}

/* a pumpkin for the mouse pointer, on computers only */
@media (hover:hover) and (pointer:fine){
  html.hw-cursor, html.hw-cursor *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M15 5c0-2 1-3.5 3-4l1 1.5c-1.4.6-2 1.6-1.8 3' fill='%233d5a2a'/%3E%3Cellipse cx='10' cy='18' rx='8' ry='11' fill='%23e8790f'/%3E%3Cellipse cx='22' cy='18' rx='8' ry='11' fill='%23e8790f'/%3E%3Cellipse cx='16' cy='18' rx='8' ry='12' fill='%23ff8a1f' stroke='%230b0b0d' stroke-width='1'/%3E%3Cpath d='M10 15l3-2 .6 3.4zM22 15l-3-2-.6 3.4zM9.5 21c3.5 4 9.5 4 13 0l-2.2.6-1.3 1.8-2-1.4-1 1.8-1-1.8-2 1.4-1.3-1.8z' fill='%230b0b0d'/%3E%3C/svg%3E") 8 4, auto}
  html.hw-cursor input[type=text], html.hw-cursor input[type=email], html.hw-cursor input[type=tel], html.hw-cursor textarea{cursor:text}
}