Add hero name fill animation

SVG text background of "Jonathan" in outline that slowly fills in on
page load. Uses CSS fill-opacity animation (0 → 1 over 2s, 0.3s delay)
so the stroke appears immediately and the fill bleeds in gradually.

Light mode: zinc-200/300. Dark mode: zinc-800. Both stay recessive so
the effect is atmospheric, not distracting.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/globals.css

@@ -9,3 +9,20 @@
 body {
   font-family: var(--font-sans);
 }
+
+@keyframes name-fill-in {
+  from { fill-opacity: 0; }
+  to   { fill-opacity: 1; }
+}
+
+.name-outline-fill {
+  fill: #e4e4e7;           /* zinc-200 */
+  stroke: #d4d4d8;         /* zinc-300 */
+  fill-opacity: 0;
+  animation: name-fill-in 2s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
+}
+
+.dark .name-outline-fill {
+  fill: #27272a;            /* zinc-800 */
+  stroke: #27272a;          /* zinc-800 */
+}