/* ═════════════════════════════════════════════════════════════════════════════
   Seasonal themes
   ─────────────────────────────────────────────────────────────────────────────
   Loaded ONLY when a seasonal theme is selected (Visual Editor → Seasonal Theme).
   With "Off" this file is not requested at all, so the default look is untouched.

   How it fits together
   • layouts/master.njk maps the editor choice to a slug and puts it on <html>:
       <html data-season="autumn" data-season-tint>
     (data-season-tint is present when "Tint backgrounds & surfaces" is on).
   • Everything here is scoped to html[data-season="…"], so themes cannot leak
     into each other or into the default look. Switching themes swaps one
     attribute; nothing accumulates.
   • A theme is a set of DESIGN TOKENS. The base design system already reads:
       --cl-accent / --cl-accent-rgb      accent fills, borders, links
       --cl-accent-ink                    text on accent fills   (default #04121a)
       --cl-hero-glow                     hero radial glow       (default #00c3ff)
       --cl-grad-from / --cl-grad-to      headline gradients     (default #02afff → #0066ff)
       --cl-bar-from / --cl-bar-to        footer link bar        (default #075ea5 → #00d9ff)
       --cl-brand-fixed                   legal pages accent     (default #11c8ff)
       --cl-brand-fixed-rgb, --cl-season-placeholder  (defaults 17,200,255 / theme colour)
       --cl-mix-partner                   colour mixed into accent gradients (default #7c5cff)
       --cl-light-*                       light-mode hero/offer accent mixes (default blues)
       --cl-background-*, --cl-surface*, --cl-elevated, --cl-snow, --cl-border-rgb
     Each of those falls back to the original value when a theme doesn't set it.
   • --ss-* tokens are seasonal-only (decorations, secondary accent, details).

   Adding a theme later (e.g. Valentine's Day)
     1. schema.json → components["seasonal-theme"].properties.theme.options
     2. layouts/master.njk → seasonalRegistry  (label → slug)
     3. here → copy one palette block below and set its tokens
     4. components/seasonal-theme.njk → SEASONS registry (decoration recipe)
   ═════════════════════════════════════════════════════════════════════════════ */


/* ── 1. Palettes ─────────────────────────────────────────────────────────────
   Accent tokens apply in both colour schemes. Light mode gets a deeper accent so
   it stays readable on light surfaces (≥ 4.5:1) with white ink. */

/* Autumn — amber, burnt sienna, warm umber */
html[data-season="autumn"] {
  --cl-brand-fixed-rgb: var(--cl-accent-rgb);
  --cl-season-placeholder: var(--cl-accent);
  --cl-mix-partner: var(--ss-accent-2);
  --cl-accent: #e8913a;
  --cl-accent-rgb: 232, 145, 58;
  --cl-accent-ink: #1c1006;
  --cl-hero-glow: #7f3415;
  --cl-grad-from: #f6b26b;
  --cl-grad-to: #c2531d;
  --cl-bar-from: #9a3412;
  --cl-bar-to: #f0a24a;
  --cl-brand-fixed: var(--cl-accent);
  --ss-accent-2: #c2531d;
  --ss-accent-2-rgb: 194, 83, 29;
  --ss-glow-rgb: 232, 145, 58;
}
html[data-season="autumn"][data-bs-theme="light"] {
  --cl-light-glow-mix: var(--cl-accent);
  --cl-light-mix: var(--cl-accent);
  --cl-light-deep: #7c2d12;
  --cl-light-text-mix: #7c2d12;
  --cl-accent: #b45309;
  --cl-accent-rgb: 180, 83, 9;
  --cl-accent-ink: #ffffff;
  --cl-hero-glow: #f8c99a;
  --cl-grad-from: #c2410c;
  --cl-grad-to: #92400e;
}
html[data-season="autumn"][data-season-tint][data-bs-theme="dark"] {
  --cl-background-primary: #0e0b09;
  --cl-background-primary-rgb: 14, 11, 9;
  --cl-background-secondary: #1e1813;
  --cl-background-secondary-rgb: 30, 24, 19;
  --cl-surface: 22, 17, 13;
  --cl-surface-2: 31, 25, 19;
  --cl-elevated: 18, 14, 11;
  --cl-border-rgb: 255, 232, 205;
  --cl-border: rgba(255, 232, 205, 0.07);
  --cl-snow: 255, 246, 236;
  --cl-ink-rgb: 255, 246, 236;
  background-color: #0e0b09;
}

