fix(landing): sync reduced-motion mid-entrance in HeroStat

HeroStat's staggered count-up entrance only checked prefers-reduced-motion
once on mount, unlike the hero loops in this PR that now listen for the
media query's change event. Toggling the preference mid-entrance left the
scheduled timers/RAF running instead of snapping to the settled value.

Author: waleedlatif1

apps/sim/app/(landing)/components/hero/components/hero-stat/hero-stat.tsx

@@ -53,33 +53,66 @@ export function HeroStat() {
   const [count, setCount] = useState(COUNT_FROM)
 
   useEffect(() => {
-    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+    const media = window.matchMedia('(prefers-reduced-motion: reduce)')
+    let raf = 0
+    let settleTimer: ReturnType<typeof setTimeout>
+    let revealTimer: ReturnType<typeof setTimeout>
+    let fillTimer: ReturnType<typeof setTimeout>
+    let countTimer: ReturnType<typeof setTimeout>
+
+    const clearScheduled = () => {
+      clearTimeout(settleTimer)
+      clearTimeout(revealTimer)
+      clearTimeout(fillTimer)
+      clearTimeout(countTimer)
+      cancelAnimationFrame(raf)
+    }
+
+    const showSettled = () => {
+      clearScheduled()
       setSettled(true)
       setRevealed(true)
       setFilled(true)
       setCount(COUNT_TO)
-      return
     }
-    let raf = 0
-    const settleTimer = setTimeout(() => setSettled(true), SETTLE_AT_MS)
-    const revealTimer = setTimeout(() => setRevealed(true), REVEAL_AT_MS)
-    const fillTimer = setTimeout(() => setFilled(true), FILL_AT_MS)
-    const countTimer = setTimeout(() => {
-      const start = performance.now()
-      const tick = (now: number) => {
-        const t = Math.min((now - start) / COUNT_DUR_MS, 1)
-        const eased = 1 - (1 - t) ** 3
-        setCount(Math.round(COUNT_FROM + (COUNT_TO - COUNT_FROM) * eased))
-        if (t < 1) raf = requestAnimationFrame(tick)
+
+    const runEntrance = () => {
+      setSettled(false)
+      setRevealed(false)
+      setFilled(false)
+      setCount(COUNT_FROM)
+      settleTimer = setTimeout(() => setSettled(true), SETTLE_AT_MS)
+      revealTimer = setTimeout(() => setRevealed(true), REVEAL_AT_MS)
+      fillTimer = setTimeout(() => setFilled(true), FILL_AT_MS)
+      countTimer = setTimeout(() => {
+        const start = performance.now()
+        const tick = (now: number) => {
+          const t = Math.min((now - start) / COUNT_DUR_MS, 1)
+          const eased = 1 - (1 - t) ** 3
+          setCount(Math.round(COUNT_FROM + (COUNT_TO - COUNT_FROM) * eased))
+          if (t < 1) raf = requestAnimationFrame(tick)
+        }
+        raf = requestAnimationFrame(tick)
+      }, REVEAL_AT_MS)
+    }
+
+    // Re-synced on 'change' - not just on mount - so toggling the preference
+    // mid-entrance snaps straight to the settled state instead of leaving the
+    // stagger/count-up to keep running on its own clock.
+    const syncMotionPreference = () => {
+      clearScheduled()
+      if (media.matches) {
+        showSettled()
+        return
       }
-      raf = requestAnimationFrame(tick)
-    }, REVEAL_AT_MS)
+      runEntrance()
+    }
+
+    syncMotionPreference()
+    media.addEventListener('change', syncMotionPreference)
     return () => {
-      clearTimeout(settleTimer)
-      clearTimeout(revealTimer)
-      clearTimeout(fillTimer)
-      clearTimeout(countTimer)
-      cancelAnimationFrame(raf)
+      media.removeEventListener('change', syncMotionPreference)
+      clearScheduled()
     }
   }, [])