feat(web): view transitions on route changes; content enter animation

Co-Authored-By: Claude Opus 5.5 <[email protected]>

packages/feature-learner/src/web/styles.ts

@@ -331,6 +331,11 @@ export const learnerCss = String.raw`
 
 .lr-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; background: var(--raised); border: 1px solid var(--line2); border-radius: 18px; padding: 9px 16px; font-size: 13px; color: var(--text); }
 
+/* ---------- motion ----------
+   New content rises in when it arrives (a page, a lesson, the library); the header, sidebar and dock stay put.
+   With view transitions the old page dissolves over it (tokens.css); without them this is the whole effect. */
+.lr-main .lr-lesson, .lr-main > article, .stc-main > .lr > article, .lr-lib { animation: stc-enter var(--t-enter) var(--ease-out) backwards; }
+
 /* ---------- responsive ---------- */
 @media (max-width: 1100px) {
   .lr .ex { grid-template-columns: minmax(0, 1fr); }