feat: Sprint 1 — Alive Enterprise animation foundation

Animation primitives (6 new components):
- AnimatedNumber: count-up with easeOutExpo, de-DE locale formatting
- ShimmerSkeleton: diagonal gradient sweep replacing animate-pulse
- FadeIn: framer-motion viewport-triggered fade + slide
- StaggerList/StaggerItem: staggered children entrance
- Sparkline: pure SVG inline trend chart with draw-in animation
- ProgressRing: animated circular progress with CSS transitions

Sidebar & page transitions:
- Sliding nav indicator (framer-motion layoutId animation)
- Icon frame hover glow (brand-color shadow)
- Smooth section collapse/expand (AnimatePresence height animation)
- PageTransition wrapper (fade-up on route change)
- AnimatedModal component (scale + fade with custom bezier)
- Notification badge bounce on count increase

Dashboard animations:
- StatCards: AnimatedNumber count-up + staggered FadeIn + budget color tinting
- WidgetContainer: fade-slide-up on mount
- Chargeability: animated percentages + inline utilization bars
- ProjectTable/MyProjects: animated numbers + staggered row entrance

Shimmer skeletons & table animations:
- Replaced animate-pulse across 20+ loading states with shimmer gradient
- Staggered row entrance (fadeSlideIn) on Resources, Projects, Allocations tables
- hover-lift utility class for subtle card/row elevation on hover
- Content-shaped skeletons (avatars, text bars, badges)

Light mode surface depth:
- Mesh gradient page background (subtle accent-tinted corners)
- Enhanced card shadows (two-layer depth)
- Sidebar glassmorphism upgrade (bg-white/60, backdrop-blur-2xl, saturate-150)
- Toolbar sticky backdrop blur
- Enhanced focus ring with brand-color glow

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

apps/web/src/app/(app)/timeline/loading.tsx

@@ -1,49 +1,49 @@
 export default function TimelineLoading() {
   return (
-    <div className="flex flex-col h-full gap-0 animate-pulse">
+    <div className="flex flex-col h-full gap-0">
       {/* Toolbar */}
       <div className="flex items-center gap-2 px-4 py-3 border-b border-gray-200 dark:border-gray-700">
-        <div className="h-8 w-24 bg-gray-200 dark:bg-gray-700 rounded-lg" />
-        <div className="h-8 w-24 bg-gray-200 dark:bg-gray-700 rounded-lg" />
+        <div className="h-8 w-24 shimmer-skeleton rounded-lg" />
+        <div className="h-8 w-24 shimmer-skeleton rounded-lg" />
         <div className="flex-1" />
-        <div className="h-8 w-8 bg-gray-100 dark:bg-gray-800 rounded-lg" />
-        <div className="h-8 w-8 bg-gray-100 dark:bg-gray-800 rounded-lg" />
-        <div className="h-8 w-20 bg-gray-100 dark:bg-gray-800 rounded-lg" />
+        <div className="h-8 w-8 shimmer-skeleton rounded-lg" />
+        <div className="h-8 w-8 shimmer-skeleton rounded-lg" />
+        <div className="h-8 w-20 shimmer-skeleton rounded-lg" />
       </div>
 
       {/* Date header */}
       <div className="flex border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
         <div className="w-48 flex-shrink-0 px-4 py-2">
-          <div className="h-3 w-20 bg-gray-200 dark:bg-gray-700 rounded" />
+          <div className="h-3 w-20 shimmer-skeleton rounded" />
         </div>
         <div className="flex-1 flex gap-px py-2 px-2">
           {[...Array(20)].map((_, i) => (
-            <div key={i} className="flex-1 h-3 bg-gray-200 dark:bg-gray-700 rounded" />
+            <div key={i} className="flex-1 h-3 shimmer-skeleton rounded" />
           ))}
         </div>
       </div>
 
       {/* Resource rows */}
       {[...Array(8)].map((_, i) => (
-        <div key={i} className="flex border-b border-gray-100 dark:border-gray-800 py-3">
+        <div key={i} className="flex border-b border-gray-100 dark:border-gray-800 py-3 animate-row-enter" style={{ animationDelay: `${i * 50}ms` }}>
           {/* Resource name cell */}
           <div className="w-48 flex-shrink-0 px-4 flex flex-col gap-1.5">
-            <div className="h-3 w-24 bg-gray-200 dark:bg-gray-700 rounded" />
-            <div className="h-2 w-12 bg-gray-100 dark:bg-gray-800 rounded" />
+            <div className="h-3 w-24 shimmer-skeleton rounded" />
+            <div className="h-2 w-12 shimmer-skeleton rounded" />
           </div>
           {/* Allocation bars */}
           <div className="flex-1 relative px-2 flex items-center gap-1">
             {i % 3 === 0 && (
-              <div className="h-7 rounded-lg bg-brand-100 dark:bg-brand-900/30" style={{ width: "35%", marginLeft: "10%" }} />
+              <div className="h-7 rounded-lg shimmer-skeleton" style={{ width: "35%", marginLeft: "10%" }} />
             )}
             {i % 3 === 1 && (
               <>
-                <div className="h-7 rounded-lg bg-purple-100 dark:bg-purple-900/30" style={{ width: "20%", marginLeft: "5%" }} />
-                <div className="h-7 rounded-lg bg-blue-100 dark:bg-blue-900/30" style={{ width: "30%", marginLeft: "2%" }} />
+                <div className="h-7 rounded-lg shimmer-skeleton" style={{ width: "20%", marginLeft: "5%" }} />
+                <div className="h-7 rounded-lg shimmer-skeleton" style={{ width: "30%", marginLeft: "2%" }} />
               </>
             )}
             {i % 3 === 2 && (
-              <div className="h-7 rounded-lg bg-green-100 dark:bg-green-900/30" style={{ width: "45%", marginLeft: "20%" }} />
+              <div className="h-7 rounded-lg shimmer-skeleton" style={{ width: "45%", marginLeft: "20%" }} />
             )}
           </div>
         </div>