/* November theme. Everything is scoped to html.harvest, so with the class off nothing here applies. */
html.harvest {
  --bg: #1f1510; --deep: #160e0a; --panel: #2a1c14; --raised: #3a281c; --line: #5c3d28;
  --text: #fdf1e3; --muted: #cdb199;
  --accent: #f0a73a; --accent-ink: #2a1700;
  --online: #9ad66b; --danger: #ff8f7a;
  color-scheme: dark;
}
html.harvest a { color: #f6c273; }
html.harvest body { background: var(--bg); }
html.harvest ::selection { background: #f0a73a; color: #2a1700; }

html.harvest .brand, html.harvest .auth-brand h1 { text-shadow: 0 0 14px rgba(240, 167, 58, .45); }
html.harvest .brand-logo, html.harvest .auth-logo { filter: drop-shadow(0 0 7px rgba(240, 167, 58, .55)); animation: hv-sway 5s ease-in-out infinite; transform-origin: 50% 90%; }
html.harvest .auth-brand { background: radial-gradient(120% 90% at 20% 100%, #4a2410 0%, var(--deep) 62%); }
html.harvest .auth-logo { width: 96px; height: 96px; }
html.harvest .btn.primary, html.harvest .primary { box-shadow: 0 0 14px rgba(240, 167, 58, .28); }
html.harvest .vm.speaking .av, html.harvest .vtile.speaking .av { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--online), 0 0 14px 2px rgba(154, 214, 107, .5); }
html.harvest .msg:hover { background: rgba(240, 167, 58, .05); }

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

.hv-vine { position: absolute; top: 0; width: clamp(70px, 8vw, 120px); opacity: .45; }
.hv-vine.tl { left: 0; }
.hv-vine.tr { right: 0; transform: scaleX(-1); }
.hv-glow { position: absolute; left: -20%; width: 140%; height: 30vh; bottom: -8vh; opacity: .2; filter: blur(16px); background: radial-gradient(50% 60% at 30% 70%, #f0a73a 0%, transparent 70%), radial-gradient(40% 50% at 75% 60%, #c4472b 0%, transparent 70%); animation: hv-glow 40s linear infinite alternate; }

/* leaves drifting down; each has its own lane, size, speed and delay */
.hv-leaf { position: absolute; top: -70px; width: 34px; opacity: .8; will-change: transform; animation: hv-fall 20s linear infinite; }
.hv-leaf img { width: 100%; display: block; animation: hv-spin 6s ease-in-out infinite alternate; }
.hv-leaf.l1 { left: 6vw; animation-duration: 19s; animation-delay: 0s; }
.hv-leaf.l2 { left: 17vw; width: 26px; animation-duration: 26s; animation-delay: 5s; }
.hv-leaf.l3 { left: 29vw; width: 38px; animation-duration: 22s; animation-delay: 11s; }
.hv-leaf.l4 { left: 41vw; width: 24px; animation-duration: 30s; animation-delay: 2s; }
.hv-leaf.l5 { left: 53vw; animation-duration: 21s; animation-delay: 14s; }
.hv-leaf.l6 { left: 64vw; width: 30px; animation-duration: 27s; animation-delay: 7s; }
.hv-leaf.l7 { left: 76vw; width: 40px; animation-duration: 24s; animation-delay: 18s; }
.hv-leaf.l8 { left: 88vw; width: 26px; animation-duration: 29s; animation-delay: 9s; }
.hv-leaf.l9 { left: 95vw; width: 32px; animation-duration: 23s; animation-delay: 21s; }

@keyframes hv-fall {
  0% { transform: translate(0, -80px) rotate(0deg); opacity: 0 }
  6% { opacity: .8 }
  25% { transform: translate(44px, 26vh) rotate(90deg) }
  50% { transform: translate(-30px, 52vh) rotate(200deg) }
  75% { transform: translate(40px, 78vh) rotate(290deg) }
  94% { opacity: .7 }
  100% { transform: translate(-10px, 112vh) rotate(380deg); opacity: 0 }
}
@keyframes hv-spin { from { transform: rotateY(0deg) } to { transform: rotateY(70deg) } }
@keyframes hv-sway { 0%, 100% { transform: rotate(-2deg) } 50% { transform: rotate(2deg) } }
@keyframes hv-glow { from { transform: translateX(-8%) } to { transform: translateX(8%) } }

@media (prefers-reduced-motion: reduce) {
  html.harvest .brand-logo, html.harvest .auth-logo, #harvest-fx *, #harvest-fx { animation: none !important; }
  .hv-leaf { display: none; }
}
@media (max-width: 700px) {
  .hv-leaf.l2, .hv-leaf.l4, .hv-leaf.l6, .hv-leaf.l8 { display: none; }
  .hv-vine { opacity: .35; }
}