/* Halloween — midnight violet, restrained pumpkin orange */
html[data-season="halloween"] {
  --cl-brand-fixed-rgb: var(--cl-accent-rgb);
  --cl-season-placeholder: var(--cl-accent);
  --cl-mix-partner: var(--ss-accent-2);
  --cl-accent: #ff8a3d;
  --cl-accent-rgb: 255, 138, 61;
  --cl-accent-ink: #1a0b02;
  --cl-hero-glow: #5b21b6;
  --cl-grad-from: #c4a1ff;
  --cl-grad-to: #ff8a3d;
  --cl-bar-from: #7c3aed;
  --cl-bar-to: #ff8a3d;
  --cl-brand-fixed: var(--cl-accent);
  --ss-accent-2: #8b5cf6;
  --ss-accent-2-rgb: 139, 92, 246;
  --ss-glow-rgb: 139, 92, 246;
}
html[data-season="halloween"][data-bs-theme="light"] {
  --cl-light-glow-mix: var(--cl-accent);
  --cl-light-mix: var(--cl-accent);
  --cl-light-deep: #5b21b6;
  --cl-light-text-mix: #5b21b6;
  --cl-accent: #c2410c;
  --cl-accent-rgb: 194, 65, 12;
  --cl-accent-ink: #ffffff;
  --cl-hero-glow: #d8c4ff;
  --cl-grad-from: #6d28d9;
  --cl-grad-to: #c2410c;
}
html[data-season="halloween"][data-season-tint][data-bs-theme="dark"] {
  --cl-background-primary: #0a0710;
  --cl-background-primary-rgb: 10, 7, 16;
  --cl-background-secondary: #17121f;
  --cl-background-secondary-rgb: 23, 18, 31;
  --cl-surface: 19, 14, 27;
  --cl-surface-2: 27, 20, 38;
  --cl-elevated: 15, 11, 22;
  --cl-border-rgb: 214, 196, 255;
  --cl-border: rgba(214, 196, 255, 0.07);
  --cl-snow: 244, 240, 255;
  --cl-ink-rgb: 244, 240, 255;
  background-color: #0a0710;
}

/* Black Friday — true black, signal yellow, a touch of urgent red */
html[data-season="black-friday"] {
  --cl-brand-fixed-rgb: var(--cl-accent-rgb);
  --cl-season-placeholder: var(--cl-accent);
  --cl-mix-partner: var(--ss-accent-2);
  --cl-accent: #ffd400;
  --cl-accent-rgb: 255, 212, 0;
  --cl-accent-ink: #0a0a0a;
  --cl-hero-glow: #3d3200;
  --cl-grad-from: #fff0a3;
  --cl-grad-to: #ffb800;
  --cl-bar-from: #ff3b30;
  --cl-bar-to: #ffd400;
  --cl-brand-fixed: var(--cl-accent);
  --ss-accent-2: #ff3b30;
  --ss-accent-2-rgb: 255, 59, 48;
  --ss-glow-rgb: 255, 212, 0;
}
html[data-season="black-friday"][data-bs-theme="light"] {
  --cl-light-glow-mix: var(--cl-accent);
  --cl-light-mix: var(--cl-accent);
  --cl-light-deep: #1f1f1f;
  --cl-light-text-mix: #1f1f1f;
  --cl-accent: #a16207;
  --cl-accent-rgb: 161, 98, 7;
  --cl-accent-ink: #ffffff;
  --cl-hero-glow: #fde68a;
  --cl-grad-from: #111111;
  --cl-grad-to: #a16207;
}
html[data-season="black-friday"][data-season-tint][data-bs-theme="dark"] {
  --cl-background-primary: #050505;
  --cl-background-primary-rgb: 5, 5, 5;
  --cl-background-secondary: #141414;
  --cl-background-secondary-rgb: 20, 20, 20;
  --cl-surface: 13, 13, 13;
  --cl-surface-2: 21, 21, 21;
  --cl-elevated: 10, 10, 10;
  --cl-border-rgb: 255, 255, 255;
  --cl-border: rgba(255, 255, 255, 0.08);
  --cl-snow: 255, 255, 255;
  --cl-ink-rgb: 255, 255, 255;
  background-color: #050505;
}

