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/components/layout/PreferencesModal.tsx

@@ -3,6 +3,7 @@
 import { useTheme } from "~/hooks/useTheme.js";
 import type { AccentColor, ThemeMode } from "~/hooks/useTheme.js";
 import { useAppPreferences, type HeatmapColorScheme } from "~/hooks/useAppPreferences.js";
+import { motion } from "framer-motion";
 import { clsx } from "clsx";
 
 interface PreferencesModalProps {
@@ -27,7 +28,12 @@ export function PreferencesModal({ onClose }: PreferencesModalProps) {
       className="fixed inset-0 bg-black/50 z-50 flex items-end sm:items-center justify-center p-4"
       onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
     >
-      <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl w-full max-w-sm">
+      <motion.div
+        initial={{ opacity: 0, scale: 0.95, y: 8 }}
+        animate={{ opacity: 1, scale: 1, y: 0 }}
+        transition={{ duration: 0.2, ease: "easeOut" }}
+        className="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl w-full max-w-sm"
+      >
         {/* Header */}
         <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
           <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100">Preferences</h2>
@@ -307,7 +313,7 @@ export function PreferencesModal({ onClose }: PreferencesModalProps) {
             Changes apply instantly and are saved in your browser.
           </p>
         </div>
-      </div>
+      </motion.div>
     </div>
   );
 }