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/page-transition.tsx

@@ -0,0 +1,29 @@
+import { ViewTransition } from "react";
+
+const directionalEnterClasses = {
+  "nav-forward": "nav-forward",
+  "nav-back": "nav-back",
+  "nav-lateral": "fade-in",
+  default: "none",
+} as const;
+
+const directionalExitClasses = {
+  "nav-forward": "nav-forward",
+  "nav-back": "nav-back",
+  "nav-lateral": "fade-out",
+  default: "none",
+} as const;
+
+const DirectionalTransition = ({ children }: { children: React.ReactNode }) => (
+  <ViewTransition enter={directionalEnterClasses} exit={directionalExitClasses} default="none">
+    {children}
+  </ViewTransition>
+);
+
+const FadeTransition = ({ children }: { children: React.ReactNode }) => (
+  <ViewTransition enter="fade-in" exit="fade-out" default="none">
+    {children}
+  </ViewTransition>
+);
+
+export { DirectionalTransition, FadeTransition };