feat: smooth view transitions, no skeleton flash

User pain point: skeleton loading.tsx files made the app feel like
a sequence of page reloads, exposing backend latency. Replaced with
a single 1px shimmer bar + crossfade via React's <ViewTransition>.

Changes:
- Enable experimental.viewTransition in next.config.ts
- Add SmoothViewTransition wrapper (ViewTransition name=page-content)
- Add LoadingFade component: thin animated bar instead of skeleton
- Add RouteAnnouncer for a11y (screen readers + focus reset)
- Add ::view-transition-old/new CSS for the crossfade (220ms, no
  jarring slide, respects prefers-reduced-motion)
- Wrap admin/tuxedo/IRD layout children in SmoothViewTransition
  (sidebar/header/footer stay mounted; only the body fades)
- Replace 19 skeleton loading.tsx files with the fade component

Result: navigation now feels like a single app, not a series of
preload-and-render events. The user never sees a 'skeleton of the
page they're about to load.'

src/app/water/loading.tsx

@@ -1,17 +1,6 @@
+import { LoadingFade } from "@/components/transitions/LoadingFade";
+
+/** Subtle navigation indicator — see LoadingFade for rationale. */
 export default function Loading() {
-  return (
-    <main className="min-h-screen bg-slate-100 px-4 py-6">
-      <div className="mx-auto max-w-lg">
-        <div className="animate-pulse space-y-5">
-          <div className="h-16 rounded-xl bg-slate-800" />
-          <div className="h-8 w-48 rounded bg-slate-300" />
-          <div className="h-12 w-full rounded-xl bg-white" />
-          <div className="h-12 w-full rounded-xl bg-white" />
-          <div className="h-12 w-full rounded-xl bg-white" />
-          <div className="h-12 w-full rounded-xl bg-white" />
-          <div className="h-10 w-full rounded-xl bg-slate-300" />
-        </div>
-      </div>
-    </main>
-  );
-}
+  return <LoadingFade />;
+}