/* Christmas — evergreen night, berry red, a little gold */
html[data-season="christmas"] {
  --cl-brand-fixed-rgb: var(--cl-accent-rgb);
  --cl-season-placeholder: var(--cl-accent);
  --cl-mix-partner: var(--ss-accent-2);
  --cl-accent: #d93036;
  --cl-accent-rgb: 217, 48, 54;
  --cl-accent-ink: #ffffff;
  --cl-hero-glow: #14532d;
  --cl-grad-from: #f2d78c;
  --cl-grad-to: #e5484d;
  --cl-bar-from: #166534;
  --cl-bar-to: #e5484d;
  --cl-brand-fixed: #e5484d;
  --ss-accent-2: #d4af37;
  --ss-accent-2-rgb: 212, 175, 55;
  --ss-glow-rgb: 34, 120, 74;
}
html[data-season="christmas"][data-bs-theme="light"] {
  --cl-light-glow-mix: var(--cl-accent);
  --cl-light-mix: var(--cl-accent);
  --cl-light-deep: #14532d;
  --cl-light-text-mix: #14532d;
  --cl-accent: #c0272d;
  --cl-accent-rgb: 192, 39, 45;
  --cl-hero-glow: #bbe5c9;
  --cl-grad-from: #166534;
  --cl-grad-to: #c0272d;
}
html[data-season="christmas"][data-season-tint][data-bs-theme="dark"] {
  --cl-background-primary: #07100c;
  --cl-background-primary-rgb: 7, 16, 12;
  --cl-background-secondary: #122019;
  --cl-background-secondary-rgb: 18, 32, 25;
  --cl-surface: 12, 22, 17;
  --cl-surface-2: 18, 31, 24;
  --cl-elevated: 10, 18, 14;
  --cl-border-rgb: 214, 245, 226;
  --cl-border: rgba(214, 245, 226, 0.07);
  --cl-snow: 247, 251, 248;
  --cl-ink-rgb: 247, 251, 248;
  background-color: #07100c;
}

/* Christmas Eve & Day — candlelight, champagne gold, cream, deep evergreen */
html[data-season="christmas-eve-and-day"] {
  --cl-brand-fixed-rgb: var(--cl-accent-rgb);
  --cl-season-placeholder: var(--cl-accent);
  --cl-mix-partner: var(--ss-accent-2);
  --cl-accent: #e9c77b;
  --cl-accent-rgb: 233, 199, 123;
  --cl-accent-ink: #1e1408;
  --cl-hero-glow: #8a5a1c;
  --cl-grad-from: #fbe9bf;
  --cl-grad-to: #d4a04c;
  --cl-bar-from: #1f4a36;
  --cl-bar-to: #e9c77b;
  --cl-brand-fixed: var(--cl-accent);
  --ss-accent-2: #1f4a36;
  --ss-accent-2-rgb: 31, 74, 54;
  --ss-glow-rgb: 255, 196, 112;
}
html[data-season="christmas-eve-and-day"][data-bs-theme="light"] {
  --cl-light-glow-mix: var(--cl-accent);
  --cl-light-mix: var(--cl-accent);
  --cl-light-deep: #1f4a36;
  --cl-light-text-mix: #1f4a36;
  --cl-accent: #8a6418;
  --cl-accent-rgb: 138, 100, 24;
  --cl-accent-ink: #ffffff;
  --cl-hero-glow: #f6e3b8;
  --cl-grad-from: #1f4a36;
  --cl-grad-to: #8a6418;
}
html[data-season="christmas-eve-and-day"][data-season-tint][data-bs-theme="dark"] {
  --cl-background-primary: #0f0b08;
  --cl-background-primary-rgb: 15, 11, 8;
  --cl-background-secondary: #1f1912;
  --cl-background-secondary-rgb: 31, 25, 18;
  --cl-surface: 24, 19, 14;
  --cl-surface-2: 33, 26, 19;
  --cl-elevated: 20, 16, 12;
  --cl-border-rgb: 255, 240, 214;
  --cl-border: rgba(255, 240, 214, 0.08);
  --cl-snow: 251, 243, 228;
  --cl-ink-rgb: 251, 243, 228;
  background-color: #0f0b08;
}

