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/components/notifications/NotificationBell.tsx

@@ -5,6 +5,7 @@ import { createPortal } from "react-dom";
 import { useSession } from "next-auth/react";
 import Link from "next/link";
 import type { Route } from "next";
+import { motion, useAnimationControls } from "framer-motion";
 import { trpc } from "~/lib/trpc/client.js";
 
 function relativeTime(date: Date): string {
@@ -34,6 +35,9 @@ export function NotificationBell() {
   const { data: session, status } = useSession();
   const isAuthenticated = status === "authenticated" && !!session?.user?.email;
 
+  const badgeControls = useAnimationControls();
+  const prevUnreadRef = useRef<number | null>(null);
+
   const utils = trpc.useUtils();
 
   const { data: unreadCount = 0 } = trpc.notification.unreadCount.useQuery(undefined, {
@@ -48,6 +52,17 @@ export function NotificationBell() {
     retry: false,
   });
 
+  // Bounce badge when unread count increases
+  useEffect(() => {
+    if (prevUnreadRef.current !== null && unreadCount > prevUnreadRef.current) {
+      void badgeControls.start({
+        scale: [1, 1.3, 1],
+        transition: { duration: 0.3, ease: "easeInOut" },
+      });
+    }
+    prevUnreadRef.current = unreadCount;
+  }, [unreadCount, badgeControls]);
+
   const openTaskCount = (taskCounts?.open ?? 0) + (taskCounts?.inProgress ?? 0);
 
   const { data: notifications = [] } = trpc.notification.list.useQuery(
@@ -160,9 +175,12 @@ export function NotificationBell() {
         </svg>
         {/* Unread notification badge (red) */}
         {unreadCount > 0 && (
-          <span className="absolute top-0.5 right-0.5 flex items-center justify-center min-w-[16px] h-4 px-1 text-[10px] font-bold text-white bg-red-500 rounded-full leading-none">
+          <motion.span
+            animate={badgeControls}
+            className="absolute top-0.5 right-0.5 flex items-center justify-center min-w-[16px] h-4 px-1 text-[10px] font-bold text-white bg-red-500 rounded-full leading-none"
+          >
             {unreadCount > 99 ? "99+" : unreadCount}
-          </span>
+          </motion.span>
         )}
         {/* Task count badge (orange) */}
         {openTaskCount > 0 && (