/* seasons.css: the quiet holiday touches that /js/seasons.js adds (docs/SEASONS.md, 15 Oct 2026). The mark beside the
   wordmark, her line under the opening, the seasonal orb palettes (classes the orbsPalette hook in orbs.js puts on the
   orbs) and the three light effects. Every new colour is in this one :root block (scripts/check.mjs); the rest are the
   cosmic.css tokens. Motion is transform and opacity only; the effect layer is fixed, pointer-events:none and never
   takes layout, and nothing moves under prefers-reduced-motion (the script also never builds the layer). */
:root{
  --sn-ember:#ff8a3d; --sn-violet:#8a4de8; --sn-green:#7bd389; --sn-amber:#f2a93b; --sn-candle:#ffd98a;
  --sn-xred:#e8505b; --sn-xgreen:#4fb37a; --sn-silver:#dfe6f2; --sn-snow:#fff8ec; --sn-red:#ff6b6b; --sn-blue:#6fa8ff;
  --z-season:3
}

/* ---- the mark: a gold line drawing the size of the moon badge, after the wordmark's text ---- */
.season-mark{width:20px;height:20px;flex:none;margin-left:var(--s2);fill:none;stroke:var(--gold-2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.season-mark circle{fill:none}
.season-mark-halloween{stroke:var(--sn-ember)}
.season-mark-valentine{stroke:var(--rose)}
.season-mark-stpatrick{stroke:var(--sn-green)}
.season-mark-christmas circle{fill:var(--sn-xred);stroke:none}
.footer .season-mark{display:none}

/* ---- her line: one sentence under the opening (home), the greeting (Sanctuary Home) and at the top of a Community room ---- */
.season-line{margin:0;max-width:var(--measure);color:var(--gold-2);opacity:0;animation:season-in 900ms var(--ease,ease) forwards}
/* the homepage: the line sits in the hero's own bottom padding (48px on phones, 96px from 1024), out of the flow, so nothing
   moves when it arrives (the hero grid is vertically centred from 1024; a line in the flow would re-centre the whole opening) */
.hero-text{position:relative}
.hero-text .season-line{position:absolute;left:0;right:0;top:100%;margin:var(--s2) 0 0}
@media (max-width:767.98px){ .hero-text .season-line{font-size:15px;line-height:20px} }
.san-hello .season-line{margin-top:var(--s2)}
.season-feed{margin:0 0 var(--s3)}
@keyframes season-in{to{opacity:1}}

/* ---- the orbs in season (orbs.css draws the same radial, these only change the light) ---- */
.orbs .orb-ember{background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--sn-ember) 74%,transparent) 0,color-mix(in srgb,var(--sn-ember) 30%,transparent) 28%,color-mix(in srgb,var(--gold) 8%,transparent) 52%,transparent 70%)}
.orbs .orb-violet{background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--sn-violet) 72%,transparent) 0,color-mix(in srgb,var(--sn-violet) 28%,transparent) 28%,color-mix(in srgb,var(--magenta) 8%,transparent) 52%,transparent 70%)}
.orbs .orb-sgold{background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--gold-2) 84%,transparent) 0,color-mix(in srgb,var(--gold-2) 36%,transparent) 26%,color-mix(in srgb,var(--gold) 10%,transparent) 50%,transparent 68%)}
.orbs .orb-green{background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--sn-green) 72%,transparent) 0,color-mix(in srgb,var(--sn-green) 28%,transparent) 28%,color-mix(in srgb,var(--gold) 8%,transparent) 52%,transparent 70%)}
.orbs .orb-amber{background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--sn-amber) 76%,transparent) 0,color-mix(in srgb,var(--sn-amber) 30%,transparent) 28%,color-mix(in srgb,var(--gold) 8%,transparent) 52%,transparent 70%)}
.orbs .orb-candle{background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--sn-candle) 80%,transparent) 0,color-mix(in srgb,var(--sn-candle) 32%,transparent) 28%,color-mix(in srgb,var(--gold) 8%,transparent) 52%,transparent 70%)}
.orbs .orb-xred{background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--sn-xred) 72%,transparent) 0,color-mix(in srgb,var(--sn-xred) 28%,transparent) 28%,color-mix(in srgb,var(--gold) 8%,transparent) 52%,transparent 70%)}
.orbs .orb-xgreen{background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--sn-xgreen) 72%,transparent) 0,color-mix(in srgb,var(--sn-xgreen) 28%,transparent) 28%,color-mix(in srgb,var(--gold) 8%,transparent) 52%,transparent 70%)}
.orbs .orb-silver{background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--sn-silver) 70%,transparent) 0,color-mix(in srgb,var(--sn-silver) 26%,transparent) 28%,color-mix(in srgb,var(--cream) 6%,transparent) 52%,transparent 70%)}

