/* Halloween look for autismmeetup.com (landing).
 * Applies only while <html data-season="halloween"> — set by season.js between its dates, and by the
 * pumpkin button. The day/night switch still works underneath.
 * Palette: night #120c18, bone #f3e9d2, pumpkin #ff8a2b→#e2560f, witch purple #8a5cc7, slime #9be15d.
 */
html[data-season="halloween"] {
  --blue: #ff8a2b;
  --blue-dim: rgba(255, 138, 43, 0.16);
  --blue-glow: rgba(255, 138, 43, 0.32);
  --bg: #120c18;
  --bg-footer: #140e1a;
  --bg-footer-alt: #100b15;
  --card: rgba(22, 14, 26, 0.95);
  --border: rgba(138, 92, 199, 0.22);
  --border-hi: rgba(176, 132, 232, 0.55);
  --border-muted: rgba(243, 233, 210, 0.08);
  --text: #f3e9d2;
  --text-muted: #9c8aa8;
  --text-sub: #d8cbe0;
}
html[data-season="halloween"][data-theme="light"] {
  --blue: #c4520f;
  --blue-dim: rgba(196, 82, 15, 0.12);
  --blue-glow: rgba(196, 82, 15, 0.25);
  --bg: #f5ede0;
  --bg-footer: #efe5d4;
  --bg-footer-alt: #e9dcc7;
  --card: rgba(255, 250, 242, 0.96);
  --border: rgba(91, 52, 140, 0.22);
  --border-hi: rgba(91, 52, 140, 0.45);
  --border-muted: rgba(42, 24, 40, 0.1);
  --text: #2a1828;
  --text-muted: #6b5468;
  --text-sub: #46303f;
}

/* Photo plate replaces the SVG woodland; aurora + grid dots off */
html[data-season="halloween"] .aurora,
html[data-season="halloween"] .grid-dots { display: none; }
html[data-season="halloween"] .hero {
  background:
    radial-gradient(ellipse 46% 38% at 50% 50%, rgba(10, 6, 14, 0.55), transparent 72%),
    linear-gradient(to top, rgba(8, 6, 12, 0.85), transparent 30%),
    url("/season/haunt-night.webp") center center / cover no-repeat;
  background-color: #120c18;
}
html[data-season="halloween"][data-theme="light"] .hero {
  background:
    radial-gradient(ellipse 44% 36% at 50% 50%, rgba(250, 242, 228, 0.72), transparent 74%),
    linear-gradient(to top, rgba(40, 26, 20, 0.35), transparent 30%),
    url("/season/haunt-day.webp") center center / cover no-repeat;
  background-color: #f5ede0;
}
@media (max-width: 640px) {
  /* Portrait crop: keep the pumpkins in shot (night = left, day = right) */
  html[data-season="halloween"] .hero { background-position: center, center, 24% center; }
  html[data-season="halloween"][data-theme="light"] .hero { background-position: center, center, 70% center; }
}

/* Heading: bone + glowing pumpkin, no muddy brown */
html[data-season="halloween"] .hero-heading h1 { color: var(--text); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6); }
html[data-season="halloween"] .hero-heading h1 span { color: var(--blue); text-shadow: 0 0 18px rgba(255, 138, 43, 0.45); }
html[data-season="halloween"] .hero-heading p { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); }
html[data-season="halloween"][data-theme="light"] .hero-heading h1,
html[data-season="halloween"][data-theme="light"] .hero-heading h1 span,
html[data-season="halloween"][data-theme="light"] .hero-heading p { text-shadow: none; }

/* Nav: purple-black glass */
html[data-season="halloween"] .top-nav { background: rgba(18, 12, 24, 0.86); border-bottom-color: rgba(138, 92, 199, 0.25); }
html[data-season="halloween"][data-theme="light"] .top-nav { background: rgba(245, 237, 224, 0.92); }

