feat: polish motion with stronger easing, press feedback and reduced motion (#73)

- Override Tailwind ease-out/ease-in-out with stronger curves, add ease-drawer
- hoverOnlyWhenSupported so hover styles never stick on touch devices
- Replace transition-all with explicit properties across the public UI
- Press feedback via active:scale-[0.97] instead of hover:scale-105
- Global prefers-reduced-motion handling (CSS + MotionConfig reducedMotion="user")
- Mobile menu is a real drawer: stays mounted, inert when closed, Escape closes
- Progress and music bars animate scaleX/scaleY instead of width/height
- Fix undefined animate-spin-slow, contain hero CTA shine with overflow-hidden

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

app/components/ScrollFadeIn.tsx

@@ -18,9 +18,11 @@ export default function ScrollFadeIn({ children, className = "", delay = 0 }: Sc
   const ref = useRef<HTMLDivElement>(null);
   const [isVisible, setIsVisible] = useState(false);
   const [hasMounted, setHasMounted] = useState(false);
+  const [reduceMotion, setReduceMotion] = useState(false);
 
   useEffect(() => {
     setHasMounted(true);
+    setReduceMotion(window.matchMedia("(prefers-reduced-motion: reduce)").matches);
     const el = ref.current;
     if (!el) return;
 
@@ -37,7 +39,8 @@ export default function ScrollFadeIn({ children, className = "", delay = 0 }: Sc
           observer.unobserve(el);
         }
       },
-      { threshold: 0.1 }
+      // Start a little before the section is fully in view so it never feels late
+      { threshold: 0.1, rootMargin: "0px 0px -60px 0px" }
     );
 
     observer.observe(el);
@@ -50,8 +53,8 @@ export default function ScrollFadeIn({ children, className = "", delay = 0 }: Sc
       className={className}
       style={hasMounted ? {
         opacity: isVisible ? 1 : 0,
-        transform: isVisible ? "translateY(0)" : "translateY(30px)",
-        transition: `opacity 0.6s ease ${delay}s, transform 0.6s ease ${delay}s`,
+        transform: isVisible || reduceMotion ? "translateY(0)" : "translateY(16px)",
+        transition: `opacity 0.6s var(--ease-out) ${delay}s, transform 0.6s var(--ease-out) ${delay}s`,
       } : undefined}
     >
       {children}