refactor: overhaul view transitions with granular per-page animation components

- Replace single `<ViewTransition>` wrapper in layout with `FadeTransition` and `DirectionalTransition` components applied per page
- Add `components/page-transition.tsx` with reusable transition wrappers
- Expand view transition CSS with named classes: fade, slide, nav-forward/back, morph, text-morph, scale — all driven by CSS custom property durations
- Use React `<ViewTransition name=... share="text-morph">` for shared note title element between list and detail views
- Wrap comments suspense boundary with enter/exit slide transitions
- Add `persistent-nav` and `persistent-footer` view-transition-name groups to keep chrome static during navigation
- Fix reduced-motion override to target delay and duration instead of `animation: none`
- Add tracking-tight and letter-spacing tweaks to home page typography

components/post-stats.tsx

@@ -58,8 +58,8 @@ const PostStats = ({ slug }: { slug: string }) => {
   if (!loaded) {
     return (
       <>
-        <Skeleton className="inline-block h-5 w-12 rounded-full align-text-top" />
-        <Skeleton className="inline-block h-5 w-8 rounded-full align-text-top" />
+        <Skeleton className="inline-block h-5 w-16 translate-y-[-2px] rounded-4xl border border-transparent align-middle" />
+        <Skeleton className="inline-block h-5 w-12 translate-y-[-2px] rounded-4xl border border-transparent align-middle" />
       </>
     );
   }
@@ -70,7 +70,10 @@ const PostStats = ({ slug }: { slug: string }) => {
   return (
     <>
       {viewCount > 0 && (
-        <Badge variant="secondary" className="text-foreground/80 gap-[5px] tabular-nums">
+        <Badge
+          variant="secondary"
+          className="text-foreground/80 gap-[5px] text-[11px] tabular-nums"
+        >
           <EyeIcon className="text-foreground/65" aria-hidden="true" />
           {numberFormatter.format(viewCount)}
         </Badge>
@@ -79,7 +82,7 @@ const PostStats = ({ slug }: { slug: string }) => {
       {commentCount > 0 && (
         <Badge
           variant="secondary"
-          className="text-foreground/80 gap-[5px] tabular-nums"
+          className="text-foreground/80 gap-[5px] text-[11px] tabular-nums"
           render={
             <Link
               href={`/${slug}#comments`}