/* Adrenaline Halloween — seasonal skin for the marketing pages (home, plans).
   Loaded only while the Spooky season is on; removing it restores the year-round look.
   Nothing structural moves: same spacing, radii and layout. */
html[data-season="spooky"], html[data-season="spooky"][data-theme="light"] {
  --night: #0B0710; --night-raised: #140C1C; --night-sunken: #080510; --border: #2E1E3C; --border-subtle: #1F1430;
  --bone: #F7F2FA; --bone-muted: #B7A6C4; --bone-faint: #93829F;
  --pumpkin: #FF7518; --pumpkin-hot: #FFB640; --pumpkin-deep: #C4560B; --on-pumpkin: #100714; --pumpkin-soft: rgba(255, 117, 24, .14);
  --blood: #B3120F; --blood-soft: rgba(179, 18, 15, .18); --witch: #8B4BD8; --witch-soft: rgba(139, 75, 216, .16); --slime: #7BE88A;
  --candle: rgba(255, 117, 24, .22);
  --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, monospace; --font-display: "Creepster", "Geist", ui-sans-serif, sans-serif;
  --space-2: 8px; --space-4: 16px; --space-6: 24px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px;
  /* Homepage tokens: orange takes over from red, the ground gets colder. */
  --h-bg: var(--night); --h-panel: var(--night-raised); --h-panel-2: #1A1024; --h-sunken: var(--night-sunken);
  --h-line: var(--border); --h-line-soft: var(--border-subtle);
  --h-text: var(--bone); --h-muted: var(--bone-muted); --h-faint: var(--bone-faint);
  --h-accent: var(--pumpkin); --h-accent-hot: var(--pumpkin-hot); --h-on-accent: var(--on-pumpkin); --h-accent-soft: var(--pumpkin-soft);
  --h-good: var(--slime); --h-glow: var(--candle);
  color-scheme: dark;
}
/* The season is a night skin: the light/dark switch steps aside until 1 November. */
html[data-season="spooky"] #theme-toggle { display: none; }
html[data-season="spooky"] .h-brand img, html[data-season="spooky"] .h-cta__mark, html[data-season="spooky"] .pl-brand img { border-radius: 0; }
html[data-season="spooky"] .h-body .h-btn--primary:active { background: var(--pumpkin-deep); color: var(--bone); }
html[data-season="spooky"] .h-dot--good { box-shadow: 0 0 0 4px rgba(123, 232, 138, .15); }
/* The one permitted glow: behind the mark. */
html[data-season="spooky"] .h-cta__mark { filter: drop-shadow(0 0 40px rgba(255, 117, 24, .35)); }

/* Plans page tokens. */
html[data-season="spooky"] .pl-body { --ink: var(--night); --panel: var(--night-raised); --line: var(--border); --line-soft: var(--border-subtle); --text: var(--bone); --muted: var(--bone-muted); --adr: var(--pumpkin); }
html[data-season="spooky"] .pl-body .pl-adr .pl-cta { color: var(--on-pumpkin); }

/* Seasonal banner — above the navbar, one per site, dismissible for the session. */
.hw-banner { position: relative; z-index: 45; display: flex; align-items: center; justify-content: center; gap: var(--space-4); min-height: 52px; margin-bottom: 18px; padding: 8px 56px; background: var(--night-raised); border-bottom: 1px solid var(--border); font-family: var(--font-sans); }
.hw-banner[hidden] { display: none; }
.hw-banner__glow { position: absolute; inset: -60% 30% auto 30%; height: 180px; background: radial-gradient(closest-side, var(--candle), transparent); pointer-events: none; overflow: hidden; }
.hw-banner__text { position: relative; margin: 0; font-size: 15px; color: var(--bone); text-align: center; }
.hw-banner__text a { color: var(--pumpkin); font-weight: 600; text-decoration: none; }
.hw-banner__text a:hover { text-decoration: underline; }
.hw-banner__word { font-family: var(--font-display); font-size: 24px; color: var(--pumpkin); vertical-align: -2px; margin-right: 6px; }
.hw-banner__close { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--bone-muted); cursor: pointer; }
.hw-banner__close:hover { background: var(--night-sunken); color: var(--bone); }
.hw-banner__close:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 117, 24, .45); }
.hw-banner__bats { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); width: 44px; opacity: .7; }

