/* October theme. Everything is scoped to html.spooky, so with the class off nothing here applies. */
html.spooky {
  --bg: #150f1f; --deep: #0e0a16; --panel: #1c1428; --raised: #2a1c3a; --line: #44285c;
  --text: #f5ebff; --muted: #b9a3d0;
  --accent: #ff8a1f; --accent-ink: #1a0d00;
  --online: #8dff5a; --danger: #ff7a7a;
  color-scheme: dark;
}
html.spooky a { color: #ffb36b; }
html.spooky body { background: var(--bg); }
html.spooky ::selection { background: #ff8a1f; color: #1a0d00; }

/* wordmark and logo glow like a candle */
html.spooky .brand, html.spooky .auth-brand h1 { text-shadow: 0 0 14px rgba(255, 138, 31, .55); animation: sp-flicker 5s steps(1, end) infinite; }
html.spooky .brand-logo, html.spooky .auth-logo { filter: drop-shadow(0 0 8px rgba(255, 138, 31, .75)); animation: sp-bob 4s ease-in-out infinite; }
html.spooky .auth-brand { background: radial-gradient(120% 90% at 20% 100%, #3b1a05 0%, var(--deep) 60%); }
html.spooky .auth-logo { width: 96px; height: 96px; }
html.spooky .btn.primary, html.spooky .primary { box-shadow: 0 0 14px rgba(255, 138, 31, .35); }
html.spooky .vm.speaking .av, html.spooky .vtile.speaking .av { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--online), 0 0 14px 2px rgba(141, 255, 90, .55); }
html.spooky .msg:hover { background: rgba(255, 138, 31, .05); }

/* the effects layer sits over the page but never takes a click, and stays under dialogs and toasts */
#spooky-fx { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
#spooky-fx img, #spooky-fx div { pointer-events: none; user-select: none; }

.fx-moon { position: absolute; top: 3vh; right: 3vw; width: clamp(44px, 6vw, 84px); opacity: .3; filter: drop-shadow(0 0 22px rgba(255, 220, 150, .75)); animation: sp-moon 6s ease-in-out infinite; }
.fx-web { position: absolute; top: 0; width: clamp(64px, 8vw, 110px); opacity: .38; transform-origin: top left; }
.fx-web.tl { left: 0; }
.fx-web.tr { right: 0; transform: scaleX(-1); }

.fx-fog { position: absolute; left: -20%; width: 140%; height: 26vh; bottom: -6vh; opacity: .22; filter: blur(14px); will-change: transform; }
.fx-fog.a { background: radial-gradient(50% 60% at 30% 70%, #9d6bff 0%, transparent 70%), radial-gradient(40% 50% at 75% 60%, #ff8a1f 0%, transparent 70%); animation: sp-fog 38s linear infinite alternate; }
.fx-fog.b { bottom: -10vh; opacity: .16; background: radial-gradient(50% 60% at 60% 70%, #6fe3a8 0%, transparent 70%); animation: sp-fog 54s linear infinite alternate-reverse; }

.fx-bat { position: absolute; left: 0; top: 0; width: 56px; will-change: transform; }
.fx-bat img { width: 100%; display: block; transform-origin: 50% 50%; animation: sp-flap .32s ease-in-out infinite alternate; }
.fx-bat.b1 { top: 12vh; animation: sp-fly-r 21s linear infinite; animation-delay: 1s; }
.fx-bat.b2 { top: 34vh; width: 40px; animation: sp-fly-l 28s linear infinite; animation-delay: 9s; }
.fx-bat.b3 { top: 6vh; width: 34px; animation: sp-fly-r 34s linear infinite; animation-delay: 17s; }

.fx-ghost { position: absolute; width: 54px; opacity: 0; will-change: transform, opacity; }
.fx-ghost.g1 { left: 14vw; bottom: 8vh; animation: sp-ghost 19s ease-in-out infinite; animation-delay: 3s; }
.fx-ghost.g2 { left: 58vw; bottom: 14vh; width: 40px; animation: sp-ghost 26s ease-in-out infinite; animation-delay: 12s; }
.fx-ghost.g3 { left: 82vw; bottom: 4vh; width: 66px; animation: sp-ghost 31s ease-in-out infinite; animation-delay: 21s; }

.fx-flash { position: absolute; inset: 0; background: #cdb6ff; opacity: 0; animation: sp-flash 47s linear infinite; animation-delay: 15s; }

@keyframes sp-flicker { 0%, 100% { opacity: 1 } 46% { opacity: 1 } 47% { opacity: .78 } 49% { opacity: 1 } 77% { opacity: .85 } 78% { opacity: 1 } }
@keyframes sp-bob { 0%, 100% { transform: translateY(0) rotate(-2deg) } 50% { transform: translateY(-3px) rotate(2deg) } }
@keyframes sp-moon { 0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 220, 150, .4)) } 50% { filter: drop-shadow(0 0 24px rgba(255, 220, 150, .85)) } }
@keyframes sp-flap { from { transform: scaleY(1) } to { transform: scaleY(.45) } }
@keyframes sp-fly-r { 0% { transform: translate(-80px, 0) } 25% { transform: translate(28vw, 40px) } 50% { transform: translate(55vw, -10px) } 75% { transform: translate(80vw, 50px) } 100% { transform: translate(110vw, 10px) } }
@keyframes sp-fly-l { 0% { transform: translate(110vw, 0) scaleX(-1) } 30% { transform: translate(70vw, 60px) scaleX(-1) } 60% { transform: translate(35vw, -20px) scaleX(-1) } 100% { transform: translate(-80px, 30px) scaleX(-1) } }
@keyframes sp-ghost { 0% { opacity: 0; transform: translate(0, 0) } 12% { opacity: .22 } 50% { opacity: .3; transform: translate(40px, -42vh) } 88% { opacity: .12 } 100% { opacity: 0; transform: translate(-30px, -70vh) } }
@keyframes sp-fog { from { transform: translateX(-8%) } to { transform: translateX(8%) } }
@keyframes sp-flash { 0%, 97.5%, 98.6%, 100% { opacity: 0 } 97.8% { opacity: .07 } 98.1% { opacity: 0 } 98.3% { opacity: .05 } }

@media (prefers-reduced-motion: reduce) {
  html.spooky .brand, html.spooky .auth-brand h1, html.spooky .brand-logo, html.spooky .auth-logo,
  #spooky-fx *, #spooky-fx { animation: none !important; }
  .fx-bat, .fx-ghost, .fx-flash { display: none; }
}
@media (max-width: 700px) {
  .fx-bat.b2, .fx-bat.b3, .fx-ghost.g2 { display: none; }
  .fx-web { opacity: .3; }
  .fx-moon { top: 9vh; right: 4vw; }
}