/* Festive layer for the Santa page, loaded on top of
   site.css. Everything here is decoration: the page must read and work the
   same with this file removed. Brand colours stay pure (Royal Blue, Gold,
   Cardinal, Grass); motion stops for anyone who asks for reduced motion. */

/* ---- Fairy lights along the top of the hero ------------------------------ */
.festive .hero { padding-top: 40px; }
.lights {
  position: absolute; top: 0; left: 0; right: 0; height: 34px; pointer-events: none; z-index: 1;
}
.lights svg { display: block; width: 100%; height: 34px; }
.lights .wire { fill: none; stroke: #0d2b5c; stroke-width: 1.6; }
.lights .bulb { transform-box: fill-box; transform-origin: center; animation: twinkle 2.6s ease-in-out infinite; }
.lights .b-gold   { fill: var(--rotary-gold); }
.lights .b-red    { fill: var(--rotary-cardinal); }
.lights .b-green  { fill: var(--rotary-grass); }
.lights .b-white  { fill: var(--rotary-white); }
.lights .bulb:nth-child(3n)   { animation-delay: .9s; }
.lights .bulb:nth-child(3n+1) { animation-delay: 1.7s; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---- Snow --------------------------------------------------------------- */
.snow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.festive .hero::before { opacity: .12; } /* the static dusting stays as a fallback */

/* ---- Snowy hill along the bottom edge of the hero ------------------------ */
.festive .hero { padding-bottom: 46px; }
.festive .hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 34px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 34' preserveAspectRatio='none'%3E%3Cpath d='M0 22 C40 8 80 8 120 18 S200 32 250 20 S330 4 400 16 L400 34 L0 34 Z' fill='%23ffffff'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}

/* ---- Countdown ---------------------------------------------------------- */
.sleeps {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px;
  background: var(--rotary-white); color: var(--rotary-royal);
  font-family: var(--font-ui); font-weight: 800; font-size: 16px;
  padding: 7px 14px 7px 8px; border-radius: 999px;
  box-shadow: 0 0 0 3px var(--rotary-gold);
}
.sleeps__n {
  min-width: 36px; height: 36px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rotary-cardinal); color: var(--rotary-white); font-size: 18px;
}
.sleeps[hidden] { display: none; }

/* ---- Candy-cane stripe on result cards and route cards ------------------ */
.festive .result { position: relative; }
.festive .result::before {
  content: ""; display: block; height: 8px;
  background: repeating-linear-gradient(-45deg, var(--rotary-cardinal) 0 10px, var(--rotary-white) 10px 20px);
}
.festive .route-card__bar {
  width: 8px;
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.55) 0 5px, transparent 5px 10px) !important;
}

/* ---- Headings get a little star -------------------------------------- */
.festive .routes h2::before, .festive .how h2::before {
  content: ""; width: 22px; height: 22px; flex: none; align-self: center;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.6l-6.4 3.5L7 14l-5.3-5 7.2-.9z' fill='%23f7a81b'/%3E%3C/svg%3E") center / contain no-repeat;
}
.festive .how h2 { display: flex; gap: 10px; align-items: baseline; }

/* ---- Footer: snowy edge ------------------------------------------------- */
.festive .rc-footer { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .lights .bulb { animation: none; }
  .snow { display: none; }
  .festive .hero::before { opacity: .2; }
}