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)/resources/ResourcesClient.tsx

@@ -937,7 +937,7 @@ export function ResourcesClient() {
       {/* Table */}
       <div className="app-data-table">
         {isLoading && resources.length === 0 ? (
-          <div className="p-12 text-center text-sm text-gray-500 animate-pulse">
+          <div className="p-12 text-center text-sm text-gray-500 shimmer-skeleton">
             Loading resources…
           </div>
         ) : (
@@ -1097,7 +1097,7 @@ export function ResourcesClient() {
                 </tr>
               </thead>
               <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
-                {displayedResources.map((resource) => {
+                {displayedResources.map((resource, index) => {
                   const skills = resource.skills as unknown as SkillEntry[];
                   const isSelected = selection.selectedIds.has(resource.id);
                   const isDeactivating =
@@ -1114,7 +1114,8 @@ export function ResourcesClient() {
                       id={resource.id}
                       dragRef={rowDragRef}
                       onDrop={(draggedId) => reorder(draggedId, resource.id)}
-                      className={`transition-colors hover:bg-gray-50/80 dark:hover:bg-gray-900/60 ${isSelected ? "bg-brand-50 dark:bg-brand-900/20" : ""}`}
+                      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" : ""}`}
+                      style={{ animationDelay: `${Math.min(index * 15, 300)}ms` }}
                     >
                       <td className="px-4 py-3">
                         <input