/* New Year's Eve — midnight navy, champagne gold, silver */
html[data-season="new-years-eve"] {
  --cl-brand-fixed-rgb: var(--cl-accent-rgb);
  --cl-season-placeholder: var(--cl-accent);
  --cl-mix-partner: var(--ss-accent-2);
  --cl-accent: #f2cc6b;
  --cl-accent-rgb: 242, 204, 107;
  --cl-accent-ink: #14100a;
  --cl-hero-glow: #23336b;
  --cl-grad-from: #fdf1c7;
  --cl-grad-to: #c9d1e0;
  --cl-bar-from: #c9d1e0;
  --cl-bar-to: #f2cc6b;
  --cl-brand-fixed: var(--cl-accent);
  --ss-accent-2: #c9d1e0;
  --ss-accent-2-rgb: 201, 209, 224;
  --ss-glow-rgb: 120, 140, 255;
}
html[data-season="new-years-eve"][data-bs-theme="light"] {
  --cl-light-glow-mix: var(--cl-accent);
  --cl-light-mix: var(--cl-accent);
  --cl-light-deep: #1e2a4a;
  --cl-light-text-mix: #1e2a4a;
  --cl-accent: #8a6a12;
  --cl-accent-rgb: 138, 106, 18;
  --cl-accent-ink: #ffffff;
  --cl-hero-glow: #d9def5;
  --cl-grad-from: #1e293b;
  --cl-grad-to: #8a6a12;
}
html[data-season="new-years-eve"][data-season-tint][data-bs-theme="dark"] {
  --cl-background-primary: #060914;
  --cl-background-primary-rgb: 6, 9, 20;
  --cl-background-secondary: #121829;
  --cl-background-secondary-rgb: 18, 24, 41;
  --cl-surface: 12, 17, 32;
  --cl-surface-2: 18, 25, 44;
  --cl-elevated: 10, 14, 27;
  --cl-border-rgb: 200, 214, 255;
  --cl-border: rgba(200, 214, 255, 0.08);
  --cl-snow: 245, 247, 255;
  --cl-ink-rgb: 245, 247, 255;
  background-color: #060914;
}


/* ── 2. Shared seasonal details (any active theme) ───────────────────────────
   Narrow selectors only: things that carried hardcoded brand colours, plus one
   or two small finishing touches that read the active theme's tokens. */

/* Decorative SVG spotlights in the footer and product grid had a hardcoded fill. */
html[data-season] .footer-spotlight ellipse,
html[data-season] .products-spotlight ellipse {
  fill: var(--cl-accent);
}

/* A whisper of the season's glow at the top of the page (behind content). */
html[data-season][data-season-tint][data-bs-theme="dark"] body {
  background-image: radial-gradient(1200px 520px at 50% -180px, rgba(var(--ss-glow-rgb), 0.10), transparent 70%);
  background-repeat: no-repeat;
}

/* Selection colour follows the theme. */
html[data-season] ::selection {
  background: rgba(var(--cl-accent-rgb), 0.35);
  color: inherit;
}


/* ── 3. Theme signatures ─────────────────────────────────────────────────────
   One or two distinctive, restrained details per theme. Decorations that move
   (leaves, snow, stars…) live in components/seasonal-theme.njk. */

/* The floating navbar's hairline border takes the season's colour (border-color
   only, so its rounded corners, shadow and scroll states stay exactly as they are). */
html[data-season="autumn"] .main-header .header-container        { border-color: rgba(var(--cl-accent-rgb), 0.24); }
html[data-season="halloween"] .main-header .header-container     { border-color: rgba(var(--ss-accent-2-rgb), 0.30); }
html[data-season="black-friday"] .main-header .header-container  { border-color: rgba(var(--cl-accent-rgb), 0.38); }
html[data-season="christmas"] .main-header .header-container     { border-color: rgba(var(--ss-accent-2-rgb), 0.32); }
html[data-season="christmas-eve-and-day"] .main-header .header-container { border-color: rgba(var(--cl-accent-rgb), 0.28); }
html[data-season="new-years-eve"] .main-header .header-container { border-color: rgba(var(--ss-accent-2-rgb), 0.30); }

