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/layout/menu.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { useSelectedLayoutSegment } from "next/navigation";
+import { usePathname, useSelectedLayoutSegment } from "next/navigation";
 
 import { Button } from "@/components/ui/button";
 
@@ -17,12 +17,19 @@ const menuItems = [
 ] as const;
 
 const Menu = () => {
+  const pathname = usePathname();
   const segment = useSelectedLayoutSegment() || "";
 
   return (
     <nav data-slot="navigation-menu" className="flex items-center gap-2">
       {menuItems.map((item) => {
         const isCurrent = item.href?.split("/")[1] === segment;
+        const transitionTypes =
+          item.href === "/notes" && pathname.startsWith("/notes/")
+            ? ["nav-back"]
+            : pathname === item.href
+              ? undefined
+              : ["nav-lateral"];
 
         return (
           <Button
@@ -33,7 +40,7 @@ const Menu = () => {
             aria-label={item.text}
             data-current={isCurrent || undefined}
             className="data-current:bg-accent/60 data-current:text-accent-foreground text-sm leading-none"
-            render={<Link href={item.href} />}
+            render={<Link href={item.href} transitionTypes={transitionTypes} />}
           >
             {item.text}
           </Button>