/* christmas.css — seasonal skin for the homepage hero.
 *
 * EVERYTHING here is scoped under html.xm, which seasons.js adds only inside
 * the window (1–26 Dec) or with ?season=xm. 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.
 *
 * Unlike the Halloween skin this one needs no extra room above the search bar,
 * so it causes no layout shift at all: the lights hang in the hero's top edge
 * and the snow is a pointer-events:none overlay.
 */

/* a warmer dusk behind the existing photo, so the lights read */
html.xm .hero .scrim{
  background:linear-gradient(180deg, rgba(20,14,26,.55) 0%, rgba(60,17,39,.18) 40%, rgba(20,14,26,.82) 100%);
}

/* ---- the string of lights ---- */
html.xm .xm-string{
  position:absolute; left:-10px; right:-10px; top:0; height:70px; z-index:2; pointer-events:none;
}
html.xm .xm-string::before{
  content:""; position:absolute; left:0; right:0; top:4px; height:2px; opacity:.75;
  background:linear-gradient(90deg, transparent, #c9a24a 12%, #c9a24a 88%, transparent);
}
html.xm .xm-string i{
  position:absolute; top:var(--y,16px); left:var(--x); width:18px; height:18px; border-radius:50%;
  background:var(--c);
  box-shadow:0 0 14px var(--c), 0 0 28px -6px var(--c), inset -4px -4px 8px rgba(0,0,0,.35);
  animation:xm-twinkle 3.2s ease-in-out infinite;
}
html.xm .xm-string i::before{
  content:""; position:absolute; left:7px; top:-14px; width:4px; height:14px; background:#c9a24a; border-radius:2px;
}
html.xm .xm-string i:nth-child(2n){ animation-delay:-1.1s; }
html.xm .xm-string i:nth-child(3n){ animation-delay:-2.3s; animation-duration:3.9s; }
@keyframes xm-twinkle{
  0%,100%{ filter:brightness(1); }
  50%{ filter:brightness(1.45); }
}

/* ---- snow: a tiled layer of soft dots drifting down, never settling ---- */
/* The layer is two tiles taller than the hero and slides down by exactly two
   tiles, so the loop is seamless and only transform animates (no repaint). */
html.xm .xm-snow{
  position:absolute; left:0; right:0; top:-320px; bottom:0; z-index:1; pointer-events:none; opacity:.85;
  background-image:
    radial-gradient(2px 2px at 20px 30px, #fff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 120px 80px, #fff 50%, transparent 52%),
    radial-gradient(2.5px 2.5px at 240px 20px, #fff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 330px 110px, #fff 50%, transparent 52%),
    radial-gradient(2px 2px at 410px 60px, #fff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 520px 130px, #fff 50%, transparent 52%),
    radial-gradient(2px 2px at 640px 40px, #fff 50%, transparent 52%),
    radial-gradient(2.5px 2.5px at 760px 90px, #fff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 880px 25px, #fff 50%, transparent 52%),
    radial-gradient(2px 2px at 980px 120px, #fff 50%, transparent 52%);
  background-size:1040px 160px;
  animation:xm-snow 11s linear infinite;
  will-change:transform;
}
@keyframes xm-snow{
  from{ transform:translateY(0); }
  to{ transform:translateY(320px); }
}

/* the hero already stacks .bg / .scrim / .sun / .inner; keep the copy on top */
html.xm .hero .inner{ position:relative; z-index:3; }

/* phones: fewer, smaller lights so they don't crowd the eyebrow */
@media (max-width:720px){
  html.xm .xm-string{ height:52px; }
  html.xm .xm-string i{ width:13px; height:13px; }
  html.xm .xm-string i::before{ left:5px; top:-11px; height:11px; width:3px; }
  html.xm .xm-string i:nth-child(2), html.xm .xm-string i:nth-child(6){ display:none; }
}

@media (prefers-reduced-motion:reduce){
  html.xm .xm-snow{ animation:none; }
  html.xm .xm-string i{ animation:none; }
}