feat: Sprint 3 — delight, polish, and responsive sidebar

Celebration micro-interactions:
- SuccessToast: auto-dismissing pill toast (success/info/warning variants)
- ConfettiBurst: pure CSS 20-particle confetti on project creation
- Project wizard: confetti + toast on successful creation
- Vacation approval/rejection: contextual toasts
- Allocation status change: success toast
- Button: active:scale-[0.97] press feedback on all variants

Collapsible sidebar + responsive:
- Desktop: toggle collapse (72px icons-only mode) with localStorage persistence
- NavTooltip: hover labels on collapsed icons
- Mobile: hamburger menu + slide-in overlay with backdrop
- Auto-close sidebar on mobile navigation
- Scroll-to-top on route change (smooth behavior)

Hover polish + accessibility:
- Table rows: animated left-border accent + hover-lift
- Stat cards + widgets: hover elevation + border glow
- Timeline blocks: scale(1.02) + shadow-md on hover
- Smooth scroll globally with prefers-reduced-motion fallback
- Filter chips: framer-motion scale+fade enter/exit
- Dropdowns: scaleY origin-top reveal animation
- Preferences modal: scale+fade entrance
- Link underline: animated ::after width expansion on hover

Co-Authored-By: claude-flow <ruv@ruv.net>

apps/web/src/app/(app)/projects/ProjectsClient.tsx

@@ -7,6 +7,7 @@ import type { Project, ColumnDef } from "@planarchy/shared";
 import { ProjectStatus, PROJECT_COLUMNS, BlueprintTarget } from "@planarchy/shared";
 import Link from "next/link";
 import { clsx } from "clsx";
+import { motion } from "framer-motion";
 import { trpc } from "~/lib/trpc/client.js";
 import { ProjectModal } from "~/components/projects/ProjectModal.js";
 import { ProjectWizard } from "~/components/projects/ProjectWizard.js";
@@ -116,9 +117,12 @@ function StatusDropdown({ project, isOpen, onOpen, onClose }: { project: Project
         </svg>
       </button>
       {isOpen && createPortal(
-        <div
+        <motion.div
           ref={panelRef}
-          className="fixed z-[9999] min-w-[160px] rounded-2xl border border-gray-200 bg-white p-2 shadow-xl dark:border-gray-700 dark:bg-gray-900"
+          initial={{ opacity: 0, scaleY: 0.9 }}
+          animate={{ opacity: 1, scaleY: 1 }}
+          transition={{ duration: 0.12, ease: "easeOut" }}
+          className="fixed z-[9999] min-w-[160px] rounded-2xl border border-gray-200 bg-white p-2 shadow-xl dark:border-gray-700 dark:bg-gray-900 origin-top"
           style={{ top: pos.top, left: pos.left }}
         >
           {ALL_STATUSES.map((s) => (
@@ -139,7 +143,7 @@ function StatusDropdown({ project, isOpen, onOpen, onClose }: { project: Project
               </span>
             </button>
           ))}
-        </div>,
+        </motion.div>,
         document.body,
       )}
     </>
@@ -575,7 +579,7 @@ export function ProjectsClient() {
                         id={project.id}
                         dragRef={rowDragRef}
                         onDrop={(draggedId) => reorder(draggedId, project.id)}
-                        className={`transition-colors hover:bg-gray-50/80 dark:hover:bg-gray-900/60 animate-row-enter ${isSelected ? "bg-brand-50 dark:bg-brand-900/20" : ""}`}
+                        className={`table-row-hover hover-lift hover:bg-gray-50/80 dark:hover:bg-gray-900/60 animate-row-enter ${isSelected ? "bg-brand-50 dark:bg-brand-900/20" : ""}`}
                         style={{ animationDelay: `${Math.min(index * 15, 300)}ms` }}
                       >
                         <td className="px-2 py-3 w-8">
@@ -602,11 +606,11 @@ export function ProjectsClient() {
                             <button
                               type="button"
                               onClick={() => openEditModal(project as unknown as Project)}
-                              className="text-xs font-medium text-gray-600 transition-colors hover:text-gray-900 hover:underline dark:text-gray-300 dark:hover:text-gray-100"
+                              className="link-hover-underline text-xs font-medium text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100"
                             >
                               Edit
                             </button>
-                            <Link href={`/projects/${project.id}`} className="text-xs font-medium text-blue-600 hover:text-blue-800 hover:underline dark:text-blue-300 dark:hover:text-blue-200">
+                            <Link href={`/projects/${project.id}`} className="link-hover-underline text-xs font-medium text-blue-600 hover:text-blue-800 dark:text-blue-300 dark:hover:text-blue-200">
                               View →
                             </Link>
                           </div>