/* Halloween: product cards pick up a faint violet under-glow on hover. */
html[data-season="halloween"] .product-card:hover {
  box-shadow: 0 18px 40px -18px rgba(var(--ss-accent-2-rgb), 0.55);
}

/* Black Friday: the price on a product page reads tighter and bolder. */
html[data-season="black-friday"] .pp-price {
  letter-spacing: -0.02em;
  font-weight: 800;
}

/* Christmas: product cards get a hint of gold on hover. */
html[data-season="christmas"] .product-card:hover {
  box-shadow: 0 18px 40px -20px rgba(var(--ss-accent-2-rgb), 0.45);
}

/* Christmas Eve & Day: candlelit — buttons on accent carry a soft warm halo. */
html[data-season="christmas-eve-and-day"] .pf-btn-buy::before,
html[data-season="christmas-eve-and-day"] .checkout-btn {
  box-shadow: 0 8px 26px -10px rgba(var(--ss-glow-rgb), 0.55);
}

/* New Year's Eve: headline accents shimmer once, gently, as the page loads. */
html[data-season="new-years-eve"] .hero-content h1 span {
  background-size: 200% 100% !important;
  animation: ss-shimmer 3.5s ease-out 0.4s 1 both;
}
@keyframes ss-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  html[data-season="new-years-eve"] .hero-content h1 span { animation: none; }
}


/* ── 4. Decoration layer (markup from components/seasonal-theme.njk) ─────────
   Fixed, pointer-events: none, above page content but below the navbar,
   drawers and popups. Particles are few and low-contrast by design. */

.ss-layer {
  position: fixed;
  inset: 0;
  z-index: 990;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}
.ss-layer > * { position: absolute; pointer-events: none; will-change: transform, opacity; }

/* Falling things (leaves, snow) */
.ss-fall {
  top: -40px;
  animation: ss-fall var(--d, 18s) linear var(--delay, 0s) infinite;
}
.ss-fall > i {
  display: block;
  width: 100%;
  height: 100%;
  animation: ss-sway var(--sw, 4s) ease-in-out infinite alternate;
}
@keyframes ss-fall {
  0%   { transform: translate3d(0, -5vh, 0); opacity: 0; }
  8%   { opacity: var(--o, 0.5); }
  92%  { opacity: var(--o, 0.5); }
  100% { transform: translate3d(var(--dx, 0px), 108vh, 0); opacity: 0; }
}
@keyframes ss-sway {
  from { transform: translateX(calc(var(--sx, 18px) * -1)) rotate(calc(var(--r, 40deg) * -1)); }
  to   { transform: translateX(var(--sx, 18px)) rotate(var(--r, 40deg)); }
}

/* Rising things (candlelight bokeh) */
.ss-rise {
  bottom: -60px;
  border-radius: 50%;
  animation: ss-rise var(--d, 22s) linear var(--delay, 0s) infinite;
}
@keyframes ss-rise {
  0%   { transform: translate3d(0, 0, 0) scale(0.8); opacity: 0; }
  12%  { opacity: var(--o, 0.4); }
  60%  { opacity: calc(var(--o, 0.4) * 0.7); }
  100% { transform: translate3d(var(--dx, 0px), -112vh, 0) scale(1.1); opacity: 0; }
}

