fix card click delay when reduced motion is active

src/components/card-detail/CardDetailModal.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from "react";
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
 import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
 import { X } from "lucide-react";
 import { useBoardStore } from "@/stores/board-store";
@@ -25,6 +25,8 @@ export function CardDetailModal({ cardId, onClose }: CardDetailModalProps) {
   const updateCard = useBoardStore((s) => s.updateCard);
 
   const open = cardId != null && card != null;
+  const prefersReducedMotion = useReducedMotion();
+  const instant = { duration: 0 };
 
   return (
     <AnimatePresence>
@@ -36,7 +38,7 @@ export function CardDetailModal({ cardId, onClose }: CardDetailModalProps) {
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
-            transition={{ duration: 0.2 }}
+            transition={prefersReducedMotion ? instant : { duration: 0.2 }}
             onClick={onClose}
           />
 
@@ -46,9 +48,12 @@ export function CardDetailModal({ cardId, onClose }: CardDetailModalProps) {
             onClick={onClose}
           >
             <motion.div
-              layoutId={`card-${cardId}`}
+              layoutId={prefersReducedMotion ? undefined : `card-${cardId}`}
               className="relative w-full max-w-4xl overflow-hidden rounded-xl bg-pylon-surface shadow-2xl"
-              transition={springs.gentle}
+              initial={prefersReducedMotion ? { opacity: 0 } : undefined}
+              animate={prefersReducedMotion ? { opacity: 1 } : undefined}
+              exit={prefersReducedMotion ? { opacity: 0 } : undefined}
+              transition={prefersReducedMotion ? instant : springs.gentle}
               onClick={(e) => e.stopPropagation()}
             >
               <EscapeHandler onClose={onClose} />