/* halloween.css — seasonal skin for the homepage hero.
 *
 * EVERYTHING here is scoped under html.hw, which halloween.js adds only inside
 * the season (or with ?spooky=1). Nothing in this file changes the live search
 * markup, the booking ids (#s-where/#s-in/#s-out/#s-guests) or any real copy —
 * it is decoration over the page that is already there, so wowSearch(),
 * site-content.js and home-enhance.js all keep working untouched.
 */

html.hw{
  /* ONE knob for the dance troupe: its width. The room the crew needs above the
     search bar is derived from it below, so the two can never drift apart. */
  --hw-crew:min(272px,62vw);
  --hw-moon:#ffe9a8;
}
/* a big screen has the height to spare for the crew at its designed size */
@media (min-height:820px){
  html.hw{ --hw-crew:min(380px,62vw); }
}

/* ── announcement strip ─────────────────────────────────────────────
   site-content.js rewrites .anno's innerHTML from the DB, so the seasonal
   line is a ::after — CSS content survives that rewrite. */
html.hw .anno{ background:linear-gradient(90deg,#20093a 0%,#5c1c0e 50%,#20093a 100%); }
html.hw .anno b{ color:#ffb04d; }
/* every escape is closed with \00a0 — a bare space after a hex escape is eaten as
   the escape's terminator, which is what glued the pumpkin to "Spooky". */
html.hw .anno::after{ content:"\00a0\00a0|\00a0\00a0\1F383\00a0Spooky season on the Coast"; }

/* ── hero: night grade ──────────────────────────────────────────── */
html.hw .hero .bg{ filter:saturate(.68) brightness(.58) hue-rotate(-10deg); }
html.hw .hero .scrim{
  background:
    radial-gradient(70% 55% at 80% 12%, rgba(255,150,40,.26) 0%, transparent 62%),
    linear-gradient(180deg, rgba(20,6,34,.70) 0%, rgba(28,9,48,.44) 36%, rgba(12,4,24,.93) 100%);
}
/* the rose "sun" becomes a full moon — same element, no new markup.
   Two faint craters keep it from reading as a sun; the disc stays pale so the
   gold eyebrow and the headline are still legible where they cross it. */
html.hw .hero .sun{
  right:7%; top:46px; left:auto; width:128px; height:128px;
  opacity:1; mix-blend-mode:normal; animation:none;
  background:
    radial-gradient(circle at 63% 65%, rgba(146,136,118,.26) 0 7%, transparent 8%),
    radial-gradient(circle at 37% 41%, rgba(146,136,118,.22) 0 5%, transparent 6%),
    radial-gradient(circle at 44% 31%, #fffdf6 0%, var(--hw-moon) 46%, #e4dcc4 71%, transparent 72%);
  box-shadow:0 0 70px 24px rgba(240,232,205,.20);
}
/* ground fog along the bottom of the hero (.hero is overflow:hidden) */
html.hw .hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:130px; z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg, transparent 0%, rgba(188,160,222,.16) 55%, rgba(206,180,238,.30) 100%);
}
/* #ff8420, not a lighter orange: the hero photo comes from the DB, so the
   headline has to clear 3:1 even against the brightest backdrop pixel. */
html.hw .hero h1 i{ color:#ff8420; }

/* ── bats + cobweb (injected by halloween.js) ───────────────────── */
html.hw .hw-bat{
  position:absolute; z-index:1; aspect-ratio:2; color:#140522; opacity:.8; pointer-events:none;
  animation:hw-drift linear infinite;
}
html.hw .hw-bat svg{ width:100%; height:100%; display:block; animation:hw-flap .34s ease-in-out infinite alternate; }
@keyframes hw-drift{
  0%   { transform:translate3d(-14vw,0,0); }
  50%  { transform:translate3d(52vw,-30px,0); }
  100% { transform:translate3d(118vw,6px,0); }
}
@keyframes hw-flap{ from{ transform:scaleY(1); } to{ transform:scaleY(.52); } }

/* right corner: on the left the strands sat over the first words of the eyebrow */
html.hw .hw-web{
  position:absolute; top:0; right:0; width:132px; height:132px; z-index:1;
  color:#fff; opacity:.17; pointer-events:none;
  transform:scaleX(-1);
}
html.hw .hw-web svg{ width:100%; height:100%; display:block; }

/* ── the dance troupe, standing on the search bar ───────────────────
   .searchx is position:relative, so the crew is anchored to it: its feet sit
   just inside the bar's top edge, and the room above the bar is bought with
   extra margin-top — see the @media (min-height) block below, which is where
   that margin lives, because it is height the fold has to be able to afford. */
html.hw .searchx{
  background:rgba(32,11,52,.50);
  border-color:rgba(255,160,70,.55);
  box-shadow:0 18px 44px -22px rgba(0,0,0,.6), 0 0 44px -10px rgba(255,122,26,.42);
}
html.hw .searchx .ficon{ color:#ff9f4a; }

html.hw .hw-crew{
  display:none;   /* only shown where the fold can pay for it — see below */
  position:absolute; left:50%; bottom:calc(100% - 12px); transform:translateX(-50%);
  width:var(--hw-crew); aspect-ratio:900/330; z-index:3; pointer-events:none;
  background:url("assets/thriller-zombies.webp?v=2") 0 0 / 100% 400% no-repeat;
  filter:drop-shadow(0 12px 14px rgba(0,0,0,.45));
  animation:hw-dance 1.12s steps(1) infinite;
}
/* The crew's room: its own height (width × 330/900) plus a ~10px gap to the lede,
   less the 12px of feet that stand inside the bar. Derived from --hw-crew so the
   gap stays right at every width. It is only applied where the fold can afford
   it: 650px of viewport on a wide screen, 740px on a phone (the stacked bar is
   260px tall there, so there is far less slack under the Search button). Shorter
   than that the skin keeps the night hero and drops the dancers rather than push
   the Search button out of sight. */
@media (min-width:721px) and (min-height:650px),
       (max-width:720px)  and (min-height:740px){
  html.hw .hw-crew{ display:block; }
  html.hw .searchx{ margin-top:calc(var(--hw-crew) * 330 / 900 - 2px); }
}
/* 4 cells stacked vertically: 0%, 33.333%, 66.667%, 100% of the 4x-tall sheet */
@keyframes hw-dance{
  0%   { background-position:0 0; }
  25%  { background-position:0 33.3333%; }
  50%  { background-position:0 66.6667%; }
  75%, 100% { background-position:0 100%; }
}

/* ── phone ─────────────────────────────────────────────────────────
   720px is the breakpoint where .searchx stacks its fields. The crew needs no
   override here: --hw-crew is capped at 62vw, so it shrinks with the screen and
   the derived margin shrinks with it — the crew stays ~73% of the bar. */
@media (max-width:720px){
  /* small and tucked into the corner: a bigger moon sat on the eyebrow's last
     words, and padding the eyebrow around it cost a whole extra wrapped line. */
  html.hw .hero .sun{ width:40px; height:40px; top:4px; right:4px; box-shadow:0 0 30px 10px rgba(240,232,205,.16); }
  html.hw .hw-web{ width:92px; height:92px; }
}
@media (max-width:560px){
  html.hw .anno::after{ content:""; }   /* keeps the strip to one line */
  html.hw .hw-web{ display:none; }      /* no clear corner left at this width */
}

@media (prefers-reduced-motion:reduce){
  html.hw .hw-crew{ animation:none; background-position:0 0; }
  html.hw .hw-bat{ display:none; }
}