fix: react to prefers-reduced-motion changes in Video

The reduced-motion check ran once on mount, so toggling the OS setting
while the page was open either kept videos auto-playing or left them
permanently inert. Listen for MediaQueryList changes: pause and drop
the observer when reduced motion turns on, re-observe when it turns
off.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/components/Video.jsx

@@ -19,20 +19,42 @@ export function Video({ src, label, className, ...props }) {
   useEffect(() => {
     const video = ref.current
     if (!video) return
-    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
 
-    const observer = new IntersectionObserver(
+    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)')
-      ([entry]) => {
+    let observer = null
-        if (entry.isIntersecting) {
+
-          video.play().catch(() => {})
+    const observe = () => {
-        } else {
+      observer = new IntersectionObserver(
-          video.pause()
+        ([entry]) => {
-        }
+          if (entry.isIntersecting) {
-      },
+            video.play().catch(() => {})
-      { threshold: 0.25 }
+          } else {
-    )
+            video.pause()
-    observer.observe(video)
+          }
-    return () => observer.disconnect()
+        },
+        { threshold: 0.25 }
+      )
+      observer.observe(video)
+    }
+
+    // React to the OS setting changing while the page is open.
+    const handleMotionChange = () => {
+      if (reducedMotion.matches) {
+        observer?.disconnect()
+        observer = null
+        video.pause()
+      } else if (!observer) {
+        observe()
+      }
+    }
+
+    if (!reducedMotion.matches) observe()
+    reducedMotion.addEventListener('change', handleMotionChange)
+
+    return () => {
+      reducedMotion.removeEventListener('change', handleMotionChange)
+      observer?.disconnect()
+    }
   }, [])
 
   return (