/* OUT2 mood system (js/mood.js): optional events.json "mood" -> html[data-mood=...] on event pages.
   Each mood = a few custom properties (tint) + optional decor layers. Transform/opacity only; static tint kept
   under prefers-reduced-motion. Add a mood: a [data-mood=x] block here + an entry in MOODS in js/mood.js. */
html[data-mood]{--mood-a:var(--hot);--mood-b:var(--hot);--mood-fog:transparent}
html[data-mood=spooky]{--hot:#ff7a1a;--mood-a:#ff7a1a;--mood-b:#8b5cf6;--mood-fog:rgba(196,186,230,.10)}
html[data-mood=candlelight]{--hot:#f4b860;--mood-a:#f4b860;--mood-b:#c2410c;--mood-fog:rgba(255,190,110,.10)}
html[data-mood=candlelight] .e-hero .e-shade{background-image:radial-gradient(120% 80% at 50% 110%,rgba(244,184,96,.28),transparent 60%),linear-gradient(180deg,transparent 40%,rgba(194,65,12,.22))}
.md-bokehs{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1;contain:strict}
.md-bokeh{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,200,120,.9),rgba(255,170,80,0) 70%);opacity:.18;will-change:transform,opacity;animation:mdbokeh var(--d,24s) ease-in-out infinite alternate}
@keyframes mdbokeh{from{transform:translate3d(0,0,0);opacity:.10}to{transform:translate3d(8px,-36px,0);opacity:.24}}
.md-off .md-bokeh{animation-play-state:paused}
html[data-mood=candlelight] .e-pills .pill,html[data-mood=candlelight] .e-kicker{animation:mdcandle 9s steps(1) infinite}
@keyframes mdcandle{0%,40%,44%,72%,100%{opacity:1}42%{opacity:.9}73%{opacity:.86}75%{opacity:.95}}
html[data-mood=holiday]{--hot:#e8b04a;--mood-a:#e8b04a;--mood-b:#c0392b;--mood-fog:transparent}
html[data-mood] .e-hero .e-shade{background-image:linear-gradient(180deg,transparent 40%,color-mix(in srgb,var(--mood-b) 18%,transparent))}
.md-layer{position:fixed;inset:0;pointer-events:none;z-index:2;overflow:hidden;contain:strict}
.md-fog{position:absolute;top:-10%;bottom:-10%;width:34vw;max-width:420px;opacity:.9;will-change:transform;background:radial-gradient(60% 40% at 30% 50%,var(--mood-fog),transparent 70%),radial-gradient(50% 30% at 60% 20%,var(--mood-fog),transparent 70%),radial-gradient(50% 35% at 40% 85%,var(--mood-fog),transparent 70%)}
.md-fog.l{left:-14vw;animation:mdfog 38s ease-in-out infinite alternate}.md-fog.r{right:-14vw;animation:mdfog 46s ease-in-out infinite alternate-reverse}
@keyframes mdfog{from{transform:translate3d(-3vw,0,0)}to{transform:translate3d(4vw,-2%,0)}}
.md-deco{position:absolute;width:var(--s,34px);height:var(--s,34px);color:color-mix(in srgb,var(--mood-b) 55%,#000);opacity:.22;will-change:transform;pointer-events:none;z-index:1}
.md-deco svg{width:100%;height:100%;display:block;fill:currentColor}
.md-deco.web{opacity:.14;color:#cfc8e6}
.md-off .md-fog,.md-off .md-deco{animation-play-state:paused}
html[data-mood=spooky] .e-pills .pill,html[data-mood=spooky] .e-kicker{animation:mdflick 9s steps(1) infinite}
@keyframes mdflick{0%,61%,63%,65%,100%{opacity:1}62%{opacity:.78}64%{opacity:.9}}
.md-strip .pill.md-tag{background:color-mix(in srgb,var(--mood-b) 20%,transparent);border:1px solid color-mix(in srgb,var(--mood-a) 45%,transparent);color:var(--fg);text-transform:none}
.md-strip .more-h h2::after{content:"";display:inline-block;width:.5em;height:.5em;margin-left:.35em;border-radius:50%;background:var(--mood-a);box-shadow:0 0 12px var(--mood-a);vertical-align:.12em}
@media (prefers-reduced-motion:reduce){.md-bokehs{display:none}.md-fog,.md-deco,html[data-mood] .e-pills .pill,html[data-mood] .e-kicker{animation:none!important}.md-deco{transform:none!important}}