/* ECHO.11 — cross-document view transitions Linked in the of every page (must be render-blocking CSS: the browser reads the @view-transition opt-in on the incoming page before first paint). Navigating between pages becomes one continuous calm experience: the old page drifts up and fades while the new one rises in, and the ECHO.11 wordmark stays visually anchored. Browsers without support ignore all of this and navigate normally. */ @view-transition { navigation: auto; } /* gentle crossfade with a slight vertical drift */ ::view-transition-old(root) { animation: 400ms cubic-bezier(0.22, 0.61, 0.36, 1) both echo-page-out; } ::view-transition-new(root) { animation: 400ms cubic-bezier(0.22, 0.61, 0.36, 1) both echo-page-in; } @keyframes echo-page-out { to { opacity: 0; transform: translateY(-12px); } } @keyframes echo-page-in { from { opacity: 0; transform: translateY(12px); } } /* the wordmark is captured as its own shared element, so it holds still while the rest of the page transitions beneath it */ .logo { view-transition-name: echo-logo; } /* reduced motion: navigate instantly, no transition at all */ @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(*) { animation: none !important; } }