/* Halloween makeover. Intellectual property of Sidedoor Digital.
   Night shift on the building site. Everything is scoped to
   html.halloween, which halloween.js only adds during its date window,
   so outside October this file changes nothing. See halloween.js for
   the dates and the ?halloween=1 / ?halloween=0 preview switch.

   Rule of thumb for this file: reuse the site's own materials (plating,
   hazard stripe, stencil, sand) rather than adding new ones. No new
   accent colours, no glowing headings. */

/* ---------- Palette ----------
   Site gold warms to pumpkin. --yellow drives buttons, headings, the
   hours strip and every hazard stripe, so this one token carries the
   whole season. Rust, bone and the panels stay as they are. */
html.halloween {
  --yellow: #f4861f;
}

/* Same plating, after dark: heavier scrim, cold moonlight top right
   instead of the warm wash, pumpkin glow low on the left. */
html.halloween body::before {
  background:
    radial-gradient(ellipse 900px 620px at 92% -12%, rgba(205, 212, 235, 0.085), transparent 60%),
    radial-gradient(ellipse 1000px 560px at 6% 110%, rgba(244, 134, 31, 0.11), transparent 60%),
    linear-gradient(rgba(12, 11, 14, 0.5), rgba(12, 11, 14, 0.5)),
    url("/assets/img/bg/plate-texture.svg") center / cover no-repeat,
    #0f0e11;
}
html.halloween body { background: #0f0e11; }

html.halloween .btn-primary {
  background: linear-gradient(180deg, #f9a34f, var(--yellow) 55%, #cf6a0e);
  border-color: #6e3305;
  box-shadow: 0 5px 0 #5c2a04;
}

/* "IN." lit like a carved pumpkin, warmth only, no neon */
html.halloween .hero h1 span {
  text-shadow: 0 0 28px rgba(244, 134, 31, 0.3);
}

/* Floating background diggers turn into ghost diggers */
html.halloween .digger-float {
  filter: grayscale(1) brightness(2.2) contrast(0.8) blur(0.3px);
  opacity: 0.09;
}

/* ---------- Moonlight ---------- */
html.halloween .hw-moonlight {
  position: fixed;
  top: -170px;
  right: -130px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(236, 232, 220, 0.09) 0 26%, rgba(205, 212, 235, 0.05) 44%, transparent 70%);
}

/* ---------- Sand dust drifting low across the page ----------
   Same idea as fog, but in the sandpit's colours. */
html.halloween .hw-dust {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30vh;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
html.halloween .hw-dust span {
  position: absolute;
  bottom: -8vh;
  left: -50%;
  width: 200%;
  height: 100%;
  background:
    radial-gradient(ellipse 22% 46% at 14% 78%, rgba(214, 196, 168, 0.07), transparent 70%),
    radial-gradient(ellipse 26% 40% at 41% 84%, rgba(214, 196, 168, 0.06), transparent 70%),
    radial-gradient(ellipse 20% 44% at 67% 80%, rgba(214, 196, 168, 0.07), transparent 70%),
    radial-gradient(ellipse 24% 38% at 89% 86%, rgba(214, 196, 168, 0.06), transparent 70%);
  animation: hw-drift 52s linear infinite;
}
html.halloween .hw-dust span + span { animation-duration: 78s; animation-direction: reverse; bottom: -14vh; }

@keyframes hw-drift {
  from { transform: translateX(0); }
  to { transform: translateX(25%); }
}

/* ---------- Spider ----------
   Lets itself down from the top of the page now and then, no more. */
html.halloween .hw-spider {
  position: absolute;
  top: 0;
  right: 8%;
  width: 20px;
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}
html.halloween .hw-spider-thread {
  display: block;
  width: 1px;
  height: 34px;
  background: linear-gradient(rgba(239, 230, 216, 0.05), rgba(239, 230, 216, 0.35));
  animation: hw-thread 14s ease-in-out infinite;
}
html.halloween .hw-spider svg { width: 20px; height: 18px; display: block; margin-top: -1px; }

@keyframes hw-thread {
  0%, 30%, 100% { height: 34px; }
  48%, 70% { height: 150px; }
}

/* ---------- Bats ----------
   Two, crossing every so often, so one going over is a nice surprise
   rather than a screensaver. */
html.halloween .hw-bat-svg { width: 100%; height: auto; display: block; overflow: visible; }
html.halloween .hw-bat-svg path,
html.halloween .hw-bat-svg ellipse { fill: #0a090b; }
html.halloween .hw-wing {
  transform-box: view-box;
  transform-origin: 32px 15px;
  animation: hw-flap 0.2s ease-in-out infinite alternate;
}
@keyframes hw-flap {
  from { transform: scaleY(1); }
  to { transform: scaleY(0.3); }
}

html.halloween .hw-bat-layer {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}
html.halloween .hw-fly {
  position: absolute;
  left: 0;
  transform: translateX(-80px);
}
html.halloween .hw-fly-bob { display: block; animation: hw-bob 1.3s ease-in-out infinite alternate; }
html.halloween .hw-fly-1 { top: 16%; width: 34px; animation: hw-cross-ltr 24s linear 3s infinite; }
html.halloween .hw-fly-2 { top: 46%; width: 26px; animation: hw-cross-rtl 31s linear 14s infinite; }

@keyframes hw-cross-ltr {
  0% { transform: translate(-80px, 0) rotate(4deg); }
  22% { transform: translate(calc(100vw + 80px), -70px) rotate(-6deg); }
  100% { transform: translate(calc(100vw + 80px), -70px); }
}
@keyframes hw-cross-rtl {
  0% { transform: translate(calc(100vw + 80px), 0) scaleX(-1); }
  20% { transform: translate(-80px, 60px) scaleX(-1); }
  100% { transform: translate(-80px, 60px) scaleX(-1); }
}
@keyframes hw-bob {
  from { transform: translateY(-12px); }
  to { transform: translateY(12px); }
}

/* ---------- Hero sand pile props (homepage) ---------- */
html.halloween .hw-pile-props {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
html.halloween .hw-prop { position: absolute; display: block; }
html.halloween .hw-prop svg { position: relative; width: 100%; height: auto; display: block; }
/* Pumpkins sit slightly into the sand, the stone is sunk a third deep
   with its own little drift of sand round the base. */
html.halloween .hw-prop-p1 { left: 19.5%; bottom: 1.6%; width: 7.4%; }
html.halloween .hw-prop-g  { left: 27%;   bottom: 1.4%; width: 4.4%; transform: rotate(-6deg); transform-origin: bottom center; }
html.halloween .hw-prop-p2 { left: 78.8%; bottom: 1.4%; width: 5.8%; }

/* Candlelight spilling onto the sand around each pumpkin */
html.halloween .hw-glow {
  position: absolute;
  left: -70%;
  right: -70%;
  bottom: -18%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 170, 70, 0.28), rgba(255, 140, 40, 0.08) 45%, transparent 70%);
  animation: hw-candle 3.2s ease-in-out infinite;
}
html.halloween .hw-pumpkin-face { animation: hw-candle 3.2s ease-in-out infinite; }

@keyframes hw-candle {
  0%, 100% { opacity: 1; }
  22% { opacity: 0.82; }
  26% { opacity: 0.96; }
  58% { opacity: 0.86; }
}

/* ---------- Caution tape (inner pages) ----------
   Built from the site's own hazard stripe, a strip of tape across the
   top with a stencilled notice on a black patch in the middle. */
html.halloween .hw-tape {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  padding: 7px 0;
  background: repeating-linear-gradient(
    135deg,
    var(--yellow), var(--yellow) 12px,
    var(--hazard-dark) 12px, var(--hazard-dark) 24px
  );
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
  text-decoration: none;
}
html.halloween .hw-tape-text {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 14px;
  max-width: calc(100% - 32px);
  padding: 5px 16px 4px;
  background: var(--hazard-dark);
  color: var(--bone);
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
}
html.halloween .hw-tape-main {
  font-family: var(--font-stencil);
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--yellow);
}
html.halloween .hw-tape-extra:empty { display: none; }
html.halloween .hw-tape:hover .hw-tape-extra { color: var(--yellow); }

/* ---------- Homepage intro ----------
   Reuses the normal boot screen's own classes (boot-inner, boot-logo,
   boot-bar, boot-text) so type, sizes and the hazard bar match exactly,
   then adds the night scene round them. */
html.halloween .boot-overlay.hw-boot {
  background:
    radial-gradient(ellipse 70% 55% at 50% 34%, rgba(205, 212, 235, 0.07), transparent 70%),
    #0f0e11;
  animation: hw-boot-wipe 3s ease forwards;
  cursor: pointer;
  overflow: hidden;
}
html.halloween .hw-intro { width: min(320px, 86vw); }

html.halloween .hw-intro-sky {
  position: relative;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

html.halloween .hw-moon {
  position: absolute;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 64%, rgba(80, 70, 50, 0.13) 0 8%, transparent 9%),
    radial-gradient(circle at 72% 30%, rgba(80, 70, 50, 0.1) 0 6%, transparent 7%),
    radial-gradient(circle at 76% 70%, rgba(80, 70, 50, 0.1) 0 5%, transparent 6%),
    radial-gradient(circle at 38% 34%, #f5efe0, #e2d6b8 72%, #c9b991);
  box-shadow: 0 0 50px 10px rgba(236, 228, 205, 0.12);
  opacity: 0;
  transform: translateY(14px);
  animation: hw-moon-rise 0.8s ease-out 0.05s forwards;
}

/* The logo keeps its boot size and entrance, just sat in front of the moon */
html.halloween .hw-intro-logo {
  position: relative;
  z-index: 2;
  height: 64px;
  width: 64px;
  box-shadow: 0 0 0 3px #0f0e11;
}

html.halloween .hw-intro-bat {
  position: absolute;
  z-index: 3;
  left: calc(50% - 20px);
  top: calc(50% - 10px);
  width: 40px;
  opacity: 0;
  animation: hw-bat-out 1.5s ease-in var(--delay) forwards;
}
@keyframes hw-bat-out {
  0% { opacity: 0; transform: translate(0, 0) scale(0.2); }
  15% { opacity: 1; }
  100% { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(var(--s)); }
}

/* Sand pile with a ghost climbing out of it. The pile is drawn last so
   it covers the ghost until it rises. */
html.halloween .hw-intro-ground {
  position: relative;
  height: 86px;
  margin-top: 4px;
  overflow: hidden;
}
html.halloween .hw-intro-pile {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 46px;
  z-index: 3;
}
html.halloween .hw-intro-ghost {
  position: absolute;
  z-index: 1;
  left: calc(50% - 19px);
  bottom: 2px;
  width: 38px;
  transform: translateY(56px);
  animation: hw-ghost-rise 0.9s cubic-bezier(0.2, 0.8, 0.3, 1.25) 1.05s forwards, hw-ghost-sway 1.3s ease-in-out 1.95s infinite alternate;
}
html.halloween .hw-intro-stone {
  position: absolute;
  z-index: 2;
  bottom: 14px;
  width: 26px;
}
html.halloween .hw-intro-stone svg,
html.halloween .hw-intro-pumpkin svg { display: block; width: 100%; height: auto; }
html.halloween .hw-intro-stone--l { left: 20%; transform: rotate(-8deg); }
html.halloween .hw-intro-stone--r { right: 22%; width: 22px; bottom: 12px; transform: rotate(6deg); }
html.halloween .hw-intro-pumpkin {
  position: absolute;
  z-index: 4;
  right: 8%;
  bottom: 4px;
  width: 34px;
}

@keyframes hw-ghost-rise {
  from { transform: translateY(56px); }
  to { transform: translateY(-4px); }
}
@keyframes hw-ghost-sway {
  from { transform: translateY(-4px) rotate(-3deg); }
  to { transform: translateY(-10px) rotate(3deg); }
}

/* The normal boot fill runs for 1s, stretch it to the longer intro */
html.halloween .hw-intro-fill { animation: boot-fill 2.1s ease 0.3s forwards; }
html.halloween .hw-intro-text { animation: boot-text-in 0.4s ease 0.5s forwards; }

@keyframes hw-moon-rise {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hw-boot-wipe {
  0%, 86% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}


/* ---------- Lightning ----------
   A faint double flash every 27 seconds. Low enough to read as weather
   outside, nowhere near flashing-content territory. */
html.halloween .hw-flash {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: radial-gradient(ellipse at 70% 0%, rgba(225, 230, 255, 1), rgba(200, 210, 245, 0.6) 60%);
  opacity: 0;
  animation: hw-lightning 27s linear 6s infinite;
}
@keyframes hw-lightning {
  0%, 100% { opacity: 0; }
  0.4% { opacity: 0.13; }
  0.9% { opacity: 0.02; }
  1.4% { opacity: 0.09; }
  2.4% { opacity: 0; }
}

/* ---------- Eyes in the dark ----------
   Pairs of eyes in the empty margins either side of the content. Each
   pair opens, blinks once, and closes again on its own long cycle.
   Wide screens only, phones have no margins to hide them in. */
html.halloween .hw-eyes {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
html.halloween .hw-eye-pair {
  position: absolute;
  display: flex;
  gap: 9px;
}
html.halloween .hw-eye-pair i {
  display: block;
  width: 8px;
  height: 5px;
  border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
  background: radial-gradient(circle at 50% 60%, #fff0a8, #f4861f 70%);
  box-shadow: 0 0 8px 2px rgba(244, 134, 31, 0.55);
  transform: scaleY(0);
  animation: hw-eyes-open var(--cycle, 19s) ease-in-out var(--wait, 0s) infinite;
}
html.halloween .hw-eye-pair i + i { transform-origin: center; }
html.halloween .hw-eye-1 { left: 2.2%; top: 34%; --cycle: 19s; --wait: 4s; }
html.halloween .hw-eye-2 { right: 2.6%; top: 58%; --cycle: 23s; --wait: 11s; gap: 7px; }
html.halloween .hw-eye-3 { left: 3.4%; top: 78%; --cycle: 29s; --wait: 17s; }
html.halloween .hw-eye-4 { right: 3.2%; top: 22%; --cycle: 25s; --wait: 22s; }
html.halloween .hw-eye-2 i { width: 6px; height: 4px; }
@keyframes hw-eyes-open {
  0%, 72%, 100% { transform: scaleY(0); }
  75% { transform: scaleY(1); }
  82% { transform: scaleY(1); }
  83% { transform: scaleY(0.1); }
  84.5% { transform: scaleY(1); }
  92% { transform: scaleY(1); }
  95% { transform: scaleY(0); }
}
@media (max-width: 1180px) {
  html.halloween .hw-eyes { display: none; }
}

/* ---------- The hand in the hero sand pile ----------
   Sits in a box whose bottom edge is just under the pile's surface, so
   the hand rises out of it, has a grab about, and sinks back. The sand
   lip in front hides the join. */
html.halloween .hw-hand-hole {
  position: absolute;
  left: 34.5%;
  bottom: 5.2%;
  width: 4.6%;
  height: 11%;
  overflow: hidden;
}
html.halloween .hw-hand-rise {
  position: absolute;
  inset: 0;
  transform: translateY(105%);
  animation: hw-hand 12s ease-in-out 2.5s infinite;
  transform-origin: 50% 100%;
}
html.halloween .hw-hand { display: block; width: 100%; height: 100%; }
html.halloween .hw-prop-lip { left: 33.4%; bottom: 4.6%; width: 6.8%; }
html.halloween .hw-lip { display: block; width: 100%; height: auto; aspect-ratio: 100 / 24; }

@keyframes hw-hand {
  0%, 46% { transform: translateY(105%) rotate(0deg); }
  54% { transform: translateY(8%) rotate(-4deg); }
  58% { transform: translateY(4%) rotate(7deg); }
  62% { transform: translateY(6%) rotate(-6deg); }
  66% { transform: translateY(3%) rotate(5deg); }
  74% { transform: translateY(6%) rotate(0deg); }
  84%, 100% { transform: translateY(105%) rotate(0deg); }
}

/* ---------- Pumpkin sticker on the rates board ---------- */
html.halloween .rate-board { clip-path: none; overflow: visible; }
html.halloween .hw-board-sticker {
  position: absolute;
  top: -30px;
  right: -16px;
  width: 64px;
  transform: rotate(12deg);
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.5));
  pointer-events: none;
}
html.halloween .hw-board-sticker svg { display: block; width: 100%; height: auto; }

/* ---------- Night grade on the real photos ---------- */
html.halloween .pit-band-photo img,
html.halloween .ps img,
html.halloween .makers-photo,
html.halloween .find-us-photo img {
  filter: brightness(0.72) saturate(0.7) contrast(1.12) sepia(0.12);
}
html.halloween .pit-band-photo::after {
  background:
    radial-gradient(ellipse 70% 90% at 50% 40%, transparent 40%, rgba(8, 7, 10, 0.6)),
    linear-gradient(180deg, rgba(15, 14, 17, 0.25), transparent 40%, rgba(15, 14, 17, 0.9));
}
html.halloween .ps::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(8, 7, 10, 0.55));
}
html.halloween .ps figcaption { z-index: 1; }

/* ---------- October panel (homepage) ---------- */
html.halloween .hw-october {
  position: relative;
  z-index: 1;
  padding: 56px 0 64px;
}
html.halloween .hw-oct-plate {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--edge);
  background:
    radial-gradient(ellipse 60% 80% at 85% 100%, rgba(244, 134, 31, 0.22), transparent 70%),
    linear-gradient(174deg, rgba(239, 230, 216, 0.04), transparent 40%),
    #141217;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}
html.halloween .hw-oct-copy {
  position: relative;
  z-index: 2;
  padding: 52px 0 48px 48px;
}
html.halloween .hw-oct-copy h2 {
  margin: 4px 0 18px;
  font-size: clamp(32px, 4.8vw, 56px);
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--bone);
}
html.halloween .hw-oct-copy p {
  margin: 0 0 14px;
  max-width: 440px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--bone);
  opacity: 0.82;
}
html.halloween .hw-oct-dates:empty { display: none; }
html.halloween .hw-oct-dates {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 17px !important;
  letter-spacing: 0.03em;
  color: var(--yellow) !important;
  opacity: 1 !important;
}
html.halloween .hw-oct-cta { display: inline-block; margin-top: 10px; text-decoration: none; }

