Animation pass: one shared motion language for phones

Mobile only (<=639px / coarse pointers); desktop keeps its behaviour.

Foundation
- lib/motion.ts owns the spring presets (snappy/gentle/sheet), durations,
  easings and variants (screens, tabs, wizard steps, list stagger).
- Native-feel CSS: press feedback scales every button, card, chip, tab,
  row and summary to 0.96 with a spring-like cubic-bezier on transform
  (scoped to phones/coarse pointers), tap-highlight off, touch-action
  manipulation, chrome text non-selectable, reduced motion drops it.
- App shell fades in once on launch; the study feed fades in on phones.

Applied
- Tab bar: sliding active pill (shared layoutId) + icon bounce.
- Study Decks/Homework, language toggle, difficulty and size pickers:
  the same gliding highlight, gated so desktop keeps the old styling.
- Route content enters direction-aware (deeper = from the right, back =
  from the left, same-depth = crossfade) via RouteTransition on the
  library/create/homework content columns; library tab switches
  crossfade; wizard steps slide forward/backward (reduced motion safe).
- Library: cards fade up in a capped stagger on first load, glide with
  layout animations and shrink away on delete (AnimatePresence).
- Study feed: correct feedback pulses, wrong shakes, the progress bar
  settles with a spring curve, score and XP count up on the results.
- Settings sheet uses the sheet spring; the drawer now follows the
  finger and closes on release velocity, like the sheet.
- Generation progress: the stage message fades/slides between stages;
  the icon keeps its gentle wobble; the feed fades in on hand-off.

Skipped, on purpose: LazyMotion (the sliding highlights need layout
animations = domMax, same features the current import already has);
route exit animations (the App Router unmounts the outgoing page —
exits are handled by in-page AnimatePresence); replacing the study
feed's native scroll-snap with finger-follow drag (would fight the
platform scroller); finger-follow height animation for native <details>
expanders.

Verified: animation suite 8/8 (reduced motion + 4x-CPU-throttled trace:
no long tasks, CLS 0.0000), regression 74/74, mobile 52/52, declutter
116/116, i18n 25/25. Lint + build clean. SW freezmo-v21.

components/RouteTransition.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { motion, useReducedMotion } from "framer-motion";
+import { usePathname } from "next/navigation";
+
+import { screenVariants, tabVariants } from "@/lib/motion";
+
+/**
+ * Direction-aware screen entrance for the page content column.
+ *
+ * Deeper paths (library → deck, library → create/homework) slide in from the
+ * right; going back slides from the left; same-depth switches crossfade.
+ * The wrapper only ever wraps the scrolling content column — fixed chrome
+ * (tab bar, sheets) stays outside it, so a transform can never capture it.
+ *
+ * Note: the App Router unmounts the outgoing page immediately, so this is an
+ * entrance animation (exits animate for in-page elements via AnimatePresence,
+ * e.g. list items).
+ */
+
+/** Module-level so the direction survives the per-route remount. */
+let lastPath: string | null = null;
+
+function depth(path: string): number {
+  if (path === "/") return 0;
+  return path.split("/").filter(Boolean).length;
+}
+
+export function RouteTransition({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  const reduceMotion = useReducedMotion();
+
+  const previous = lastPath;
+  lastPath = pathname;
+
+  const isTabSwitch = previous !== null && depth(previous) === depth(pathname) && previous !== pathname;
+  const direction: 1 | -1 =
+    previous === null || depth(pathname) >= depth(previous) ? 1 : -1;
+  const variants = isTabSwitch ? tabVariants(!!reduceMotion) : screenVariants(direction, !!reduceMotion);
+
+  return (
+    <motion.div initial="initial" animate="animate" variants={variants}>
+      {children}
+    </motion.div>
+  );
+}