slide animation

src/app/routes/__root.tsx

@@ -31,6 +31,7 @@ import { getRootMeta } from "@/lib/i18n/meta";
 import FullScreenLoader from "@/components/full-screen-loader";
 import { CHROME_COLORS } from "@/lib/mantine/theme-colors";
 import mantineCssUrl from '@mantine/core/styles.css?url'
+import appStylesUrl from '../styles.css?url'
 import mantineDatesCssUrl from '@mantine/dates/styles.css?url'
 import mantineCarouselCssUrl from '@mantine/carousel/styles.css?url'
 import mantineTiptapCssUrl from '@mantine/tiptap/styles.css?url'
@@ -101,6 +102,7 @@ export const Route = createRootRouteWithContext<{
         },
         { rel: "manifest", href: "/site.webmanifest" },
         { rel: "icon", href: "/favicon.ico" },
+        { rel: 'stylesheet', href: appStylesUrl },
         { rel: 'stylesheet', href: mantineCssUrl },
         { rel: 'stylesheet', href: mantineCarouselCssUrl },
         { rel: 'stylesheet', href: mantineDatesCssUrl },
@@ -243,7 +245,6 @@ function RootDocument({ children }: { children: React.ReactNode }) {
               'try{var d=document.documentElement,t=localStorage.getItem("flxn-theme");if(t&&t!=="default"){d.setAttribute("data-theme",t);}var s=localStorage.getItem("flxn-theme-scheme");if(s){d.setAttribute("data-mantine-color-scheme",s);}var f=JSON.parse(localStorage.getItem("flxn-theme-fonts")||"[]");for(var i=0;i<f.length;i++){var l=document.createElement("link");l.rel="stylesheet";l.href=f[i];l.setAttribute("data-flxn-theme-font",t||"default");document.head.appendChild(l);}}catch(e){}',
           }}
         />
-        <link rel="stylesheet" href="/styles.css" />
       </head>
       <body
         style={{

src/app/styles.css

@@ -0,0 +1,188 @@
+* {
+  overscroll-behavior: none;
+}
+
+/* Keep app chrome non-selectable so iOS long-press doesn't open the
+   edit menu (AutoFill/Copy/Siri). Inputs and opted-in regions stay
+   selectable. */
+body {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+input,
+textarea,
+[contenteditable="true"],
+[contenteditable=""],
+[data-selectable],
+[data-selectable] * {
+  -webkit-touch-callout: default;
+  -webkit-user-select: text;
+  user-select: text;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.app {
+  transition: transform 500ms cubic-bezier(0.32, 0.72, 0, 1), 
+              border-radius 500ms cubic-bezier(0.32, 0.72, 0, 1);
+  transform: scale(1) translateY(0);
+  border-radius: 0;
+  will-change: transform;
+}
+
+.app.drawer-scaling,
+[data-drawer-level].drawer-scaling {
+  transform: scale(0.94) translateY(-8px);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+[data-drawer-level="2"].drawer-scaling {
+  transform: scale(0.92) translateY(-6px);
+}
+
+[data-drawer-level="3"].drawer-scaling {
+  transform: scale(0.90) translateY(-4px);
+}
+
+/* keep the page tappable mid-transition (rapid tab switching) */
+::view-transition {
+  pointer-events: none;
+}
+
+/* theme overlays must be this element, not body::before, or they blink off
+   during transitions */
+.flxn-theme-overlay {
+  position: fixed;
+  pointer-events: none;
+  view-transition-name: theme-overlay;
+}
+
+/* pinned states, not 0ms durations: Safari skips zero-duration VT animations
+   and blends both snapshots */
+::view-transition-old(root),
+::view-transition-old(app-header),
+::view-transition-old(theme-overlay) {
+  animation: none;
+  opacity: 0;
+}
+::view-transition-new(root),
+::view-transition-new(app-header),
+::view-transition-new(theme-overlay) {
+  animation: none;
+  opacity: 1;
+  mix-blend-mode: normal;
+}
+::view-transition-image-pair(root),
+::view-transition-image-pair(app-header),
+::view-transition-image-pair(theme-overlay),
+::view-transition-image-pair(page) {
+  isolation: auto;
+}
+
+::view-transition-old(page),
+::view-transition-new(page) {
+  animation-duration: 180ms;
+  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+  mix-blend-mode: normal;
+}
+
+html[data-nav-direction="forward"]::view-transition-old(page) {
+  animation: 250ms cubic-bezier(0.32, 0.72, 0, 1) both flxn-page-out-left;
+}
+html[data-nav-direction="forward"]::view-transition-new(page) {
+  animation: 250ms cubic-bezier(0.32, 0.72, 0, 1) both flxn-page-in-right;
+}
+html[data-nav-direction="back"]::view-transition-old(page) {
+  animation: 250ms cubic-bezier(0.32, 0.72, 0, 1) both flxn-page-out-right;
+}
+html[data-nav-direction="back"]::view-transition-new(page) {
+  animation: 250ms cubic-bezier(0.32, 0.72, 0, 1) both flxn-page-in-left;
+}
+
+html[data-nav-direction="forward"][data-header-vt="exit"]::view-transition-old(app-header) {
+  animation: 250ms cubic-bezier(0.32, 0.72, 0, 1) both flxn-page-out-left;
+  opacity: 1;
+}
+html[data-nav-direction="back"][data-header-vt="exit"]::view-transition-old(app-header) {
+  animation: 250ms cubic-bezier(0.32, 0.72, 0, 1) both flxn-page-out-right;
+  opacity: 1;
+}
+html[data-nav-direction="forward"][data-header-vt="enter"]::view-transition-new(app-header) {
+  animation: 250ms cubic-bezier(0.32, 0.72, 0, 1) both flxn-page-in-right;
+}
+html[data-nav-direction="back"][data-header-vt="enter"]::view-transition-new(app-header) {
+  animation: 250ms cubic-bezier(0.32, 0.72, 0, 1) both flxn-page-in-left;
+}
+
+@keyframes flxn-page-out-left {
+  to { transform: translateX(-100%); }
+}
+@keyframes flxn-page-in-right {
+  from { transform: translateX(100%); }
+}
+@keyframes flxn-page-out-right {
+  to { transform: translateX(100%); }
+}
+@keyframes flxn-page-in-left {
+  from { transform: translateX(-100%); }
+}
+
+@keyframes flxn-vt-fade-out {
+  to { opacity: 0; }
+}
+@keyframes flxn-vt-fade-in {
+  from { opacity: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-group(*),
+  ::view-transition-image-pair(*) {
+    animation: none !important;
+  }
+
+  ::view-transition-old(*) {
+    animation: 120ms ease both flxn-vt-fade-out !important;
+    z-index: auto !important;
+  }
+
+  ::view-transition-new(*) {
+    animation: 120ms ease both flxn-vt-fade-in !important;
+  }
+
+  ::view-transition-old(root),
+  ::view-transition-old(app-header),
+  ::view-transition-old(theme-overlay),
+  ::view-transition-new(root),
+  ::view-transition-new(app-header),
+  ::view-transition-new(theme-overlay) {
+    animation: none !important;
+  }
+
+  .app,
+  [data-drawer-level] {
+    transition: none;
+  }
+
+  .app.drawer-scaling,
+  [data-drawer-level].drawer-scaling {
+    transform: none;
+    border-radius: 0;
+  }
+
+  [data-vaul-drawer],
+  [data-vaul-overlay] {
+    animation: none !important;
+    transition: none !important;
+  }
+
+  @keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(0deg); }
+  }
+}