/* theme.css: loaded AFTER the page's own <style>. Controls the orbiting ring and the global font. */

/* Global font: theme.js sets --font when a font file is configured; otherwise your current stack is used. */
body, button, input, select, textarea {
  font-family: var(--font, "Anek Malayalam", "Noto Sans Malayalam", "Segoe UI", system-ui, sans-serif);
}

/* Rotating ring that rides on the background circles (built by theme.js) */
.orbit { position: absolute; pointer-events: none; animation: orbitSpin var(--spd, 90s) linear infinite; will-change: transform; }
.orbit svg { width: 100%; height: 100%; display: block; overflow: visible; }
.orbit img { position: absolute; object-fit: contain; user-select: none; -webkit-user-drag: none; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }

/* Don't animate the background that is currently hidden */
body:not(.light) #bgLight .orbit, body.light #bgBlue .orbit { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) { .orbit { animation: none; } }