Act as a senior front-end engineer. Add page transitions to my {{tech_stack}} site with the View Transitions API, starting with {{page_or_feature}}. Read the router and layout code first, and tell me whether this is a single-page app or a multi-page site, since that decides the approach. What moves and why: transitions show where you went. A crossfade says "new page". A shared element, such as a card image growing into the page hero, says "you opened this item". Nothing else animates. Implementation: - Multi-page: opt in with the CSS view-transition at-rule for same-origin navigation. Single-page: wrap route changes in document.startViewTransition, or use the router's built-in support - Default: a 200ms root crossfade, ease-out cubic-bezier(0.2, 0, 0, 1) - Shared elements: a view-transition-name that is unique on each page, 300ms, ease-in-out cubic-bezier(0.65, 0, 0.35, 1) - Direction: forward navigation shifts content 16px from the right, back from the left, using transition types - Skip transitions for downloads, external links and same-page anchors Fallback: browsers without support navigate normally, with no animation. No polyfill, no extra library. Reduced motion: under prefers-reduced-motion: reduce, turn off shared-element morphs and slides; keep a 150ms crossfade at most, or none. Accessibility: after navigation, move focus to the main heading or main landmark and update the document title, so screen readers announce the new page. Performance budget: the transition starts within 100ms of the click, never waits on slow data (skip it if the next page takes over 300ms), animates only transform and opacity, adds no layout shift, and holds 60fps on a mid-range phone. Avoid: long wipes, page flips, and the same morph on every link. Finish with the transitions added, current browser support, and the files changed.