feat(ui): add smooth mount animation for route transitions

input.css

@@ -44,6 +44,21 @@
     -moz-osx-font-smoothing: grayscale;
   }
 
+  @keyframes page-enter {
+    0% {
+      opacity: 0;
+      transform: translateY(16px) scale(0.995);
+    }
+    100% {
+      opacity: 1;
+      transform: none;
+    }
+  }
+
+  .animate-page-enter {
+    animation: page-enter 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
+  }
+
   /* Minimalist custom scrollbars */
   * {
     scrollbar-width: thin;

src/components/frontend_layout.rs

@@ -59,8 +59,12 @@ pub fn FrontendLayout() -> Element {
                     ThemeToggle {}
                 },
             }
-            main { class: "flex-1 w-full max-w-4xl mx-auto px-6 py-6 md:py-12",
+            main { class: "flex-1 w-full max-w-4xl mx-auto px-6 py-6 md:py-12 overflow-hidden",
-                SuspenseBoundary { fallback: move |_| route_skeleton(&route), Outlet::<Route> {} }
+                div {
+                    key: "{route}",
+                    class: "animate-page-enter",
+                    SuspenseBoundary { fallback: move |_| route_skeleton(&route), Outlet::<Route> {} }
+                }
             }
             Footer {}
         }