/* Caution tape strapped across the top right corner */
html.halloween .hw-oct-tape {
  position: absolute;
  z-index: 3;
  top: 34px;
  right: -70px;
  width: 360px;
  transform: rotate(14deg);
  padding: 7px 0;
  background: repeating-linear-gradient(135deg, var(--yellow) 0 14px, #1a1a1a 14px 28px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
  text-align: center;
  overflow: hidden;
}
html.halloween .hw-oct-tape span {
  display: inline-block;
  padding: 3px 10px 2px;
  background: #1a1a1a;
  font-family: var(--font-stencil);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yellow);
  white-space: nowrap;
}

/* The little graveyard on the right of the panel */
html.halloween .hw-oct-art {
  position: relative;
  min-height: 300px;
}
html.halloween .hw-oct-art svg { display: block; width: 100%; height: auto; }
html.halloween .hw-oct-moon {
  position: absolute;
  top: 46px;
  left: 30%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 64%, rgba(80, 70, 50, 0.14) 0 8%, transparent 9%),
    radial-gradient(circle at 70% 32%, rgba(80, 70, 50, 0.1) 0 7%, transparent 8%),
    radial-gradient(circle at 38% 34%, #f5efe0, #ddd0b0 72%, #c4b38a);
  box-shadow: 0 0 60px 14px rgba(236, 228, 205, 0.1);
  opacity: 0.85;
}
html.halloween .hw-oct-mound {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 130px !important;
  z-index: 3;
}
html.halloween .hw-oct-tree {
  position: absolute;
  z-index: 1;
  left: 12%;
  bottom: 90px;
  width: auto !important;
  height: 74% !important;
}
html.halloween .hw-oct-bat { position: absolute; z-index: 2; }
html.halloween .hw-oct-bat--a { left: 52%; top: 64px; width: 38px; transform: rotate(-8deg); }
html.halloween .hw-oct-bat--b { left: 62%; top: 112px; width: 24px; transform: rotate(10deg); }
html.halloween .hw-oct-bat .hw-wing { animation-duration: 0.26s; }
html.halloween .hw-oct-stone { position: absolute; z-index: 2; }
html.halloween .hw-oct-stone--a { left: 28%; bottom: 82px; width: 70px; transform: rotate(-7deg); }
html.halloween .hw-oct-stone--b { left: 50%; bottom: 92px; width: 52px; transform: rotate(5deg); }
html.halloween .hw-oct-pumpkin { position: absolute; z-index: 4; }
html.halloween .hw-oct-pumpkin svg { position: relative; }
html.halloween .hw-oct-pumpkin--a { right: 3%; bottom: 34px; width: 104px; }
html.halloween .hw-oct-pumpkin--b { left: 12%; bottom: 18px; width: 70px; }
html.halloween .hw-oct-hand {
  position: absolute;
  z-index: 2;
  left: 63%;
  bottom: 88px;
  width: 44px;
  height: 86px;
  overflow: hidden;
}
html.halloween .hw-oct-hand .hw-hand-rise { animation-delay: 0.5s; animation-duration: 10s; }

