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

@@ -8,6 +8,8 @@ import { getSession } from "@/lib/auth";
 import "@/styles/admin-design-system.css";
 import { ToastProvider } from "@/components/admin/Toast";
 import { ToastContainer } from "@/components/admin/ToastContainer";
+import { SmoothViewTransition } from "@/components/transitions/SmoothViewTransition";
+import { RouteAnnouncer } from "@/components/transitions/RouteAnnouncer";
 
 // Admin layout calls getAdminUser() which reads cookies(). Without this,
 // Next.js tries to prerender the entire /admin/* tree statically and the
@@ -105,8 +107,17 @@ export default async function AdminLayout({ children }: { children: React.ReactN
         activeBrandId={activeBrandId}
         brands={brands}
       />
-      <div className="min-h-screen lg:pl-60 admin-section" style={{ backgroundColor: "var(--admin-bg)" }}>
-        {children}
+      {/* The main content area swaps on every navigation. Wrapping
+          it in <SmoothViewTransition> opts the swap into a soft
+          crossfade via the View Transitions API — sidebar and
+          background stay mounted, only the body fades. */}
+      <div
+        id="page-content"
+        className="min-h-screen lg:pl-60 admin-section outline-none"
+        style={{ backgroundColor: "var(--admin-bg)" }}
+      >
+        <SmoothViewTransition>{children}</SmoothViewTransition>
+        <RouteAnnouncer />
       </div>
     </ToastProviderWrapper>
   );