/* Smaller nav buttons in Halloween colours */
html[data-season="halloween"] .nav-btn-ghost,
html[data-season="halloween"] .nav-btn-solid {
  padding: 5px 13px;
  min-height: 0;
  font-size: 0.8rem;
  border-radius: 999px;
}
html[data-season="halloween"] .nav-btn-ghost { border-color: rgba(176, 132, 232, 0.6); color: #d9c4f7; }
html[data-season="halloween"] .nav-btn-ghost:hover { background: rgba(138, 92, 199, 0.18); box-shadow: 0 0 10px rgba(138, 92, 199, 0.4); }
html[data-season="halloween"] .nav-btn-solid {
  background: linear-gradient(135deg, #ffa046, #e2560f);
  color: #1a0d06;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(226, 86, 15, 0.35);
}
html[data-season="halloween"] .nav-btn-solid:hover { box-shadow: 0 4px 16px rgba(255, 138, 43, 0.5); }
html[data-season="halloween"][data-theme="light"] .nav-btn-ghost { border-color: rgba(91, 52, 140, 0.5); color: #5b348c; }
html[data-season="halloween"][data-theme="light"] .nav-btn-solid { color: #fff8ef; background: linear-gradient(135deg, #e86a1c, #b8440c); }

/* Day/night toggle slimmer, purple track */
html[data-season="halloween"] .nav-theme-toggle { width: 40px; height: 22px; border-color: rgba(176, 132, 232, 0.45); background: rgba(138, 92, 199, 0.15); }
html[data-season="halloween"] .nav-theme-thumb { transform: scale(0.82); transform-origin: left center; }

@media (max-width: 480px) {
  html[data-season="halloween"] .nav-btn-ghost,
  html[data-season="halloween"] .nav-btn-solid { padding: 5px 11px; font-size: 0.78rem; }
}

/* "Please read" pill: keep the green, make it slime */
html[data-season="halloween"] .scroll-hint-pill {
  color: #b6f07a; background: rgba(155, 225, 93, 0.08); border-color: rgba(155, 225, 93, 0.4);
  text-shadow: 0 0 10px rgba(155, 225, 93, 0.55);
}
html[data-season="halloween"] .scroll-hint-dot { background: #9be15d; box-shadow: 0 0 6px rgba(155, 225, 93, 0.9); }
html[data-season="halloween"][data-theme="light"] .scroll-hint-pill {
  color: #2f5a12; background: rgba(250, 242, 228, 0.85); border-color: rgba(47, 90, 18, 0.45); text-shadow: none;
}
html[data-season="halloween"][data-theme="light"] .scroll-hint-dot { background: #4f8a1f; box-shadow: none; }

/* Below the fold: pumpkin→purple strips on the service cards */
html[data-season="halloween"] .service-card { --sc-accent: linear-gradient(90deg, #ff8a2b, #8a5cc7) !important; }

/* Grok's "spell": a distant bat, then the cloaked figure by the pumpkins, then mist.
 * Every 5-11 minutes; ?haunt=demo in the preview runs it every ~40 s. Off for reduced motion. */
.ag-life { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: 1; pointer-events: none; overflow: hidden; }
.ag-life .fly-bat, .ag-life .figure, .ag-life .mist { position: absolute; opacity: 0; }
.ag-life .fly-bat { width: min(28vw, 220px); aspect-ratio: 1211 / 464; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.35)); }
.ag-life .fly-bat-wing { width: 100%; height: 100%; background: url("/season/haunt-bat.webp") center / contain no-repeat; transform-origin: 50% 58%; animation: agFlap 0.7s ease-in-out infinite; }
.ag-life.run .fly-bat { animation: agBatNight 18s linear forwards; }
html[data-theme="light"] .ag-life.run .fly-bat { animation-name: agBatDay; }
.ag-life.run .figure { animation: agFigureIn 11s ease forwards 16s; }
.ag-life.run .mist { animation: agMistIn 11s ease forwards 16.4s; }
.ag-life .figure { width: min(18vw, 170px); aspect-ratio: 535 / 1360; background: url("/season/haunt-figure.webp") center bottom / contain no-repeat; left: 11%; bottom: 5%; }
html[data-theme="light"] .ag-life .figure { left: 26%; bottom: 8%; }
.ag-life .mist { width: 34vw; height: 28vh; left: 6%; bottom: 4%; background: radial-gradient(ellipse at center, rgba(226, 228, 232, 0.55), transparent 68%); filter: blur(8px); }
html[data-theme="light"] .ag-life .mist { left: 20%; }
@keyframes agFlap { 0%, 100% { transform: scaleY(1) rotate(-6deg); } 50% { transform: scaleY(0.72) rotate(8deg); } }
@keyframes agBatNight { 0% { left: 70%; top: 16%; transform: scale(0.28); opacity: 0; } 6% { opacity: 1; } 28% { left: 54%; top: 14%; transform: scale(0.3); } 55% { left: 36%; top: 22%; transform: scale(0.36); } 80% { left: 20%; top: 34%; transform: scale(0.48); } 100% { left: 12%; top: 46%; transform: scale(0.62); opacity: 0; } }
@keyframes agBatDay { 0% { left: 10%; top: 16%; transform: scale(0.28); opacity: 0; } 6% { opacity: 1; } 35% { left: 32%; top: 14%; transform: scale(0.32); } 68% { left: 46%; top: 24%; transform: scale(0.42); } 100% { left: 30%; top: 46%; transform: scale(0.58); opacity: 0; } }
@keyframes agFigureIn { 0% { opacity: 0; filter: blur(8px); } 16% { opacity: 0.94; filter: blur(0); } 55% { opacity: 0.94; transform: rotate(-1.5deg); } 75% { opacity: 0.7; transform: rotate(1deg); } 100% { opacity: 0; filter: blur(14px); } }
@keyframes agMistIn { 0% { opacity: 0; transform: scale(0.6); } 20% { opacity: 0.35; } 70% { opacity: 0.75; transform: scale(1.15); } 100% { opacity: 0; transform: scale(1.4); } }
@media (prefers-reduced-motion: reduce) { .ag-life { display: none; } }
html[data-season="halloween"] .hero > *:not(.ag-life) { position: relative; z-index: 2; }
@media (max-width: 640px) {
  /* narrow screens: the copy spans the full width, so the wash must too */
  html[data-season="halloween"][data-theme="light"] .hero {
    background:
      radial-gradient(ellipse 95% 42% at 50% 46%, rgba(250, 242, 228, 0.86), transparent 78%),
      linear-gradient(to top, rgba(40, 26, 20, 0.35), transparent 30%),
      url("/season/haunt-day.webp") 70% center / cover no-repeat;
  }
  html[data-season="halloween"] .hero {
    background:
      radial-gradient(ellipse 95% 42% at 50% 46%, rgba(10, 6, 14, 0.6), transparent 78%),
      linear-gradient(to top, rgba(8, 6, 12, 0.85), transparent 30%),
      url("/season/haunt-night.webp") 24% center / cover no-repeat;
  }
}

/* ── The pumpkin button (only while the season is available) ── */
.season-toggle { display: none; }
html[data-season-available] .season-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border-hi); background: transparent;
  transition: background 0.2s, box-shadow 0.2s, filter 0.2s;
}
html[data-season-available] .season-toggle::before {
  content: ''; width: 20px; height: 20px; background: url("/season/jack.svg") center / contain no-repeat;
}
html[data-season="halloween"] .season-toggle { box-shadow: 0 0 10px rgba(255, 138, 43, 0.45); }
html[data-season-available]:not([data-season]) .season-toggle::before { filter: grayscale(1); opacity: 0.55; }
html[data-season-available] .season-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }