feat: compose page + Framer Motion animations + reduced-motion support

lib/motion.ts

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import type { Variants } from 'framer-motion';
 
 // EaseOutExpo — smooth editorial deceleration
@@ -19,3 +20,23 @@ export const staggerContainer: Variants = {
 };
 
 export const viewportOnce = { once: true, amount: 0.3 } as const;
+
+// Hook: returns true if user prefers reduced motion. Components use this to
+// disable Framer Motion animations (per spec, a11y requirement).
+export function usePrefersReducedMotion() {
+  const [reduced, setReduced] = useState(false);
+  useEffect(() => {
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
+    setReduced(mq.matches);
+    const handler = () => setReduced(mq.matches);
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }, []);
+  return reduced;
+}
+
+// Pass to <motion.*> as motion-reduced guard. When reduced, variants resolve to visible immediately.
+export const motionProps = (reduced: boolean) =>
+  reduced
+    ? { initial: 'visible' as const, animate: 'visible' as const, whileInView: undefined, viewport: undefined }
+    : {};