feat: add Framer Motion animations with spring physics and reduced-motion support

src/components/board/CardThumbnail.tsx

@@ -1,4 +1,5 @@
 import { format, isPast, isToday } from "date-fns";
+import { motion, useReducedMotion } from "framer-motion";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import type { Card, Label } from "@/types/board";
@@ -13,6 +14,8 @@ interface CardThumbnailProps {
 }
 
 export function CardThumbnail({ card, boardLabels, columnId, onCardClick }: CardThumbnailProps) {
+  const prefersReducedMotion = useReducedMotion();
+
   const {
     attributes,
     listeners,
@@ -40,11 +43,14 @@ export function CardThumbnail({ card, boardLabels, columnId, onCardClick }: Card
   }
 
   return (
-    <button
+    <motion.button
       ref={setNodeRef}
       style={style}
       onClick={handleClick}
       className="w-full rounded-lg bg-pylon-surface p-3 shadow-sm text-left transition-all duration-200 hover:-translate-y-px hover:shadow-md"
+      initial={prefersReducedMotion ? false : { opacity: 0, y: -8 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ type: "spring", stiffness: 300, damping: 25 }}
       {...attributes}
       {...listeners}
     >
@@ -77,6 +83,6 @@ export function CardThumbnail({ card, boardLabels, columnId, onCardClick }: Card
           )}
         </div>
       )}
-    </button>
+    </motion.button>
   );
 }

src/components/board/KanbanColumn.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { Plus } from "lucide-react";
+import { motion, useReducedMotion } from "framer-motion";
 import { useDroppable } from "@dnd-kit/core";
 import {
   SortableContext,
@@ -29,6 +30,7 @@ interface KanbanColumnProps {
 export function KanbanColumn({ column, onCardClick }: KanbanColumnProps) {
   const [showAddCard, setShowAddCard] = useState(false);
   const board = useBoardStore((s) => s.board);
+  const prefersReducedMotion = useReducedMotion();
 
   const width = WIDTH_MAP[column.width];
 
@@ -59,10 +61,13 @@ export function KanbanColumn({ column, onCardClick }: KanbanColumnProps) {
   };
 
   return (
-    <div
+    <motion.div
       ref={setSortableNodeRef}
       style={style}
       className="group/column flex shrink-0 flex-col rounded-lg bg-pylon-column"
+      initial={prefersReducedMotion ? false : { opacity: 0, x: 20 }}
+      animate={{ opacity: 1, x: 0 }}
+      transition={{ type: "spring", stiffness: 300, damping: 25 }}
       {...attributes}
     >
       {/* The column header is the drag handle for column reordering */}
@@ -113,6 +118,6 @@ export function KanbanColumn({ column, onCardClick }: KanbanColumnProps) {
           </Button>
         </div>
       )}
-    </div>
+    </motion.div>
   );
 }