/* Drip edge under the banner — the season's signature, used once. */
.hw-drip::after { content: ""; position: absolute; left: 0; right: 0; bottom: -17px; height: 18px; background: var(--drip-color, var(--pumpkin)); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='18' viewBox='0 0 120 18' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0h120v4H0z'/%3E%3Cpath fill='%23fff' d='M10 3c2 0 3 2 3 5s-1 5-3 5-3-2-3-5 1-5 3-5zM34 3c2.2 0 3.4 3 3.4 7s-1.2 8-3.4 8-3.4-4-3.4-8 1.2-7 3.4-7zM58 3c1.8 0 2.8 2 2.8 4.5S59.8 12 58 12s-2.8-2-2.8-4.5S56.2 3 58 3zM82 3c2.4 0 3.6 3.4 3.6 7.5S84.4 18 82 18s-3.6-3.4-3.6-7.5S79.6 3 82 3zM106 3c2 0 3 2.4 3 5.4s-1 5.6-3 5.6-3-2.6-3-5.6S104 3 106 3z'/%3E%3C/svg%3E") repeat-x left top / 120px 18px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='18' viewBox='0 0 120 18' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0h120v4H0z'/%3E%3Cpath fill='%23fff' d='M10 3c2 0 3 2 3 5s-1 5-3 5-3-2-3-5 1-5 3-5zM34 3c2.2 0 3.4 3 3.4 7s-1.2 8-3.4 8-3.4-4-3.4-8 1.2-7 3.4-7zM58 3c1.8 0 2.8 2 2.8 4.5S59.8 12 58 12s-2.8-2-2.8-4.5S56.2 3 58 3zM82 3c2.4 0 3.6 3.4 3.6 7.5S84.4 18 82 18s-3.6-3.4-3.6-7.5S79.6 3 82 3zM106 3c2 0 3 2.4 3 5.4s-1 5.6-3 5.6-3-2.6-3-5.6S104 3 106 3z'/%3E%3C/svg%3E") repeat-x left top / 120px 18px; }

/* Cobwebs — two per page, in the hero corners, behind content. */
.hw-web { position: absolute; width: 168px; height: 168px; color: var(--witch); opacity: .38; pointer-events: none; z-index: 0; }
.hw-web svg { width: 100%; height: 100%; display: block; }
.hw-web--tl { top: 0; left: 0; }
.hw-web--tr { top: 0; right: 0; transform: scaleX(-1); }

/* Bats — decoration only, three at most, flying in from a corner. */
.hw-bats { color: var(--pumpkin); }
.hw-bats svg { display: block; width: 100%; height: auto; }
.hw-hero-bats { position: absolute; top: 28px; right: 7%; display: flex; gap: 14px; align-items: flex-start; z-index: 1; pointer-events: none; }
.hw-hero-bats > span { display: block; }
.hw-hero-bats > span:nth-child(1) { width: 56px; }
.hw-hero-bats > span:nth-child(2) { width: 40px; margin-top: 22px; }
.hw-hero-bats > span:nth-child(3) { width: 28px; margin-top: 6px; }
.hw-bat--flap { animation: hw-flap 1.6s ease-in-out infinite; transform-origin: center; }
.hw-bat--flap:nth-child(2) { animation-delay: -.5s; }
.hw-bat--flap:nth-child(3) { animation-delay: -1s; }
@keyframes hw-flap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.72); } }

/* Fog — the bottom of the hero only, never behind body copy. */
.hw-fog { position: absolute; left: 0; right: 0; bottom: 0; height: 96px; overflow: hidden; pointer-events: none; z-index: 0; }
.hw-fog__puff { position: absolute; bottom: -44px; width: 340px; height: 120px; border-radius: 50%; background: var(--witch-soft); filter: blur(26px); animation: hw-drift 26s linear infinite; }
.hw-fog__puff:nth-child(2) { animation-duration: 34s; animation-delay: -8s; opacity: .8; }
.hw-fog__puff:nth-child(3) { animation-duration: 42s; animation-delay: -18s; opacity: .6; }
@keyframes hw-drift { from { transform: translateX(-380px); } to { transform: translateX(1200px); } }
html[data-season="spooky"] .h-hero__grid { z-index: 1; }

@media (max-width: 700px) {
  .hw-banner { padding: 8px 48px 8px 16px; justify-content: flex-start; }
  .hw-banner__bats { display: none; }
  .hw-banner__word { font-size: 20px; }
  .hw-web { width: 110px; height: 110px; }
  .hw-hero-bats { right: 4%; top: 12px; transform: scale(.75); transform-origin: top right; }
}
@media (prefers-reduced-motion: reduce) { .hw-bat--flap, .hw-fog__puff { animation: none; } }


/* ================================================================ site-wide (every page except the CAD)
   The shared "Command" tokens (--c-*) and the older site tokens (--accent, --bg...) follow the season. */
