feat: dashboard widget animations — staggered entrance, hover glow, progress bars

- Widgets scale in with staggered delays (60ms per widget, up to 12)
- Widget hover: lift 3px + accent border glow (dark mode: accent shadow)
- Inner numbers animate up with count-up effect
- Progress bars grow from left with spring curve (800ms delay for content-first feel)
- All wrapped in prefers-reduced-motion guard

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/index.css

@@ -669,6 +669,68 @@ html {
   scroll-behavior: smooth;
 }
 
+/* ── Dashboard widget animations ───────────────────────────── */
+
+/* Dashboard widgets: staggered scale-in entrance */
+.grid > div > .card {
+  animation: widgetEnter 450ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+@keyframes widgetEnter {
+  from {
+    opacity: 0;
+    transform: scale(0.94) translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+/* Staggered delays for dashboard widgets */
+.grid > div:nth-child(1) > .card { animation-delay: 0ms; }
+.grid > div:nth-child(2) > .card { animation-delay: 60ms; }
+.grid > div:nth-child(3) > .card { animation-delay: 120ms; }
+.grid > div:nth-child(4) > .card { animation-delay: 180ms; }
+.grid > div:nth-child(5) > .card { animation-delay: 240ms; }
+.grid > div:nth-child(6) > .card { animation-delay: 300ms; }
+.grid > div:nth-child(7) > .card { animation-delay: 360ms; }
+.grid > div:nth-child(8) > .card { animation-delay: 420ms; }
+.grid > div:nth-child(9) > .card { animation-delay: 480ms; }
+.grid > div:nth-child(10) > .card { animation-delay: 540ms; }
+.grid > div:nth-child(11) > .card { animation-delay: 600ms; }
+.grid > div:nth-child(12) > .card { animation-delay: 660ms; }
+.grid > div:nth-child(n+13) > .card { animation-delay: 700ms; }
+
+/* Dashboard widget hover: subtle glow + lift */
+.grid > div > .card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 12px 32px -6px rgba(0, 0, 0, 0.15), 0 4px 12px -2px rgba(0, 0, 0, 0.08);
+  border-color: var(--color-accent);
+  transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+:root.dark .grid > div > .card:hover {
+  box-shadow: 0 12px 32px -6px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--color-accent), 0 0 20px -4px rgba(var(--accent-rgb, 0, 137, 61), 0.15);
+}
+
+/* Widget inner content numbers — count-up effect */
+.card .text-2xl,
+.card .text-3xl,
+.card .text-4xl {
+  animation: countUp 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
+  animation-delay: inherit;
+}
+
+/* Widget progress bars — animated grow from left */
+.card [class*="bg-green"],
+.card [class*="bg-red"],
+.card [class*="bg-amber"],
+.card [class*="bg-blue"],
+.card [class*="bg-status"] {
+  animation: progressGrow 800ms cubic-bezier(0.16, 1, 0.3, 1) both;
+  animation-delay: 400ms;
+}
+
 /* ── Reduced motion: respect user preference ───────────────── */
 
 @media (prefers-reduced-motion: reduce) {