/* =========================================
   Holiday layer — styles
   Everything here is scoped to html[data-holiday], which holiday.js sets.
   A theme is mostly a token block: it redefines the site tokens (--white,
   --dark, --blue, ...) and the --hol-* tokens below, and the shared rules
   do the rest. Rules marked !important override inline styles on
   index.html. Theme-specific artwork follows each token block.
   ========================================= */

/* ---------- Shared: token-driven overrides ---------- */

[data-holiday] body { background: var(--hol-bg, var(--white)); }

[data-holiday] .nav {
  background: var(--hol-nav-bg, rgba(255, 255, 255, 0.8));
  border-bottom-color: var(--hol-line, rgba(0, 0, 0, 0.1));
}
[data-holiday] .nav-logo { color: var(--hol-logo, var(--dark)); }
@media (min-width: 960px) {
  [data-holiday] .nav-sub {
    background: var(--hol-surface, #fff);
    border-color: var(--hol-line, rgba(0, 0, 0, 0.1));
  }
  [data-holiday] .nav-links .nav-sub .nav-sub-sep { background: var(--hol-line, rgba(0, 0, 0, 0.1)); }
}

[data-holiday] .landing-hero {
  position: relative;
  background: var(--hol-hero-bg, transparent);
}
[data-holiday] .landing-hero > :not(.hol-hero-deco) { position: relative; z-index: 1; }
[data-holiday] .landing-hero .eyebrow { color: var(--hol-eyebrow, var(--blue)); }
[data-holiday] .landing-hero h1 { color: var(--hol-h1, var(--dark)); }

[data-holiday] .hero-card .card-bg,
[data-holiday] .hero-card .card-art { filter: var(--hol-art-filter, none); }
[data-holiday] .hero-card .card-scrim {
  background: var(--hol-scrim, linear-gradient(to top, rgba(7,7,11,.88) 0%, rgba(7,7,11,.45) 45%, rgba(7,7,11,.12) 100%)) !important;
}
[data-holiday] .hero-card .card-eyebrow { color: var(--hol-card-eyebrow, rgba(255, 255, 255, 0.7)) !important; }
[data-holiday] .hero-card .card-cta { color: var(--hol-card-cta, #fff); }
[data-holiday] .hero-card:hover { box-shadow: var(--hol-card-glow, 0 12px 48px rgba(0, 0, 0, 0.2)); }

[data-holiday] .callout {
  background: var(--hol-callout-bg, #f0f7ff) !important;
  border-left-color: var(--hol-edge, #0a84ff) !important;
}
[data-holiday] .callout [style*="#0a84ff"],
[data-holiday] .callout a:not(.btn) { color: var(--hol-link, #0a84ff) !important; }
[data-holiday] :not(pre) > code { background: var(--hol-code-bg, rgba(0, 0, 0, 0.06)); }

[data-holiday] .card { background: var(--hol-surface, var(--white)); }
[data-holiday] a.card { transition: box-shadow 0.3s, transform 0.3s; }
[data-holiday] a.card:hover { box-shadow: var(--hol-glow, var(--shadow-lg)); transform: translateY(-2px); }

[data-holiday] footer { background: var(--hol-footer, #1d1d1f); }

/* ---------- Shared: layer pieces ---------- */

.hol-hero-deco {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.hol-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 900; /* under the nav */
}

.hol-banner {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  max-width: 100%;
  margin-bottom: 28px;
  padding: 8px 8px 8px 18px;
  border-radius: 980px;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  color: var(--hol-banner-fg, var(--dark));
  background: var(--hol-banner-bg, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--hol-banner-line, rgba(0, 0, 0, 0.12));
}
.hol-banner-text { display: inline-flex; align-items: center; gap: 10px; }
.hol-banner code { font-size: 0.92em; }
.hol-icon { flex: 0 0 auto; width: 20px; height: 20px; }
.hol-count { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

.hol-off {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 980px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  opacity: 0.75;
  cursor: pointer;
}
.hol-off:hover, .hol-off:focus-visible { opacity: 1; }

@media (max-width: 600px) {
  .hol-banner { border-radius: 16px; font-size: 13px; }
}

/* Swags (garlands, lights, bunting) across the top of the hero */
.hol-swag { position: absolute; top: 44px; left: 0; right: 0; }
.hol-swag svg { display: block; }

/* Fireworks canvas */
.hol-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Drifting particles: fall by default, .hol-up rises */
.hol-p {
  position: absolute;
  top: -8vh;
  animation: hol-fall 16s linear infinite;
}
.hol-p.hol-up { top: auto; bottom: -8vh; animation-name: hol-rise; }
.hol-p svg { display: block; width: 100%; height: auto; }
.hol-sway   { animation: hol-sway 3.5s ease-in-out infinite alternate; }
.hol-tumble { animation: hol-tumble 4.5s ease-in-out infinite alternate; }
.hol-flutter { animation: hol-flutter 1.8s linear infinite; }

@keyframes hol-fall {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(calc(var(--drift, 0vw) * -0.5), 55vh); }
  100% { transform: translate(var(--drift, 0vw), 115vh); }
}
@keyframes hol-rise {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(calc(var(--drift, 0vw) * -0.5), -55vh); }
  100% { transform: translate(var(--drift, 0vw), -115vh); }
}
@keyframes hol-sway { from { transform: translateX(-10px) rotate(-12deg); } to { transform: translateX(10px) rotate(12deg); } }
@keyframes hol-tumble {
  from { transform: rotate(-35deg) rotateY(0deg); }
  to   { transform: rotate(40deg) rotateY(160deg); }
}
@keyframes hol-flutter {
  from { transform: rotate3d(1, 0.4, 0.2, 0deg); }
  to   { transform: rotate3d(1, 0.4, 0.2, 360deg); }
}

/* =========================================
   New Year's Day — ivory and gold, a fresh start
   ========================================= */
html[data-holiday="newyearsday"] {
  --white: #fffdf7; --light-gray: #f7f1e3; --bg-subtle: #f7f1e3;
  --dark: #23201a; --mid-gray: #6d6658; --gray: #8f877a;
  --blue: #a87b16; --blue-hover: #bf8d1d; --accent: #c4972a;
  --border: rgba(168, 123, 22, 0.18);
  --hol-bg: #fffdf7; --hol-nav-bg: rgba(255, 253, 247, 0.85); --hol-line: rgba(168, 123, 22, 0.2);
  --hol-logo: #a87b16; --hol-eyebrow: #a87b16;
  --hol-hero-bg: radial-gradient(900px 520px at 50% 0%, rgba(232, 199, 102, 0.22), transparent 65%), #fffdf7;
  --hol-banner-fg: #5a4310; --hol-banner-bg: rgba(232, 199, 102, 0.16); --hol-banner-line: rgba(168, 123, 22, 0.35);
  --hol-art-filter: sepia(0.35) saturate(1.2);
  --hol-card-eyebrow: #f1d27a; --hol-card-cta: #f6e2a6;
  --hol-callout-bg: #fdf6e3; --hol-edge: #c4972a; --hol-link: #a87b16;
  --hol-glow: 0 10px 34px rgba(196, 151, 42, 0.22);
  --hol-footer: #23201a;
}
[data-holiday="newyearsday"] .landing-hero h1 {
  background: linear-gradient(100deg, #8a6212, #e8c766 45%, #a87b16 70%, #e8c766);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hol-year {
  position: absolute;
  top: 230px;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(160px, 30vw, 440px);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1;
  color: rgba(196, 151, 42, 0.14);
  white-space: nowrap;
}
.hol-confetti { width: 100%; aspect-ratio: 0.55; border-radius: 1px; }

/* =========================================
   Valentine's Day — blush and rose
   ========================================= */
html[data-holiday="valentines"] {
  --white: #fff8f9; --light-gray: #fdeef1; --bg-subtle: #fdeef1;
  --dark: #3a1820; --mid-gray: #7a5560; --gray: #9a7a83;
  --blue: #d0204f; --blue-hover: #e0245e; --accent: #e0245e;
  --border: rgba(208, 32, 79, 0.16);
  --hol-bg: #fff8f9; --hol-nav-bg: rgba(255, 248, 249, 0.85); --hol-line: rgba(208, 32, 79, 0.18);
  --hol-logo: #d0204f; --hol-eyebrow: #d0204f;
  --hol-hero-bg: linear-gradient(#fff8f9, #ffeef2);
  --hol-banner-fg: #7a1534; --hol-banner-bg: rgba(255, 111, 145, 0.12); --hol-banner-line: rgba(208, 32, 79, 0.3);
  --hol-art-filter: hue-rotate(110deg) saturate(1.3);
  --hol-scrim: linear-gradient(to top, rgba(40, 6, 18, 0.9) 0%, rgba(90, 12, 40, 0.45) 45%, rgba(40, 6, 18, 0.1) 100%);
  --hol-card-eyebrow: #ff9eb5; --hol-card-cta: #ffc2d1;
  --hol-callout-bg: #fff0f3; --hol-edge: #e0245e; --hol-link: #c2185b;
  --hol-glow: 0 10px 34px rgba(224, 36, 94, 0.18);
  --hol-footer: #2e1118;
}
[data-holiday="valentines"] .landing-hero h1 {
  background: linear-gradient(100deg, #b0123f, #ff4f7b 50%, #ff8fab);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hol-glow {
  position: absolute; top: 14%; left: 50%; transform: translateX(-50%);
  width: clamp(280px, 44vw, 600px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 111, 145, 0.20), transparent 65%);
}

/* =========================================
   St. Patrick's Day — clover green and gold
   ========================================= */
html[data-holiday="stpatricks"] {
  --white: #f8fcf6; --light-gray: #ebf5e6; --bg-subtle: #ebf5e6;
  --dark: #12321f; --mid-gray: #4f6b58; --gray: #74907c;
  --blue: #0f8a4f; --blue-hover: #169b62; --accent: #169b62;
  --border: rgba(15, 138, 79, 0.18);
  --hol-bg: #f8fcf6; --hol-nav-bg: rgba(248, 252, 246, 0.85); --hol-line: rgba(15, 138, 79, 0.2);
  --hol-logo: #0f8a4f; --hol-eyebrow: #b8860b;
  --hol-hero-bg: linear-gradient(#f8fcf6, #eef7e9);
  --hol-banner-fg: #0d5a33; --hol-banner-bg: rgba(43, 182, 115, 0.12); --hol-banner-line: rgba(15, 138, 79, 0.3);
  --hol-art-filter: hue-rotate(-90deg) saturate(1.2);
  --hol-scrim: linear-gradient(to top, rgba(4, 28, 14, 0.9) 0%, rgba(8, 60, 30, 0.45) 45%, rgba(4, 28, 14, 0.1) 100%);
  --hol-card-eyebrow: #f2c94c; --hol-card-cta: #b9f0cf;
  --hol-callout-bg: #eef8ee; --hol-edge: #169b62; --hol-link: #0f8a4f;
  --hol-glow: 0 10px 34px rgba(22, 155, 98, 0.18);
  --hol-footer: #0d2617;
}
[data-holiday="stpatricks"] .landing-hero h1 {
  background: linear-gradient(100deg, #0b6b3c, #169b62 45%, #6cc24a 75%, #d4a017);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hol-rainbow {
  position: absolute; top: 12%; left: 50%; transform: translateX(-50%);
  width: min(980px, 130vw); aspect-ratio: 2;
  background: radial-gradient(ellipse 50% 100% at 50% 100%,
    transparent 64%, #e8443a 64% 69%, #f39c2a 69% 74%, #f7d23a 74% 79%,
    #5cbf55 79% 84%, #3f8fd6 84% 89%, #7a5cc7 89% 94%, transparent 94%);
  opacity: 0.22;
  -webkit-mask-image: linear-gradient(transparent 0%, #000 30%, #000 75%, transparent 100%);
          mask-image: linear-gradient(transparent 0%, #000 30%, #000 75%, transparent 100%);
}

/* =========================================
   April Fools' Day — the page is mostly fine. Mostly.
   ========================================= */
html[data-holiday="aprilfools"] {
  --hol-banner-fg: #5b3b00; --hol-banner-bg: rgba(255, 204, 0, 0.18); --hol-banner-line: rgba(200, 150, 0, 0.45);
  --hol-card-eyebrow: #ffd60a;
}
[data-holiday="aprilfools"] .landing-hero h1,
[data-holiday="aprilfools"] .section-header h2,
[data-holiday="aprilfools"] .hero-card .card-title {
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive;
  letter-spacing: 0;
}
[data-holiday="aprilfools"] .hol-wobble {
  display: inline-block;
  animation: hol-wobble 2.4s ease-in-out infinite;
}
@keyframes hol-wobble {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-6px) rotate(-6deg); }
  75% { transform: translateY(4px) rotate(5deg); }
}
[data-holiday="aprilfools"] .home-stack .hero-card:nth-child(odd)  { transform: rotate(-1.2deg); }
[data-holiday="aprilfools"] .home-stack .hero-card:nth-child(even) { transform: rotate(1deg); }
[data-holiday="aprilfools"] .home-stack .hero-card:hover { transform: rotate(0deg) scale(1.015); }
[data-holiday="aprilfools"] .hero-card .card-cta .arrow { display: inline-block; transform: scaleX(-1); }
[data-holiday="aprilfools"] .hero-card:hover .card-cta .arrow { transform: scaleX(-1) translateX(4px); }

/* =========================================
   Memorial Day — quiet, no motion
   ========================================= */
html[data-holiday="memorialday"] {
  --blue: #1f3a68; --blue-hover: #28497f; --accent: #1f3a68;
  --hol-logo: #1d1d1f; --hol-eyebrow: #6e6e73; --hol-h1: #1f2a44;
  --hol-hero-bg: linear-gradient(#f7f7f8, #eff0f3);
  --hol-banner-fg: #2b2b30; --hol-banner-bg: #fff; --hol-banner-line: rgba(0, 0, 0, 0.14);
  --hol-art-filter: grayscale(0.8);
  --hol-card-eyebrow: rgba(255, 255, 255, 0.75);
  --hol-callout-bg: #f4f5f8; --hol-edge: #1f3a68; --hol-link: #1f3a68;
}
.hol-rule {
  position: absolute; top: 48px; left: 0; right: 0; height: 6px;
  background: linear-gradient(#b22234 0 2px, #fff 2px 4px, #1f3a68 4px 6px);
  opacity: 0.85;
}

/* =========================================
   Independence Day — night sky, fireworks, bunting
   ========================================= */
html[data-holiday="independenceday"] {
  --white: #0b1530; --light-gray: #0f1b3a; --bg-subtle: #0e1936;
  --dark: #f3f5fb; --mid-gray: #b4bdd4; --gray: #8e98b3;
  --blue: #ff4d5a; --blue-hover: #ff6670; --accent: #ff4d5a;
  --border: rgba(255, 255, 255, 0.12);
  --shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
  --hol-bg: #0b1530; --hol-nav-bg: rgba(11, 21, 48, 0.85); --hol-line: rgba(255, 255, 255, 0.14);
  --hol-surface: #121f42; --hol-logo: #fff; --hol-eyebrow: #ff6b75; --hol-h1: #fff;
  --hol-hero-bg: radial-gradient(1000px 600px at 50% 110%, rgba(60, 90, 166, 0.35), transparent 60%), #0b1530;
  --hol-banner-fg: #e8ecf8; --hol-banner-bg: rgba(255, 255, 255, 0.06); --hol-banner-line: rgba(255, 255, 255, 0.25);
  --hol-scrim: linear-gradient(to top, rgba(6, 12, 30, 0.92) 0%, rgba(10, 20, 50, 0.5) 45%, rgba(6, 12, 30, 0.1) 100%);
  --hol-card-eyebrow: #ff8a92; --hol-card-cta: #9fc1ff;
  --hol-card-glow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 12px 50px rgba(91, 140, 255, 0.3);
  --hol-callout-bg: #121f42; --hol-edge: #ff4d5a; --hol-link: #9fc1ff;
  --hol-code-bg: rgba(255, 255, 255, 0.1);
  --hol-glow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 10px 40px rgba(91, 140, 255, 0.25);
  --hol-footer: #060c1d;
}
[data-holiday="independenceday"] .landing-hero h1 { text-shadow: 0 0 30px rgba(159, 193, 255, 0.35); }

/* =========================================
   Labor Day — safety yellow, blueprint, steel
   ========================================= */
html[data-holiday="laborday"] {
  --blue: #2f5b8a; --blue-hover: #376aa0; --accent: #e0a100;
  --hol-logo: #2f4a66; --hol-eyebrow: #b37f00; --hol-h1: #24384f;
  --hol-hero-bg:
    linear-gradient(rgba(47, 91, 138, 0.07) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(47, 91, 138, 0.07) 1px, transparent 1px) 0 0 / 32px 32px,
    #f6f8fb;
  --hol-banner-fg: #4a3800; --hol-banner-bg: rgba(242, 183, 5, 0.16); --hol-banner-line: rgba(200, 150, 0, 0.45);
  --hol-card-eyebrow: #f2b705;
  --hol-callout-bg: #fff8e1; --hol-edge: #e0a100; --hol-link: #2f5b8a;
}
.hol-hazard {
  position: absolute; top: 48px; left: 0; right: 0; height: 12px;
  background: repeating-linear-gradient(-45deg, #f2b705 0 16px, #1d1d1f 16px 32px);
}

/* =========================================
   Halloween — dark, candlelit, haunted
   ========================================= */
html[data-holiday="halloween"] {
  --white: #0d0b13; --light-gray: #15111d; --bg-subtle: #120f19;
  --dark: #efe6d6; --gray: #8f8698; --mid-gray: #b2a89b;
  --blue: #ff7a18; --blue-hover: #ff8f3a; --accent: #ff7a18;
  --border: rgba(255, 122, 24, 0.18);
  --shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
  --hol-bg: #0d0b13; --hol-nav-bg: rgba(13, 11, 19, 0.82); --hol-line: rgba(255, 122, 24, 0.25);
  --hol-surface: #15111d; --hol-logo: #ff7a18; --hol-eyebrow: #9b5cff; --hol-h1: #ff8a2a;
  --hol-hero-bg:
    radial-gradient(1100px 620px at 50% 115%, rgba(155, 92, 255, 0.20), transparent 60%),
    radial-gradient(700px 500px at 86% 8%, rgba(255, 200, 120, 0.10), transparent 60%),
    #0d0b13;
  --hol-banner-fg: #f6d9b8; --hol-banner-bg: rgba(255, 122, 24, 0.10); --hol-banner-line: rgba(255, 122, 24, 0.35);
  --hol-art-filter: sepia(0.7) saturate(2.2) hue-rotate(-25deg);
  --hol-scrim: linear-gradient(to top, rgba(10, 6, 16, 0.92) 0%, rgba(30, 10, 40, 0.5) 45%, rgba(10, 6, 16, 0.15) 100%);
  --hol-card-eyebrow: #ff9a3c; --hol-card-cta: #b98bff;
  --hol-card-glow: 0 0 0 1px rgba(255, 122, 24, 0.45), 0 12px 60px rgba(255, 100, 0, 0.30);
  --hol-callout-bg: #17121f; --hol-edge: #ff7a18; --hol-link: #ff9a3c;
  --hol-code-bg: rgba(255, 255, 255, 0.08);
  --hol-glow: 0 0 0 1px rgba(255, 122, 24, 0.4), 0 10px 40px rgba(255, 100, 0, 0.18);
  --hol-footer: #07060b;
}
/* Only the card art is warmed; the tile backgrounds stay purple. */
[data-holiday="halloween"] .hero-card .card-bg { filter: none; }
[data-holiday="halloween"] .landing-hero h1 {
  text-shadow: 0 0 18px rgba(255, 122, 24, 0.55), 0 0 60px rgba(255, 80, 0, 0.35);
  animation: hol-flicker 7s infinite;
}
@keyframes hol-flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.55; text-shadow: none; }
}

.hol-moon {
  position: absolute; top: 90px; right: 7%;
  width: clamp(90px, 13vw, 170px); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 34%, rgba(150, 140, 110, 0.35) 0 9%, transparent 10%),
    radial-gradient(circle at 62% 60%, rgba(150, 140, 110, 0.30) 0 13%, transparent 14%),
    radial-gradient(circle at 58% 24%, rgba(150, 140, 110, 0.25) 0 6%, transparent 7%),
    radial-gradient(circle at 40% 40%, #fff8dc, #f0dfa8 60%, #d8c27e);
  box-shadow: 0 0 60px rgba(255, 236, 170, 0.45), 0 0 160px rgba(255, 220, 140, 0.18);
  opacity: 0.9;
}
.hol-web { position: absolute; top: 48px; width: clamp(120px, 18vw, 220px); }
.hol-web svg { display: block; width: 100%; height: auto; }
.hol-web-left { left: 0; }
.hol-web-right { right: 0; transform: scaleX(-1); }

.hol-spider {
  position: absolute; top: 48px; width: 1px;
  height: var(--len, 160px);
  background: rgba(235, 228, 250, 0.45);
  animation: hol-dangle 6s ease-in-out infinite;
}
.hol-spider svg { position: absolute; bottom: -26px; left: -14px; width: 28px; height: 28px; }
@keyframes hol-dangle {
  0%, 100% { height: var(--len, 160px); }
  50% { height: calc(var(--len, 160px) * 0.55); }
}

.hol-bat {
  position: absolute; left: 0;
  color: #050308;
  filter: drop-shadow(0 0 6px rgba(255, 122, 24, 0.25));
  animation: hol-fly-ltr 16s linear infinite;
}
.hol-bat.hol-rtl { animation-name: hol-fly-rtl; }
.hol-bat svg { display: block; width: 100%; height: auto; }
.hol-bat-wings { animation: hol-flap 0.28s ease-in-out infinite alternate; transform-origin: 50% 40%; }
@keyframes hol-flap { from { transform: scaleY(1); } to { transform: scaleY(0.35); } }
@keyframes hol-fly-ltr {
  0%   { transform: translate(-10vw, 0); }
  25%  { transform: translate(20vw, -6vh); }
  50%  { transform: translate(50vw, 4vh); }
  75%  { transform: translate(80vw, -5vh); }
  100% { transform: translate(110vw, 2vh); }
}
@keyframes hol-fly-rtl {
  0%   { transform: translate(110vw, 0); }
  25%  { transform: translate(78vw, 5vh); }
  50%  { transform: translate(48vw, -4vh); }
  75%  { transform: translate(18vw, 6vh); }
  100% { transform: translate(-10vw, -2vh); }
}

.hol-ghost {
  position: absolute; bottom: 12vh; left: 0; width: 54px; opacity: 0;
  filter: drop-shadow(0 0 14px rgba(200, 180, 255, 0.6));
  animation: hol-ghost 34s ease-in-out infinite 4s;
}
.hol-ghost svg { display: block; width: 100%; height: auto; }
@keyframes hol-ghost {
  0%   { transform: translate(-8vw, 0); opacity: 0; }
  6%   { opacity: 0.75; }
  15%  { transform: translate(18vw, -5vh); }
  30%  { transform: translate(45vw, 2vh); }
  40%  { transform: translate(62vw, -4vh); opacity: 0.75; }
  48%  { transform: translate(78vw, 0); opacity: 0; }
  100% { transform: translate(78vw, 0); opacity: 0; }
}

.hol-fog {
  position: absolute; left: -50%; bottom: -6vh; width: 200%; height: 22vh;
  background:
    radial-gradient(40% 60% at 20% 70%, rgba(200, 190, 230, 0.16), transparent 70%),
    radial-gradient(35% 55% at 55% 80%, rgba(200, 190, 230, 0.13), transparent 70%),
    radial-gradient(40% 60% at 85% 70%, rgba(200, 190, 230, 0.15), transparent 70%);
  filter: blur(8px);
  animation: hol-fog 40s linear infinite alternate;
}
.hol-fog-b { bottom: -10vh; opacity: 0.8; animation-duration: 55s; animation-direction: alternate-reverse; }
@keyframes hol-fog { from { transform: translateX(0); } to { transform: translateX(25%); } }

/* =========================================
   Veterans Day — dignified, no motion
   ========================================= */
html[data-holiday="veteransday"] {
  --blue: #1f3a68; --blue-hover: #28497f; --accent: #b22234;
  --hol-logo: #1f3a68; --hol-eyebrow: #b22234; --hol-h1: #1f2a44;
  --hol-hero-bg: linear-gradient(#f7f8fb, #eef1f6);
  --hol-banner-fg: #1f2a44; --hol-banner-bg: #fff; --hol-banner-line: rgba(31, 58, 104, 0.25);
  --hol-art-filter: saturate(0.6);
  --hol-card-eyebrow: #ff9aa2;
  --hol-callout-bg: #f2f5fa; --hol-edge: #b22234; --hol-link: #1f3a68;
}
.hol-flagband {
  position: absolute; top: 48px; left: 0; right: 0; height: 30px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'%3E%3Cpath fill='%23fff' d='M14 3l1.4 3.3 3.6.3-2.7 2.4.8 3.5L14 10.7l-3.1 1.8.8-3.5L9 6.6l3.6-.3z'/%3E%3C/svg%3E") repeat-x 0 0 / 28px 16px,
    linear-gradient(#1f3a68 0 16px, transparent 16px),
    repeating-linear-gradient(#b22234 0 2px, #fff 2px 4px) 0 16px / 100% 14px no-repeat;
  opacity: 0.9;
}

/* =========================================
   Thanksgiving — harvest
   ========================================= */
html[data-holiday="thanksgiving"] {
  --white: #fffaf1; --light-gray: #f5e8d2; --bg-subtle: #f5e8d2;
  --dark: #3a2416; --gray: #8a715d; --mid-gray: #6c5241;
  --blue: #b8501a; --blue-hover: #c95d22; --accent: #b8501a;
  --border: rgba(120, 70, 30, 0.18);
  --shadow: 0 2px 20px rgba(110, 60, 20, 0.10);
  --hol-bg: #fbf4e6; --hol-nav-bg: rgba(251, 244, 230, 0.85); --hol-line: rgba(120, 70, 30, 0.18);
  --hol-surface: #fffaf1; --hol-logo: #9e1b32; --hol-eyebrow: #9e1b32;
  --hol-hero-bg: radial-gradient(900px 520px at 50% -10%, rgba(232, 160, 60, 0.28), transparent 65%), linear-gradient(#fbf4e6, #f7ead3);
  --hol-banner-fg: #5a3417; --hol-banner-bg: rgba(217, 162, 27, 0.16); --hol-banner-line: rgba(184, 80, 26, 0.35);
  --hol-art-filter: sepia(0.8) saturate(1.8) hue-rotate(-12deg);
  --hol-scrim: linear-gradient(to top, rgba(45, 22, 8, 0.90) 0%, rgba(110, 45, 10, 0.45) 45%, rgba(60, 25, 5, 0.10) 100%);
  --hol-card-eyebrow: #f2b544; --hol-card-cta: #ffd38a;
  --hol-callout-bg: #fff6e6; --hol-edge: #9e1b32; --hol-link: #b8501a;
  --hol-code-bg: rgba(120, 70, 30, 0.08);
  --hol-glow: 0 10px 34px rgba(184, 80, 26, 0.18);
  --hol-footer: #2e1d12;
}
[data-holiday="thanksgiving"] .landing-hero h1 {
  background: linear-gradient(100deg, #9e1b32 0%, #c4581c 45%, #d9a21b 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hol-sun {
  position: absolute; top: 18%; left: 50%; transform: translateX(-50%);
  width: clamp(260px, 38vw, 520px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 181, 68, 0.30), rgba(232, 140, 50, 0.10) 55%, transparent 70%);
}

/* =========================================
   Festivus — brushed aluminum, unadorned
   ========================================= */
html[data-holiday="festivus"] {
  --white: #f4f5f6; --light-gray: #e9ebed; --bg-subtle: #e9ebed;
  --dark: #26292d; --mid-gray: #5f656c; --gray: #858b92;
  --blue: #4d5560; --blue-hover: #5c6672; --accent: #8a9099;
  --border: rgba(38, 41, 45, 0.14);
  --hol-bg: #f4f5f6; --hol-nav-bg: rgba(244, 245, 246, 0.88); --hol-line: rgba(38, 41, 45, 0.16);
  --hol-surface: #fbfbfc; --hol-logo: #4d5560; --hol-eyebrow: #6d747c;
  --hol-hero-bg: linear-gradient(#f4f5f6, #e6e8eb);
  --hol-banner-fg: #2f3338; --hol-banner-bg: #fff; --hol-banner-line: rgba(38, 41, 45, 0.2);
  --hol-art-filter: grayscale(1);
  --hol-card-eyebrow: #c9ced4; --hol-card-cta: #e4e7ea;
  --hol-callout-bg: #eef0f2; --hol-edge: #8a9099; --hol-link: #4d5560;
  --hol-glow: 0 10px 30px rgba(38, 41, 45, 0.14);
  --hol-footer: #26292d;
}
[data-holiday="festivus"] .landing-hero h1 {
  background: linear-gradient(180deg, #9aa1a9 0%, #eef0f2 38%, #7c838b 52%, #c9ced4 78%, #8a9099 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.18));
}
.hol-grievance { font-style: italic; }
/* A plain aluminum pole, floor to ceiling, with a wooden stand. */
.hol-pole {
  position: absolute; top: 48px; bottom: 0; left: 6%;
  width: 14px;
  background: linear-gradient(90deg, #7d848c 0%, #e9ecef 35%, #b7bdc4 55%, #6f767e 100%);
  border-radius: 7px 7px 0 0;
  box-shadow: 6px 0 14px rgba(0, 0, 0, 0.10);
}
.hol-pole::after {
  content: "";
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 90px; height: 16px; border-radius: 3px;
  background: linear-gradient(#8a6a4a, #6b4f34);
}
@media (max-width: 768px) { .hol-pole { left: 10px; width: 10px; } .hol-pole::after { width: 50px; } }

/* =========================================
   Christmas — winter night, lights, snow
   ========================================= */
html[data-holiday="christmas"] {
  --white: #0c1a14; --light-gray: #10221a; --bg-subtle: #0f1f18;
  --dark: #f4efe4; --mid-gray: #b9c2b5; --gray: #8fa093;
  --blue: #e23b3b; --blue-hover: #ef5050; --accent: #e23b3b;
  --border: rgba(255, 255, 255, 0.12);
  --shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
  --hol-bg: #0c1a14; --hol-nav-bg: rgba(12, 26, 20, 0.85); --hol-line: rgba(255, 255, 255, 0.12);
  --hol-surface: #12261d; --hol-logo: #ff5a5a; --hol-eyebrow: #e8c766; --hol-h1: #fff8ea;
  --hol-hero-bg:
    radial-gradient(800px 500px at 15% 10%, rgba(226, 59, 59, 0.16), transparent 60%),
    radial-gradient(800px 500px at 85% 20%, rgba(61, 220, 132, 0.12), transparent 60%),
    #0c1a14;
  --hol-banner-fg: #f6ecd2; --hol-banner-bg: rgba(232, 199, 102, 0.08); --hol-banner-line: rgba(232, 199, 102, 0.35);
  --hol-art-filter: hue-rotate(-70deg) saturate(1.2);
  --hol-scrim: linear-gradient(to top, rgba(6, 16, 11, 0.92) 0%, rgba(12, 34, 24, 0.5) 45%, rgba(6, 16, 11, 0.1) 100%);
  --hol-card-eyebrow: #e8c766; --hol-card-cta: #ff8a8a;
  --hol-card-glow: 0 0 0 1px rgba(232, 199, 102, 0.4), 0 12px 50px rgba(226, 59, 59, 0.25);
  --hol-callout-bg: #12261d; --hol-edge: #e23b3b; --hol-link: #e8c766;
  --hol-code-bg: rgba(255, 255, 255, 0.1);
  --hol-glow: 0 0 0 1px rgba(232, 199, 102, 0.35), 0 10px 40px rgba(226, 59, 59, 0.2);
  --hol-footer: #07110c;
}
[data-holiday="christmas"] .landing-hero h1 { text-shadow: 0 0 28px rgba(232, 199, 102, 0.35); }
.hol-bulb {
  filter: drop-shadow(0 0 5px currentColor);
  animation: hol-twinkle 1.6s ease-in-out infinite alternate;
}
@keyframes hol-twinkle { from { opacity: 1; } to { opacity: 0.35; } }
.hol-flake {
  width: 100%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #fff 40%, rgba(255, 255, 255, 0) 72%);
}

/* =========================================
   New Year's Eve — black tie, gold, fireworks
   ========================================= */
html[data-holiday="newyearseve"] {
  --white: #09090c; --light-gray: #111116; --bg-subtle: #0e0e12;
  --dark: #f5efe0; --mid-gray: #b8b0a0; --gray: #8c8577;
  --blue: #e3b04b; --blue-hover: #f0c060; --accent: #e3b04b;
  --border: rgba(227, 176, 75, 0.18);
  --shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
  --hol-bg: #09090c; --hol-nav-bg: rgba(9, 9, 12, 0.85); --hol-line: rgba(227, 176, 75, 0.22);
  --hol-surface: #121217; --hol-logo: #e3b04b; --hol-eyebrow: #e3b04b;
  --hol-hero-bg: radial-gradient(1000px 600px at 50% 0%, rgba(227, 176, 75, 0.12), transparent 60%), #09090c;
  --hol-banner-fg: #f5e6c4; --hol-banner-bg: rgba(227, 176, 75, 0.08); --hol-banner-line: rgba(227, 176, 75, 0.4);
  --hol-art-filter: grayscale(0.6) sepia(0.5);
  --hol-scrim: linear-gradient(to top, rgba(6, 6, 8, 0.93) 0%, rgba(20, 16, 8, 0.5) 45%, rgba(6, 6, 8, 0.1) 100%);
  --hol-card-eyebrow: #e8c766; --hol-card-cta: #f6e2a6;
  --hol-card-glow: 0 0 0 1px rgba(227, 176, 75, 0.45), 0 12px 50px rgba(227, 176, 75, 0.2);
  --hol-callout-bg: #121217; --hol-edge: #e3b04b; --hol-link: #e8c766;
  --hol-code-bg: rgba(255, 255, 255, 0.1);
  --hol-glow: 0 0 0 1px rgba(227, 176, 75, 0.4), 0 10px 40px rgba(227, 176, 75, 0.15);
  --hol-footer: #050507;
}
[data-holiday="newyearseve"] .landing-hero h1 {
  background: linear-gradient(100deg, #b8862b, #fff3c4 40%, #e3b04b 60%, #fff3c4 80%, #b8862b);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: hol-shimmer 6s linear infinite;
}
@keyframes hol-shimmer { from { background-position: 0% 0; } to { background-position: 200% 0; } }
.hol-bubble {
  width: 100%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(246, 210, 122, 0.7);
  background: radial-gradient(circle at 35% 35%, rgba(255, 243, 196, 0.5), transparent 60%);
}

/* ---------- Reduced motion: keep the look, drop the movement ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-holiday] .landing-hero h1,
  .hol-wobble,
  .hol-bulb,
  .hol-spider,
  .hol-fog { animation: none; }
}