Add breadcrumb and transitions

Introduce breadcrumb navigation component and integrate into detail pages with hover previews; add PageTransition to App for smooth navigations and loading animations.

src/App.tsx

@@ -24,6 +24,7 @@ import { ResilienceProvider } from "@/components/layout/ResilienceProvider";
 import { useAdminRoutePreload } from "@/hooks/useAdminRoutePreload";
 import { useVersionCheck } from "@/hooks/useVersionCheck";
 import { cn } from "@/lib/utils";
+import { PageTransition } from "@/components/layout/PageTransition";
 
 // Core routes (eager-loaded for best UX)
 import Index from "./pages/Index";
@@ -164,8 +165,9 @@ function AppContent(): React.JSX.Element {
           <div className="min-h-screen flex flex-col">
             <div className="flex-1">
               <Suspense fallback={<PageLoader />}>
-                <RouteErrorBoundary>
-                  <Routes>
+                <PageTransition>
+                  <RouteErrorBoundary>
+                    <Routes>
                   {/* Core routes - eager loaded */}
                   <Route path="/" element={<Index />} />
                   <Route path="/parks" element={<Parks />} />
@@ -443,7 +445,8 @@ function AppContent(): React.JSX.Element {
                   <Route path="*" element={<NotFound />} />
                 </Routes>
               </RouteErrorBoundary>
-            </Suspense>
+            </PageTransition>
+          </Suspense>
           </div>
           <Footer />
         </div>