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/globals.css

@@ -90,7 +90,7 @@
 /* ─── Light Theme Surface Variables ─────────────────────────────────────── */
 
 :root {
-  --surface-page: 244 246 250;
+  --surface-page: 246 247 251;
   --surface-card: 255 255 255;
   --surface-elevated: 249 250 252;
   --surface-input: 255 255 255;
@@ -132,6 +132,8 @@
       background-color 0.15s ease,
       color 0.15s ease;
     background-image:
+      radial-gradient(ellipse at 0% 0%, rgb(var(--accent-50) / 0.15), transparent 50%),
+      radial-gradient(ellipse at 100% 100%, rgb(var(--accent-100) / 0.08), transparent 50%),
       radial-gradient(circle at top left, rgb(var(--accent-100) / 0.32), transparent 24rem),
       linear-gradient(180deg, rgb(255 255 255 / 0.72), transparent 24rem);
     text-rendering: optimizeLegibility;
@@ -168,13 +170,20 @@
     font: inherit;
   }
 
-  input:focus-visible,
-  select:focus-visible,
-  textarea:focus-visible,
-  button:focus-visible,
-  a:focus-visible {
+  :focus-visible {
     outline: 2px solid rgb(var(--accent-500));
     outline-offset: 2px;
+    border-radius: inherit;
+  }
+
+  button:focus-visible,
+  a:focus-visible,
+  input:focus-visible,
+  select:focus-visible,
+  textarea:focus-visible {
+    outline: 2px solid rgb(var(--accent-500));
+    outline-offset: 2px;
+    box-shadow: 0 0 0 3px rgb(var(--accent-500) / 0.12);
   }
 
   /* Scrollbar styling for dark mode */
@@ -345,16 +354,28 @@
 
 @layer components {
   .app-surface {
-    @apply rounded-2xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900/90;
+    @apply rounded-2xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900/90;
+    --tw-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
+
+  :is(.dark) .app-surface {
+    --tw-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
   }
 
   .app-surface-strong {
-    @apply rounded-3xl border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900;
+    @apply rounded-3xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900;
+    --tw-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
+
+  :is(.dark) .app-surface-strong {
+    --tw-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.2);
   }
 
   .app-toolbar {
-    @apply rounded-2xl border border-gray-200 bg-white/90 p-4 shadow-sm backdrop-blur;
-    @apply dark:border-gray-700 dark:bg-gray-900/90 dark:shadow-black/20;
+    @apply sticky top-0 z-10 rounded-2xl border border-gray-200 bg-white/80 p-4 shadow-sm backdrop-blur-sm;
+    @apply dark:border-gray-700 dark:bg-gray-900/80 dark:shadow-black/20;
   }
 
   .app-input {
@@ -443,3 +464,49 @@
 .animate-overbooking-blink {
   animation: overbooking-blink 2s ease-in-out infinite;
 }
+
+/* ─── Shimmer skeleton animation ─────────────────────────────────────────── */
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+.shimmer-skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--surface-card) 25%,
+    color-mix(in srgb, var(--text-very-muted) 8%, var(--surface-card)) 50%,
+    var(--surface-card) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.8s ease-in-out infinite;
+}
+
+/* ─── Table row stagger entrance ─────────────────────────────────────────── */
+@keyframes fadeSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-row-enter {
+  animation: fadeSlideIn 0.25s ease-out both;
+}
+
+/* ─── Subtle hover lift for cards and table rows ─────────────────────────── */
+.hover-lift {
+  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
+}
+.hover-lift:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
+}
+
+:is(.dark) .hover-lift:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+}