@media (max-width: 760px) {
  html.halloween .hw-october { padding: 40px 0 44px; }
  html.halloween .hw-oct-plate { grid-template-columns: minmax(0, 1fr); gap: 0; }
  html.halloween .hw-oct-art { order: -1; min-height: 240px; }
  html.halloween .hw-oct-moon { top: 26px; width: 80px; height: 80px; }
  html.halloween .hw-oct-tree { bottom: 60px; height: 70% !important; left: 6%; }
  html.halloween .hw-oct-hand { bottom: 58px; width: 34px; height: 66px; }
  html.halloween .hw-oct-pumpkin--a { width: 80px; bottom: 22px; }
  html.halloween .hw-oct-pumpkin--b { width: 54px; }
  html.halloween .hw-oct-bat--a { top: 40px; }
  html.halloween .hw-oct-bat--b { top: 84px; }
  html.halloween .hw-oct-copy { padding: 6px 24px 34px; }
  html.halloween .hw-oct-tape { top: 20px; right: -90px; width: 300px; }
  html.halloween .hw-oct-stone--a { width: 50px; bottom: 56px; }
  html.halloween .hw-oct-stone--b { width: 38px; bottom: 64px; }
  html.halloween .hw-oct-mound { height: 90px !important; }
  html.halloween .hw-board-sticker { right: -6px; width: 54px; }
}

