feat(web): page navigation transitions

[sardorml]

What

• Page navigation transitions via App Router template.tsx entrances (templates remount per navigation, restarting a one-shot CSS animation):
  • Root (app/template.tsx): 250ms opacity fade on every top-level navigation. Opacity-only on purpose — a transform on this wrapper would become the containing block for the marketing tree's inline position: fixed floating CTA.
  • Dashboard (app/(dashboard)/template.tsx): 300ms scale-fade (scale(0.97) → 1) on the content pane; sidebar/topbar chrome never remounts. Transform origin pinned near the top so tall pages don't shift at the viewport top while settling.
  • Keyframes declare only from, so nothing (opacity/transform/stacking context) is retained after the animation ends; both are gated behind prefers-reduced-motion.
• Modes mockup cursor: swapped to the sharper classic-arrow art, with matching hotspot offsets.
• Agent tooling: runtime verify skill doc for apps/web (dev-server reuse, Playwright setup, throwaway-signup flow, .next footgun).

Why not the View Transitions API

The theme toggle already drives document.startViewTransition with global ::view-transition-*(root) wipe styles — router-level view transitions would inherit the theme wipe. Templates are stable (no experimental flags) and can't collide with it.

Verification

Driven end-to-end with Playwright against the dev server: animations fire on real client-side navigations and initial load; wrapper remounts while root wrapper/chrome persist; frame-sampled the scale-fade (starts scale(0.97), opacity 0, settles to transform: none, opacity 1 at ~300ms); fixed floating CTA keeps offsetParent: null; reduced-motion suppresses the animation with content fully visible; rapid-fire navigation produces no page errors. Gates: typecheck, web tests, web build, Prettier.