/* Smooth page transitions across the simulator. The MPA white-flash problem: when navigating between pages, the browser tears down the old DOM and briefly shows the bare background (white by default) before painting the new page. We solve it three ways, layered: 1. Paint with the app surface color so any gap is invisible. 2. Opt into the View Transitions API (Chromium 126+, Safari 18+), which makes the browser snapshot the old page, navigate, and crossfade to the new one with zero gap. 3. For browsers without View Transitions (Firefox today), the manual fade-in animation on body still smooths the entry. Fade-out is disabled there because it makes the gap MORE visible, not less — page-transitions.js skips it on the no-VT path too. */ html { background-color: #f8fafc; background-color: var(--sf-bg, #f8fafc); } /* ── Cross-document View Transitions (Chromium 126+, Safari 18+) ──────── */ @view-transition { navigation: auto; } /* Slightly slow down the default crossfade and add a subtle lift on the incoming page so navigation feels purposeful, not abrupt. */ ::view-transition-old(root) { animation: sf-vt-old 220ms cubic-bezier(0.4, 0, 1, 1) forwards; } ::view-transition-new(root) { animation: sf-vt-new 320ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes sf-vt-old { to { opacity: 0; } } @keyframes sf-vt-new { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ── Manual fade for browsers without View Transitions ────────────────── */ body { animation: sf-fade-in 240ms cubic-bezier(0.16, 1, 0.3, 1); } @keyframes sf-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* When View Transitions are available, the browser is already animating the new page in — disable the body animation to avoid double-animating. */ @supports (view-transition-name: none) { body { animation: none; } } /* JS-driven fade-out (only used on browsers WITHOUT View Transitions — the JS detects support and skips this class otherwise). */ body.sf-fading-out { animation: sf-fade-out 120ms ease-in forwards; pointer-events: none; } @keyframes sf-fade-out { to { opacity: 0; } } /* ── Nav loader (top progress bar + centered spinner) ─────────────────── Shown when a navigation starts so the user never sees a blank frame. It sits in the DOM hidden at opacity 0; page-transitions.js toggles `.is-active` synchronously before navigating. */ #sf-nav-loader { position: fixed; inset: 0; pointer-events: none; z-index: 2000; opacity: 0; transition: opacity 140ms ease-out; } #sf-nav-loader.is-active { opacity: 1; } .sf-nav-loader__bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent 0%, #2563eb 30%, #7c3aed 70%, transparent 100%); background-size: 40% 100%; background-repeat: no-repeat; animation: sf-nav-bar 1.15s cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes sf-nav-bar { 0% { background-position: -45% 0; } 100% { background-position: 145% 0; } } .sf-nav-loader__spinner { position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.08); display: grid; place-items: center; transform: scale(0.85); opacity: 0; transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), opacity 180ms ease-out; } #sf-nav-loader.is-active .sf-nav-loader__spinner { transform: scale(1); opacity: 1; } .sf-nav-loader__ring { width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid rgba(37, 99, 235, 0.15); border-top-color: #2563eb; border-right-color: #7c3aed; animation: sf-loader-spin 760ms linear infinite; } @keyframes sf-loader-spin { to { transform: rotate(360deg); } } [data-bs-theme="dark"] .sf-nav-loader__spinner { background: rgba(15, 23, 42, 0.88); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3); } [data-bs-theme="dark"] .sf-nav-loader__ring { border-color: rgba(124, 58, 237, 0.22); border-top-color: #60a5fa; border-right-color: #a78bfa; } /* ── PWA standalone mode: a more deliberate slide ───────────────────── In the installed app we want navigation to feel closer to a native push-from-right transition. Only the incoming page animates — the outgoing page fades out in place, matching iOS/Android conventions. Gated on the body flag (set by pwa-register.js) and the media query so it only runs on phone-sized standalone windows; desktop PWAs keep the subtle crossfade. */ body[data-pwa="true"] ::view-transition-new(root) { animation: sf-vt-new-push 320ms cubic-bezier(0.22, 1, 0.36, 1) forwards; } body[data-pwa="true"] ::view-transition-old(root) { animation: sf-vt-old 180ms cubic-bezier(0.4, 0, 1, 1) forwards; } @keyframes sf-vt-new-push { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } } /* Fallback fade for standalone Firefox / older browsers. */ @media (max-width: 768px) { body[data-pwa="true"] { animation: sf-fade-in-push 260ms cubic-bezier(0.22, 1, 0.36, 1); } } @keyframes sf-fade-in-push { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } } @supports (view-transition-name: none) { body[data-pwa="true"] { animation: none; } } /* ── Respect prefers-reduced-motion ───────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { body { animation: sf-fade-in-flat 140ms ease-out; } body.sf-fading-out { animation: sf-fade-out-flat 80ms ease-in forwards; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 140ms; } body[data-pwa="true"] ::view-transition-new(root) { animation: sf-fade-in-flat 140ms ease-out forwards; } @keyframes sf-fade-in-flat { from { opacity: 0; } } @keyframes sf-fade-out-flat { to { opacity: 0; } } .sf-nav-loader__ring { animation-duration: 1.6s; } .sf-nav-loader__bar { animation: none; background: #2563eb; background-size: 100% 100%; } }