/* Twinkling points (stars) */
.ss-star {
  width: var(--s, 2px);
  height: var(--s, 2px);
  border-radius: 50%;
  background: rgb(var(--ss-accent-2-rgb, 255, 255, 255));
  box-shadow: 0 0 6px rgba(var(--ss-accent-2-rgb, 255, 255, 255), 0.8);
  animation: ss-twinkle var(--d, 4s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes ss-twinkle {
  0%, 100% { opacity: 0.1; transform: scale(0.7); }
  50%      { opacity: var(--o, 0.7); transform: scale(1); }
}

/* Firework burst (New Year's Eve) */
.ss-burst { width: 0; height: 0; }
.ss-burst > i {
  position: absolute;
  left: 0; top: 0;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--c, #f2cc6b);
  box-shadow: 0 0 6px var(--c, #f2cc6b);
  opacity: 0;
  animation: ss-spark 1.6s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0s) forwards;
}
@keyframes ss-spark {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  10%  { opacity: 0.9; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0.4); opacity: 0; }
}

/* Halloween moon (static glow, top right) and drifting bats */
.ss-moon {
  top: -70px;
  right: -70px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 58%, rgba(255, 236, 200, 0.16), rgba(255, 196, 120, 0.06) 45%, transparent 70%);
}
.ss-bat {
  top: var(--y, 20vh);
  left: -60px;
  color: rgba(var(--ss-accent-2-rgb), 0.55);
  animation: ss-fly var(--d, 16s) linear var(--delay, 0s) infinite;
}
.ss-bat svg { width: var(--s, 26px); height: auto; display: block; animation: ss-flap 0.5s ease-in-out infinite alternate; transform-origin: center; }
@keyframes ss-fly {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  6%   { opacity: 1; }
  50%  { transform: translate3d(55vw, -6vh, 0); }
  94%  { opacity: 1; }
  100% { transform: translate3d(112vw, 4vh, 0); opacity: 0; }
}
@keyframes ss-flap { from { transform: scaleY(1); } to { transform: scaleY(0.55); } }

/* Black Friday: a slow glint sweeping across the top edge */
.ss-glint {
  top: 0;
  left: -30%;
  width: 30%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--cl-accent-rgb), 0.9), transparent);
  animation: ss-glint 7s ease-in-out infinite;
}
@keyframes ss-glint { 0% { transform: translateX(0); } 60%, 100% { transform: translateX(450%); } }

/* Christmas Eve & Day: candle warmth rising from the bottom edge */
.ss-warmth {
  left: 0; right: 0; bottom: 0;
  height: 32vh;
  background: radial-gradient(70% 100% at 50% 100%, rgba(var(--ss-glow-rgb), 0.10), transparent 70%);
  animation: ss-flicker 5s ease-in-out infinite alternate;
}
@keyframes ss-flicker { 0% { opacity: 0.75; } 40% { opacity: 1; } 70% { opacity: 0.85; } 100% { opacity: 0.95; } }

/* ── Corner & hanging pieces ────────────────────────────────────────────────
   Anchored just below the announcement bar, tucked into the page corners so
   they frame the content without covering it. Drawn in rgba(--cl-snow) so they
   adapt to light and dark mode. */
.ss-corner {
  top: var(--announcement-offset, 0px);
  opacity: var(--o, 1);
  line-height: 0;
}
.ss-corner.is-left  { left: 0; }
.ss-corner.is-right { right: 0; transform: scaleX(-1); }
.ss-corner.is-tr    { right: 0; }   /* drawn for the right corner already: no mirroring */
.ss-corner svg { display: block; }
.ss-sway { transform-origin: 100% 0; animation: ss-sway-corner 7s ease-in-out infinite alternate; }
@keyframes ss-sway-corner   { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }

/* Halloween cobwebs + spider on its thread */
.ss-web { color: rgba(var(--cl-snow), 0.16); }
.ss-spider {
  top: var(--announcement-offset, 0px);
  right: var(--x, 64px);
  width: 1px;
  height: 34px;
  border-left: 1px solid rgba(var(--cl-snow), 0.2);
  animation: ss-spider-drop 18s ease-in-out infinite;
}
.ss-spider svg {
  position: absolute;
  left: -8px;
  bottom: -18px;
  width: 16px;
  height: auto;
  color: rgba(var(--cl-snow), 0.5);
  transform-origin: 50% 0;
  animation: ss-spider-wiggle 2.6s ease-in-out infinite alternate;
}
@keyframes ss-spider-drop {
  0%, 14%   { height: 34px; }
  42%, 64%  { height: var(--drop, 22vh); }
  88%, 100% { height: 34px; }
}
@keyframes ss-spider-wiggle { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }

/* Halloween jack-o'-lanterns, bottom-left, with a candle flicker inside */
.ss-pumpkins {
  left: 14px;
  bottom: 8px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  opacity: 0.78;
}
.ss-pumpkin { display: block; width: 46px; line-height: 0; filter: drop-shadow(0 0 10px rgba(255, 140, 50, 0.25)); }
.ss-pumpkin.is-small { width: 32px; }
.ss-pumpkin svg { width: 100%; height: auto; display: block; }
.ss-face { animation: ss-candle 3.2s ease-in-out infinite; }
.ss-pumpkin.is-small .ss-face { animation-delay: -1.4s; }
@keyframes ss-candle { 0%, 100% { opacity: 0.95; } 30% { opacity: 0.6; } 45% { opacity: 1; } 70% { opacity: 0.75; } }

/* Halloween ground fog drifting along the bottom edge */
.ss-fog {
  left: -20vw;
  bottom: -60px;
  width: 80vw;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--ss-accent-2-rgb), 0.1), transparent);
  filter: blur(12px);
  animation: ss-fog var(--d, 48s) ease-in-out infinite alternate;
}
.ss-fog.is-2 { left: auto; right: -20vw; width: 70vw; animation-direction: alternate-reverse; }
@keyframes ss-fog { from { transform: translateX(0); } to { transform: translateX(30vw); } }

/* Autumn wind gust: a few leaves crossing the page sideways */
.ss-gust {
  left: -40px;
  opacity: 0;
  animation: ss-gust 8s cubic-bezier(0.4, 0, 0.6, 1) var(--delay, 0s) forwards;
}
.ss-gust > i { display: block; width: 100%; height: 100%; animation: ss-sway 1.2s ease-in-out infinite alternate; --sx: 6px; --r: 140deg; }
@keyframes ss-gust {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  10%  { opacity: var(--o, 0.45); }
  50%  { transform: translate3d(55vw, -8vh, 0); }
  90%  { opacity: var(--o, 0.45); }
  100% { transform: translate3d(110vw, 6vh, 0); opacity: 0; }
}

/* Anything hanging on a string (tags, baubles, streamers) swings gently */
.ss-hang {
  top: var(--announcement-offset, 0px);
  line-height: 0;
  color: rgba(var(--cl-snow), 0.3);
  transform-origin: 50% 0;
  animation: ss-swing var(--d, 6s) ease-in-out var(--delay, 0s) infinite alternate;
}
.ss-hang.is-left  { left: var(--x, 40px); }
.ss-hang.is-right { right: var(--x, 40px); }
.ss-hang svg { display: block; }
@keyframes ss-swing { from { transform: rotate(-3.5deg); } to { transform: rotate(3.5deg); } }
html[data-season="black-friday"] .ss-hang { opacity: 0.75; }
html[data-season="christmas"] .ss-hang { opacity: 0.85; }
html[data-season="new-years-eve"] .ss-hang { opacity: 0.6; }

/* Christmas Eve & Day: warm fairy-light garlands draped over the corners */
.ss-garland { color: rgba(var(--cl-snow), 0.22); }
.ss-garland.is-right { transform: scaleX(-1); }
.ss-bulb { animation: ss-bulb 3s ease-in-out var(--delay, 0s) infinite; }
@keyframes ss-bulb { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* Small screens: lighter still. */
@media (max-width: 640px) {
  .ss-layer .ss-optional { display: none; }
  .ss-moon { width: 180px; height: 180px; }
  .ss-web svg { width: 96px; height: 96px; }
  .ss-pumpkin { width: 34px; }
  .ss-spider { right: 28px; }
}

/* Reduced motion: no movement at all. Static, subtle accents only. */
@media (prefers-reduced-motion: reduce) {
  .ss-fall, .ss-rise, .ss-bat, .ss-burst, .ss-glint, .ss-gust { display: none; }
  .ss-star, .ss-warmth, .ss-sway, .ss-spider, .ss-spider svg, .ss-face, .ss-fog, .ss-hang, .ss-bulb { animation: none; }
  .ss-star { opacity: calc(var(--o, 0.7) * 0.6); }
}

/* Light colour scheme: decorations step back further. */
html[data-bs-theme="light"] .ss-layer { opacity: 0.6; }
html[data-bs-theme="light"] .ss-moon { display: none; }