/* ==========================================================================
   Halloween dress-up — home page, October only

   Every rule is scoped under html.halloween, which the inline script in
   <head> sets from the visitor's own clock; outside October nothing here
   matches and the file costs one cached request. The decorations themselves
   are added by js/halloween.js.

   Motion is transform- and opacity-only, like the rest of the site, so the
   existing pause switch (html.motion-paused), prefers-reduced-motion and the
   hidden-tab pause all reach it. Under reduced motion each piece settles on a
   composed resting frame rather than the start of its loop.
   ========================================================================== */

html.halloween .hw { pointer-events: none; user-select: none; }
html.halloween .hw svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ------------------------------ Hero: dusk --------------------------------- */
/* The sunny sky is pulled toward a lavender-to-peach dusk. Multiplied, so the
   white clouds take the colour while the dark barn and fence stay put, and it
   has faded out by the time it reaches the bottles. It sits under the existing
   white veil, so the headline keeps exactly the contrast it has now. */
html.halloween .hero {
  background-image:
    linear-gradient(180deg,
      rgba(98, 70, 160, .74) 0%,
      rgba(164, 104, 172, .52) 24%,
      rgba(255, 150, 92, .32) 46%,
      rgba(255, 150, 92, 0) 66%),
    url('../img/hero.webp');
  background-blend-mode: multiply, normal;
}

/* Above the veil, below the copy. Clipped, so a bat leaving the frame never
   widens the page. */
html.halloween .hw-sky {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* --- moon --- */
html.halloween .hw-moon {
  position: absolute;
  top: clamp(22px, 3.6vw, 56px);
  right: clamp(22px, 13vw, 210px);
  width: clamp(62px, 7.6vw, 112px);
}
html.halloween .hw-moon > svg { position: relative; z-index: 1; }
html.halloween .hw-moon::before {
  content: '';
  position: absolute; inset: -55%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 243, 196, 1) 0%, rgba(255, 243, 196, .6) 36%, rgba(255, 243, 196, 0) 68%);
  opacity: .9;
  animation: hw-glow 5s ease-in-out infinite alternate;
}
@keyframes hw-glow {
  from { opacity: .55; transform: scale(.92); }
  to   { opacity: 1;   transform: scale(1.05); }
}
html.halloween .hw-star {
  position: absolute; z-index: 1;
  animation: hw-twinkle 2.8s ease-in-out infinite;
}
@keyframes hw-twinkle {
  0%, 100% { opacity: .2; transform: scale(.55) rotate(0deg); }
  50%      { opacity: 1;  transform: scale(1) rotate(45deg); }
}

/* --- bats --- */
/* Each bat rides a full-width track, so a translate of 100% on the track is
   exactly one crossing of the hero at any width. Speeds, heights and head
   starts differ per bat (set inline) so they never fly in formation. */
html.halloween .hw-bat-track {
  position: absolute; left: 0; top: var(--y);
  width: 100%;
  transform: translateX(var(--rest));
  animation: hw-fly var(--dur) linear var(--delay) infinite;
}
html.halloween .hw-bat-track--rtl { animation-direction: reverse; }
@keyframes hw-fly {
  from { transform: translateX(-6%); }
  to   { transform: translateX(106%); }
}
html.halloween .hw-bat {
  position: absolute; left: calc(var(--w) * -1);
  width: var(--w);
  animation: hw-bob 2.3s ease-in-out infinite alternate;
}
@keyframes hw-bob {
  from { transform: translateY(-9px) rotate(-5deg); }
  to   { transform: translateY(9px)  rotate(5deg); }
}
html.halloween .hw-wing {
  transform-box: fill-box;
  animation: hw-flap-l .3s ease-in-out infinite alternate;
}
html.halloween .hw-wing--l { transform-origin: 100% 45%; }
html.halloween .hw-wing--r { transform-origin: 0 45%; animation-name: hw-flap-r; }
@keyframes hw-flap-l {
  from { transform: rotate(18deg); }
  to   { transform: rotate(-20deg) scaleY(.72); }
}
@keyframes hw-flap-r {
  from { transform: rotate(-18deg); }
  to   { transform: rotate(20deg) scaleY(.72); }
}

/* --- spider --- */
/* Lets itself down from under the header wave on a single thread, and swings
   from a pivot well above the frame so it sways like a pendulum rather than
   rocking on the spot. The thread runs far past the top and is clipped there. */
html.halloween .hw-spider {
  position: absolute; top: 0; left: 51%;
  width: clamp(38px, 3.4vw, 50px);
  transform: translateY(92px);
  transform-origin: 50% -240px;
  animation: hw-dangle 4.8s ease-in-out infinite alternate;
}
html.halloween .hw-spider::before {
  content: '';
  position: absolute; left: 50%; bottom: 58%;
  width: 1.5px; height: 1200px; margin-left: -.75px;
  background: rgba(29, 29, 27, .55);
}
@keyframes hw-dangle {
  from { transform: translateY(46px)  rotate(2.5deg); }
  to   { transform: translateY(112px) rotate(-2.5deg); }
}

/* --- greeting --- */
html.halloween .hw-badge {
  display: inline-flex; align-items: center; gap: .55em;
  margin: 0 0 clamp(14px, 1.8vw, 24px);
  padding: .5em 1.15em .46em .7em;
  border-radius: 300px;
  background: #3d2759;
  color: #fff1dc;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.02rem, 1.3vw, 1.2rem);
  letter-spacing: .05em;
  line-height: 1;
  transform: rotate(-2.5deg);
  box-shadow: 0 8px 18px rgba(61, 39, 89, .22);
}
html.halloween .hw-badge__icon { display: inline-block; width: 1.55em; margin-block: -.25em; }