html[data-season="spooky"], html[data-season="spooky"][data-theme="light"],
:root[data-season="spooky"][data-ui="command"], :root[data-season="spooky"][data-ui="command"][data-theme="light"] {
  --c-bg: #0B0710; --c-surface: #140C1C; --c-surface-raised: #1A1024; --c-surface-sunken: #080510;
  --c-border: #2E1E3C; --c-border-subtle: #1F1430;
  --c-text: #F7F2FA; --c-text-muted: #B7A6C4; --c-text-faint: #93829F;
  --c-brand: #FF7518; --c-action: #FF7518; --c-action-hover: #FFB640; --c-brand-text: #FF9A4D; --c-success: #7BE88A;
  --accent: #FF7518; --accent-deep: #C4560B; --accent-dim: #3A1D08; --accent-glow: #FFB640;
  --bg: #0B0710; --bg-raised: #140C1C;
}
html[data-season="spooky"] body { background-color: var(--c-bg); }
/* Pumpkin fills carry near-black text, never white. */
html[data-season="spooky"] .btn-primary:not(#panel-cad *), html[data-season="spooky"] .btn-primary:not(#panel-cad *):hover { color: #100714; }

/* The CAD keeps its year-round colours, even inside the dashboard. */
html[data-season="spooky"] #panel-cad, html[data-season="spooky"] body > [class*="cad-"] {
  --c-bg: #09090B; --c-surface: #111114; --c-surface-raised: #18181C; --c-surface-sunken: #0C0C0F;
  --c-border: #26262C; --c-border-subtle: #1C1C21;
  --c-text: #FAFAFA; --c-text-muted: #A1A1AA; --c-text-faint: #8A8A93;
  --c-brand: #F50332; --c-action: #D9022C; --c-action-hover: #B80226; --c-brand-text: #FF4D6A; --c-success: #4ADE80;
  --accent: #FA0133; --accent-deep: #B8002A; --accent-dim: #4d0111; --accent-glow: #FF5470; --bg: #0A0A0C; --bg-raised: #131316;
}
html[data-season="spooky"][data-theme="light"] #panel-cad, html[data-season="spooky"][data-theme="light"] body > [class*="cad-"] {
  --c-bg: #FAFAFA; --c-surface: #FFFFFF; --c-surface-raised: #F4F4F5; --c-surface-sunken: #F4F4F5;
  --c-border: #E4E4E7; --c-border-subtle: #EEEEF0;
  --c-text: #09090B; --c-text-muted: #52525B; --c-text-faint: #6B6B74;
  --c-action: #C4001F; --c-action-hover: #A3001A; --c-brand-text: #C4001F; --c-success: #15803D;
  --bg: #F7F7F8; --bg-raised: #FFFFFF;
}

/* ================================================================ loading animation
   The traced heartbeat mark steps aside for the Halloween mark, flickering like a candle. */
html[data-season="spooky"] #page-loader .loader-trace { display: none; }
html[data-season="spooky"] #page-loader .loader-mark::before {
  content: ""; display: block; width: 132px; height: 132px; margin: 0 auto 16px;
  background: url("/assets/seasons/halloween-mark.webp?v=2") center / contain no-repeat;
  filter: drop-shadow(0 0 28px rgba(255, 117, 24, .45));
  animation: hw-loader-candle 1.8s ease-in-out infinite;
}
html[data-season="spooky"] #page-loader .loader-label { color: #FF7518; }
@keyframes hw-loader-candle { 0%, 100% { opacity: .82; transform: scale(1); } 22% { opacity: 1; transform: scale(1.04); } 48% { opacity: .68; } 70% { opacity: .95; transform: scale(1.02); } }
@media (prefers-reduced-motion: reduce) { html[data-season="spooky"] #page-loader .loader-mark::before { animation: none; } }

/* ================================================================ Mod Panel (its own colour set, so it is themed here) */
html[data-season="spooky"] body.mp {
  --bg: #0B0710; --panel: #140C1C; --panel-2: #1A1024; --sunken: #080510; --line: #2E1E3C; --line-soft: #1F1430;
  --text: #F7F2FA; --muted: #B7A6C4; --faint: #93829F; --accent: #FF7518; --accent-hot: #FFB640; --good: #7BE88A;
}
html[data-season="spooky"] body.mp .mp-btn--primary, html[data-season="spooky"] body.mp .mp-btn--primary:hover { color: #100714; }
html[data-season="spooky"] body.mp .mp-avatar { color: #FF7518; background: rgba(255, 117, 24, .16); }

/* Custom checkboxes: dark tick on pumpkin (never white on pumpkin). */
html[data-season="spooky"] input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23100714' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E"); }