Show the student's own data on the dashboard

apps/web/app/animations.css

@@ -211,6 +211,79 @@
   }
 }
 
+/* Dashboard entrance. Each keyframe sets only its starting point, so a mark
+   animates to whatever size it renders at. Marks hold that first frame until
+   an ancestor gains `data-entered`, which happens once the page has hydrated
+   and painted; otherwise a slow start would run the animations unseen.
+   `--enter-delay` staggers rows. */
+@keyframes enter-grow-up {
+  from {
+    transform: scaleY(0);
+  }
+}
+@keyframes enter-grow-across {
+  from {
+    transform: scaleX(0);
+  }
+}
+@keyframes enter-draw {
+  from {
+    stroke-dasharray: 0 100;
+  }
+}
+@keyframes enter-reveal {
+  from {
+    clip-path: inset(0 100% 0 0);
+  }
+}
+@keyframes enter-pop {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+.enter-grow-up,
+.enter-chart-bars .recharts-bar-rectangle {
+  transform-origin: bottom;
+  animation: enter-grow-up 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+.enter-chart-bars .recharts-bar-rectangle {
+  transform-box: fill-box;
+}
+.enter-grow-across {
+  transform-origin: left;
+  animation: enter-grow-across 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+.enter-draw {
+  animation: enter-draw 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+.enter-chart-line .recharts-surface {
+  animation: enter-reveal 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+.enter-pop {
+  animation: enter-pop 450ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+.enter-grow-up,
+.enter-chart-bars .recharts-bar-rectangle,
+.enter-grow-across,
+.enter-draw,
+.enter-chart-line .recharts-surface,
+.enter-pop {
+  animation-delay: var(--enter-delay, 0ms);
+  animation-play-state: paused;
+}
+[data-entered]
+  :is(
+    .enter-grow-up,
+    .enter-chart-bars .recharts-bar-rectangle,
+    .enter-grow-across,
+    .enter-draw,
+    .enter-chart-line .recharts-surface,
+    .enter-pop
+  ) {
+  animation-play-state: running;
+}
+
 /* One reset disables every animation above for readers who ask for it. */
 @media (prefers-reduced-motion: reduce) {
   *,