refactor(motion): extraer useEnVista, compartido por las ilustraciones

lib/motion.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import type { Variants } from 'framer-motion';
 
 // EaseOutExpo — smooth editorial deceleration
@@ -30,6 +30,34 @@ export function usePrefersReducedMotion() {
   return reduced;
 }
 
+// Shared "draw once when scrolled into view" wiring for the SVG illustrations.
+// Returns the ref to attach, whether the element has been seen, and the
+// reduced-motion flag the caller needs anyway to pick its render branch.
+// Observes nothing under reduced motion — those branches render statically.
+export function useEnVista(umbral = 0.4) {
+  const reduced = usePrefersReducedMotion();
+  const ref = useRef<SVGSVGElement>(null);
+  const [enVista, setEnVista] = useState(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || reduced) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setEnVista(true);
+          observer.unobserve(el);
+        }
+      },
+      { threshold: umbral },
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [reduced, umbral]);
+
+  return { ref, enVista, reduced };
+}
+
 // Pass to <motion.*> as motion-reduced guard. When reduced, variants resolve to visible immediately.
 export const motionProps = (reduced: boolean) =>
   reduced