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/ResultsScreen.tsx

@@ -4,8 +4,10 @@ import Link from "next/link";
 import { motion } from "framer-motion";
 
 import { useI18n } from "@/lib/i18n";
+import { useCountUp } from "@/lib/motion";
 import type { Activity, Deck } from "@/lib/schemas";
 import { downloadDeck } from "@/lib/storage";
+import { useIsPhone } from "@/lib/use-phone";
 import { cn } from "@/lib/utils";
 import { BoltIcon, DownloadIcon, FlameIcon, HomeIcon, RefreshIcon, SnowflakeIcon, SparklesIcon } from "@/components/icons";
 import { Button, Chip } from "@/components/ui";
@@ -82,7 +84,11 @@ export function ResultsScreen({
   regenerateError: string | null;
 }) {
   const { t } = useI18n();
+  const isPhone = useIsPhone();
   const percent = total > 0 ? Math.round((correct / total) * 100) : 0;
+  /* Phones: the score and XP count up; desktop jumps straight in. */
+  const percentShown = useCountUp(percent, !isPhone);
+  const xpShown = useCountUp(xp, !isPhone);
   const perfect = missed.length === 0 && total > 0;
   const tone = percent >= 80 ? "emerald" : percent >= 50 ? "frost" : "amber";
 
@@ -93,7 +99,7 @@ export function ResultsScreen({
         animate={{ opacity: 1, scale: 1 }}
         className="card flex flex-col items-center gap-3 p-6 text-center"
       >
-        <ScoreRing percent={percent} tone={tone} />
+        <ScoreRing percent={percent} display={percentShown} tone={tone} />
         <h1 className="text-2xl font-semibold text-frost-950 text-balance dark:text-frost-50">
           {perfect ? t("results.perfect") : percent >= 60 ? t("results.nice") : t("results.start")}
         </h1>
@@ -109,7 +115,7 @@ export function ResultsScreen({
 
         <div className="mt-1 flex flex-wrap justify-center gap-2">
           <Chip tone="accent">
-            <BoltIcon className="size-3.5" /> {t("results.xpEarned", { n: xp })}
+            <BoltIcon className="size-3.5" /> {t("results.xpEarned", { n: xpShown })}
           </Chip>
           <Chip tone="warning">
             <FlameIcon className="size-3.5" /> {t("results.bestStreak", { n: bestStreak })}
@@ -203,7 +209,7 @@ export function ResultsScreen({
   );
 }
 
-function ScoreRing({ percent, tone }: { percent: number; tone: "emerald" | "frost" | "amber" }) {
+function ScoreRing({ percent, display, tone }: { percent: number; display: number; tone: "emerald" | "frost" | "amber" }) {
   const { t } = useI18n();
   const radius = 52;
   const circumference = 2 * Math.PI * radius;
@@ -232,7 +238,7 @@ function ScoreRing({ percent, tone }: { percent: number; tone: "emerald" | "fros
         />
       </svg>
       <div className="absolute flex flex-col items-center">
-        <span className="text-3xl font-extrabold text-frost-950 dark:text-frost-50">{percent}%</span>
+        <span className="text-3xl font-extrabold text-frost-950 dark:text-frost-50">{display}%</span>
         <span className="text-[11px] font-semibold uppercase tracking-wide text-frost-500 dark:text-frost-400">
           {t("results.score")}
         </span>