/* ---- the light effects: a fixed layer above the orbs, under the nav; 8 to 16 elements, each its own CSS animation ---- */
.season-fx{position:fixed;inset:0;z-index:var(--z-season);pointer-events:none;overflow:hidden;contain:strict}
.season-fx > span{position:absolute;left:0;top:0;display:block;will-change:transform,opacity;opacity:0}
.season-fx.is-paused > span{animation-play-state:paused}
/* snow: small soft dots falling from above the top edge to below the bottom, swaying a little */
.season-fx .flake{width:var(--sz);height:var(--sz);border-radius:var(--r-full);background:var(--sn-snow);box-shadow:0 0 6px var(--sn-snow);animation:season-fall var(--dur) linear var(--delay) infinite}
@keyframes season-fall{0%{transform:translate3d(var(--x),-6vh,0);opacity:0}8%{opacity:var(--o)}92%{opacity:var(--o)}100%{transform:translate3d(calc(var(--x) + var(--sway)),106vh,0);opacity:0}}
/* leaves: a few line-drawn leaves turning as they drift down */
.season-fx .leaf{width:18px;height:18px;animation:season-drift var(--dur) linear var(--delay) infinite}
.season-fx .leaf-svg{width:100%;height:100%;fill:none;stroke:var(--sn-amber);stroke-width:1.4;stroke-linejoin:round}
.season-fx .leaf:nth-child(even) .leaf-svg{stroke:var(--sn-candle)}
@keyframes season-drift{0%{transform:translate3d(var(--x),-8vh,0) rotate(0deg);opacity:0}10%{opacity:var(--o)}90%{opacity:var(--o)}100%{transform:translate3d(calc(var(--x) + var(--sway)),108vh,0) rotate(var(--rot));opacity:0}}
/* sparks: tiny points that glow, lift a little and go out, in the top of the sky */
.season-fx .spark{width:4px;height:4px;border-radius:var(--r-full);background:var(--gold-2);box-shadow:0 0 8px 1px var(--gold-2);animation:season-spark var(--dur) ease-in-out var(--delay) infinite}
.season-fx .spark-silver{background:var(--sn-silver);box-shadow:0 0 8px 1px var(--sn-silver)}
.season-fx .spark-red{background:var(--sn-red);box-shadow:0 0 8px 1px var(--sn-red)}
.season-fx .spark-white{background:var(--sn-snow);box-shadow:0 0 8px 1px var(--sn-snow)}
.season-fx .spark-blue{background:var(--sn-blue);box-shadow:0 0 8px 1px var(--sn-blue)}
@keyframes season-spark{0%{transform:translate3d(var(--x),var(--y),0) scale(.4);opacity:0}45%{opacity:.9;transform:translate3d(var(--x),calc(var(--y) - 24px),0) scale(1)}100%{transform:translate3d(var(--x),calc(var(--y) - 48px),0) scale(.3);opacity:0}}
/* ---- the stream overlay (room/overlay.html, docs/LIVE_SOCIAL.md): a small mark in the top-right corner of the picture going out
   and the season's colour as a hairline on the name band and the pinned comment; never over her face or her cards ---- */
.overlay-page .season-mark{position:fixed;top:16px;right:16px;z-index:7;width:40px;height:40px;margin:0;padding:8px;border-radius:var(--r-full);background:color-mix(in srgb,var(--night) 72%,transparent);stroke:var(--gold-2)}
.overlay-page[data-season] .ov-name,.overlay-page[data-season] .ov-pin{border-left:3px solid var(--season-accent)}
[data-season="valentine"]{--season-accent:var(--rose)} [data-season="stpatrick"]{--season-accent:var(--sn-green)} [data-season="fourth"]{--season-accent:var(--sn-blue)}
[data-season="halloween"]{--season-accent:var(--sn-ember)} [data-season="thanksgiving"]{--season-accent:var(--sn-amber)} [data-season="christmas"]{--season-accent:var(--sn-xred)}
[data-season="newyear"]{--season-accent:var(--gold-2)}
/* nothing moves for people who asked for less motion; the script also never builds the layer */
@media (prefers-reduced-motion:reduce){ .season-fx{display:none} .season-line{animation:none;opacity:1} }