/* ---------- Intro: lightning and the hand ---------- */
html.halloween .hw-intro-flash {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: #e9ecff;
  opacity: 0;
  animation: hw-intro-flash 0.9s linear 0.05s forwards;
}
@keyframes hw-intro-flash {
  0% { opacity: 0; }
  8% { opacity: 0.55; }
  18% { opacity: 0.05; }
  28% { opacity: 0.35; }
  50%, 100% { opacity: 0; }
}
html.halloween .hw-intro-hand {
  position: absolute;
  z-index: 2;
  left: 34%;
  bottom: 20px;
  width: 22px;
  height: 46px;
  overflow: hidden;
}
html.halloween .hw-intro-hand .hw-hand-rise {
  animation: hw-intro-hand 1.4s cubic-bezier(0.2, 0.8, 0.3, 1) 1.45s forwards;
}
@keyframes hw-intro-hand {
  0% { transform: translateY(105%) rotate(0deg); }
  55% { transform: translateY(6%) rotate(-6deg); }
  75% { transform: translateY(4%) rotate(6deg); }
  100% { transform: translateY(5%) rotate(-2deg); }
}


/* ---------- Music mute button ----------
   Small steel tab bottom left with a hazard edge, same materials as the
   rest of the site. Sits above the homepage's mobile book bar. */
html.halloween .hw-sound {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 16px;
  background:
    linear-gradient(90deg, transparent 0 5px, rgba(20, 18, 23, 0.92) 5px),
    repeating-linear-gradient(135deg, var(--yellow) 0 4px, var(--hazard-dark) 4px 8px);
  border: 1px solid var(--edge);
  border-left: 0;
  border-radius: 2px;
  color: var(--bone);
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  -webkit-appearance: none;
  appearance: none;
  /* It's a <button>, and base.css gives every button width: 100% and a
     top margin, which stretched this into a full-width bar across the
     bottom of the screen. On /book that bar sat over the date and time
     fields and swallowed taps meant for them. Keep it a small tab. */
  width: auto;
  margin: 0;
  transform: none;
}
html.halloween .hw-sound svg { width: 18px; height: 18px; color: var(--yellow); }
html.halloween .hw-sound.is-muted { color: var(--steel); }
html.halloween .hw-sound.is-muted svg { color: var(--steel); }
html.halloween .hw-sound:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  html.halloween .hw-sound:hover { color: var(--yellow); }
}
@media (max-width: 760px) {
  html.halloween .hw-sound { left: 10px; bottom: 10px; padding: 7px 11px 7px 14px; font-size: 12px; }
  html.halloween body.home .hw-sound { bottom: 84px; }
}

/* ---------- Small screens ---------- */
@media (max-width: 600px) {
  html.halloween .hw-spider { right: 26%; }
  html.halloween .hw-fly-1 { width: 26px; }
  html.halloween .hw-fly-2 { width: 20px; }
  html.halloween .hw-moonlight { width: 260px; height: 260px; top: -110px; right: -90px; }
  html.halloween .hw-tape-text { font-size: 12px; padding: 4px 10px 3px; }
}

/* ---------- Reduced motion: dressed up, nothing moving ---------- */
@media (prefers-reduced-motion: reduce) {
  html.halloween .hw-spider-thread,
  html.halloween .hw-dust span,
  html.halloween .hw-wing,
  html.halloween .hw-glow,
  html.halloween .hw-pumpkin-face {
    animation: none !important;
  }
  html.halloween .hw-bat-layer { display: none; }
  html.halloween .hw-hand-rise { animation: none !important; transform: translateY(8%); }
}

/* Mute tab on /book and the gift card pages: sits in the top bar rather
   than fixed over the form. See the sound button code in halloween.js. */
html.halloween .hw-sound.hw-sound--inline {
  position: static;
  align-self: center;
  margin: 0 auto;
  box-shadow: none;
}