/* Page flow for the marketing site — the same motion the app and operator
   console use, kept in ONE file rather than copied into each page's inline
   <style>. Linked from every page's <head>.
 *
 * Why a real stylesheet and not chrome.js (which injects everything else shared):
 * these are CROSS-document view transitions, so the browser must see the
 * `@view-transition` opt-in in BOTH the outgoing and incoming document before the
 * new page first renders. chrome.js is an ordinary script and runs too late for
 * the incoming document — the navigation would simply not animate. A
 * render-blocking <link> is always in time.
 *
 * The app can't share shared/ui/index.css here: marketing is a static MPA with no
 * build step, so it has nothing to resolve an import with. Keep the numbers below
 * in sync with §View transitions in shared/ui/index.css.
 *
 * Needs no JS at all: `navigation: auto` makes same-origin page-to-page
 * navigation a view transition, back/forward included. Browsers without support
 * just navigate normally. */

@view-transition { navigation: auto; }

@keyframes tb-vt-page-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes tb-vt-page-in  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Outgoing clears out quickly, incoming fades in and slides up behind it — the
   snapshots overlap, so a symmetric crossfade would just read as mush. */
::view-transition-old(root) { animation: tb-vt-page-out 120ms cubic-bezier(.2,.7,.3,1) both; }
::view-transition-new(root) { animation: tb-vt-page-in 220ms cubic-bezier(.2,.7,.3,1) 60ms both; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}
