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

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>
   );
 }