/* Toxics Land 5.0 seasonal layer (10/24). theme.js sets data-season on <html>; tokens.css swaps the accent.
   This file only adds the seasonal art: moon + bats on page headers and the home hero, a soft glow, the event strip.
   It is the one place gradients are allowed (moon light / fog are pictures, not UI). Nothing here shows when the
   season is off, and everything holds still for prefers-reduced-motion. */

/* ------------------------------------------------------------------ event strip (shell adds it on every page) */
.season-strip { display: none; }
:root[data-season] .season-strip { display: block; background: var(--t-acc); color: var(--t-acc-ink); font: 600 14.5px/1.4 var(--t-font); }
.season-strip .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding-block: 7px; }
.season-strip a { color: inherit; font-weight: 700; text-underline-offset: 3px; }
.season-strip .s5cd { color: inherit; font: 500 13.5px var(--t-mono); background: rgba(0,0,0,.16); padding: 1px 7px; border-radius: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ------------------------------------------------------------------ page headers: a moon and three bats in the corner */
:root[data-season="halloween"] .pb { position: relative; }
:root[data-season="halloween"] .pb::after {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  top: 10px; right: 14px; left: auto; bottom: auto; width: min(300px, 46%); height: 150px; max-height: 60%; aspect-ratio: auto; border: 0; border-radius: 0; opacity: 1;
  background: url("/assets/toxics/season/moonbats.svg") right top / contain no-repeat;
}
:root[data-season="halloween"] .pb .pb-art::after { background: linear-gradient(0deg, rgba(255,120,20,.16), transparent 55%); }
:root[data-season="halloween"] .page-h:not(.pb) { position: relative; display: block; padding-right: 160px; }
@media (max-width: 640px) { :root[data-season="halloween"] .page-h:not(.pb) { padding-right: 100px; } }
:root[data-season="halloween"] .page-h:not(.pb)::after {
  content: ""; position: absolute; top: -6px; right: 0; left: auto; width: 150px; height: 75px; pointer-events: none; opacity: .9;
  background: url("/assets/toxics/season/moonbats.svg") right top / contain no-repeat;
}
@media (max-width: 640px) { :root[data-season="halloween"] .page-h:not(.pb)::after { width: 96px; height: 48px; } }
@media (prefers-reduced-motion: no-preference) {
  :root[data-season="halloween"] .pb::after { animation: s5-bob 7s ease-in-out infinite alternate; }
}
@keyframes s5-bob { from { transform: translateY(0); } to { transform: translateY(-6px); } }

/* ------------------------------------------------------------------ home hero dressing (home5 adds .h5-moon / .h5-fog / canvas) */
.h5-moon, .h5-fog, .h5-bats { display: none; }
:root[data-season="halloween"] .h5-moon {
  display: block; position: absolute; z-index: 1; right: 9%; top: 15%; width: clamp(70px, 9vw, 124px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #fff3d6 0, #ffd98a 45%, #e9a447 72%);
  box-shadow: 0 0 70px 18px rgba(255,170,70,.26);
}
:root[data-season="halloween"] .h5-fog { display: block; position: absolute; z-index: 1; inset: auto 0 0 0; height: 45%; background: linear-gradient(0deg, rgba(255,138,31,.16), transparent); }
:root[data-season="halloween"] .h5-bats { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  :root[data-season="halloween"] .h5-moon { animation: s5-bob 9s ease-in-out infinite alternate; }
  :root[data-season="halloween"] .h5-fog { animation: s5-fog 14s ease-in-out infinite alternate; }
  :root[data-season="halloween"] .h5-hero-img { animation: h5-drift 38s ease-in-out infinite alternate, s5-flicker 5s steps(1) infinite; }
}
@keyframes s5-fog { from { transform: translateX(-3%); opacity: .75; } to { transform: translateX(3%); opacity: 1; } }
@keyframes s5-flicker { 0%, 100% { opacity: .55; } 47% { opacity: .5; } 48% { opacity: .62; } 52% { opacity: .52; } }

/* ------------------------------------------------------------------ staff portal: a small moon next to the logo */
:root[data-season="halloween"] .srv-a .wm::after, :root[data-season="halloween"] .login-mark .wm::after {
  content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 8px; border-radius: 50%; vertical-align: middle;
  background: radial-gradient(circle at 35% 35%, #fff3d6, #ffb44d);
}

@media (max-width: 700px) { :root[data-season="halloween"] .h5-moon { top: 14px; right: 14px; width: 52px; } }