/* ------------------------------- Header ------------------------------------ */
/* The cow in the logo gets a witch's hat, tipped back over her tuft — in the
   masthead and again on the footer's cream pill, where the offsets add the
   pill's padding to the same proportions of the logo. */
html.halloween .site-logo,
html.halloween .ft-logo { position: relative; }
html.halloween .hw-logo-hat {
  position: absolute;
  left: 2.5%; top: -21%;
  width: 28%;
  transform: rotate(-13deg);
}
html.halloween .ft-logo .hw-logo-hat {
  --lw: clamp(220px, 26vw, 320px);
  left: calc(34px + var(--lw) * .025);
  top: calc(20px - var(--lw) * .087);
  width: calc(var(--lw) * .28);
}

/* ---------------------------- Section eyebrows ----------------------------- */
html.halloween .hw-eb {
  display: inline-block;
  width: 1.05em;
  margin-right: .38em;
  vertical-align: -.1em;
}
html.halloween .hw-eb--end { margin: 0 0 0 .38em; transform: scaleX(-1); }
html.halloween .hw-hug { white-space: nowrap; }

/* -------------------------------- Cobwebs ---------------------------------- */
html.halloween .hw-webbed { position: relative; }
html.halloween .hw-web {
  position: absolute; top: 0;
  width: clamp(84px, 11vw, 158px);
  color: rgba(29, 29, 27, .2);
}
html.halloween .hw-web--l { left: 0; }
html.halloween .hw-web--r { right: 0; transform: scaleX(-1); }

/* ------------------------------ Story: ghost ------------------------------- */
/* Peekaboo over the top of the family photograph. The ghost sits behind the
   picture and ducks down out of sight; the two hands sit in front, holding the
   frame, so they stay put while it bobs. A zero-height wrapper pinned to the
   picture's top edge carries both, and the offsets are margins because a
   margin percentage is taken from the width — the only dimension it has. */
html.halloween .hw-haunted { position: relative; }
html.halloween .hw-haunted > img { position: relative; z-index: 1; }
html.halloween .hw-ghost,
html.halloween .hw-ghost-hands { position: absolute; right: 13%; width: clamp(62px, 6.6vw, 94px); }
html.halloween .hw-ghost {
  z-index: 0;
  bottom: 100%;
  margin-bottom: calc(clamp(62px, 6.6vw, 94px) * -.42);
  transform-origin: 50% 100%;
  animation: hw-peek 7.5s ease-in-out infinite;
}
html.halloween .hw-ghost-hands {
  z-index: 2;
  top: calc(clamp(62px, 6.6vw, 94px) * -.12);
  margin-right: calc(clamp(62px, 6.6vw, 94px) * -.1);
  width: calc(clamp(62px, 6.6vw, 94px) * 1.2);
}
@keyframes hw-peek {
  0%, 10%  { transform: translateY(56%); }
  22%      { transform: translateY(0) rotate(0deg); }
  33%      { transform: translateY(0) rotate(-9deg); }
  45%      { transform: translateY(0) rotate(8deg); }
  56%      { transform: translateY(0) rotate(0deg); }
  66%, 100%{ transform: translateY(56%); }
}

/* -------------------------- Why glass bottles: cow ------------------------- */
/* Shares .why__cow's box exactly — same height, anchor and aspect ratio — so the
   hat and pail, drawn in her own artwork coordinates, sit on her at any width. */
html.halloween .hw-cow {
  position: absolute; z-index: 3;
  height: 108%;
  aspect-ratio: 334 / 620;
  left: 63%; bottom: -7%;
}
html.halloween .hw-cow svg { height: 100%; }
html.halloween .hw-pail__swing { animation: hw-swing 1.9s ease-in-out infinite alternate; }
@keyframes hw-swing {
  from { transform: rotate(-7deg); }
  to   { transform: rotate(7deg); }
}

/* ------------------------------ Footer truck ------------------------------- */
/* Laid exactly over .ft-truck and bobbing on its keyframes; halloween.js
   starts it in step with the truck. */
html.halloween .hw-truck {
  position: absolute; z-index: 3;
  bottom: 6px; left: 50%; translate: -50% 0;
  width: clamp(200px, 26vw, 340px);
  aspect-ratio: 680 / 425;
  animation: truckBob 3.4s ease-in-out infinite;
}
html.halloween .hw-truck svg { height: 100%; }

/* ------------------------------ Pausing ------------------------------------ */
html.is-tab-hidden .hw-sky *,
html.is-tab-hidden .hw-haunted *,
html.is-tab-hidden .hw-cow *,
.hw-sky.is-offscreen *,
.hw-haunted.is-offscreen * { animation-play-state: paused; }

/* ---------------------------- Narrow screens ------------------------------- */
@media (max-width: 900px) {
  /* One column: the cow is hidden, so her costume goes with her. */
  html.halloween .hw-cow { display: none; }
  /* The copy runs the full width here, so the spider moves out to the edge,
     where it hangs clear of the headline. */
  html.halloween .hw-spider { left: auto; right: 5%; }
  html.halloween .hw-moon { right: auto; left: 5%; }
  /* The copy stacks higher in a narrow hero, so the bats keep to the band
     above the greeting. */
  html.halloween .hw-bat-track { top: calc(var(--y) * .55); }
}
@media (max-width: 560px) {
  html.halloween .hw-spider { display: none; }
}

/* Settle the pieces that travel on a composed frame. The site's own rule has
   already stopped every animation. */
@media (prefers-reduced-motion: reduce) {
  html.halloween .hw-spider { transform: translateY(80px); }
}

@media print {
  html.halloween .hw { display: none !important; }
  html.halloween .hero { background-image: url('../img/hero.webp'); }
}