Animated Theme Toggle

Create an animated theme toggle. A sun/moon button where switching themes doesn't flip colors instantly: the new theme washes across the page as a growing circle that starts at the toggle itself. Implementation (View Transitions API, the modern way): wrap the theme change in document.startViewTransition(); then animate ::view-transition-new(root) with a clip-path circle keyframe from circle(0 at Xpx Ypx) (the toggle's center) to a circle whose radius covers the farthest viewport corner (Math.hypot of the distances), ~600ms cubic-bezier(0.22, 1, 0.36, 1). Fallback for browsers without the API: an overlay div painted in the new theme's background, expanded with the same clip-path animation, then swap the real theme class and remove the overlay. The icon swaps sun to moon with a small rotation (350ms). Persist the choice to localStorage and respect prefers-color-scheme as the default. Accessibility: role='switch' with aria-checked and an aria-label like 'Toggle dark mode'. Under prefers-reduced-motion, switch themes instantly with no wash. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.