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/homework/HomeworkInput.tsx

@@ -13,6 +13,7 @@ import {
 import type { HomeworkMode, HomeworkRecord } from "@/lib/schemas";
 import { ACCEPTED_TYPES, formatBytes, imageFilesFromDataTransfer } from "@/lib/image";
 import { useI18n } from "@/lib/i18n";
+import { stepVariants } from "@/lib/motion";
 import type { useNotesIntake } from "@/lib/use-notes-intake";
 import { useIsPhone } from "@/lib/use-phone";
 import { openSettings } from "@/lib/ui-events";
@@ -68,6 +69,7 @@ export function HomeworkInput({
   const fileInputRef = useRef<HTMLInputElement>(null);
   const cameraInputRef = useRef<HTMLInputElement>(null);
   const [step, setStep] = useState(1);
+  const [stepDir, setStepDir] = useState<1 | -1>(1);
   const [pasteOpen, setPasteOpen] = useState(false);
   const isPhone = useIsPhone();
   const reduceMotion = useReducedMotion();
@@ -237,9 +239,9 @@ export function HomeworkInput({
 
         <motion.div
           key={step}
-          initial={reduceMotion ? false : { opacity: 0, x: 18 }}
-          animate={{ opacity: 1, x: 0 }}
-          transition={{ duration: 0.24, ease: [0.22, 1, 0.36, 1] }}
+          initial="initial"
+          animate="animate"
+          variants={stepVariants(stepDir, !!reduceMotion)}
           className="mt-5"
         >
           {step === 1 ? (
@@ -396,13 +398,24 @@ export function HomeworkInput({
               variant="secondary"
               size="lg"
               className="touch-target flex-1"
-              onClick={() => setStep(1)}
+              onClick={() => {
+                setStepDir(-1);
+                setStep(1);
+              }}
               disabled={step === 1}
             >
               {t("common.back")}
             </Button>
             {step === 1 ? (
-              <Button size="lg" className="touch-target flex-[1.5]" onClick={() => setStep(2)} disabled={!canSubmit}>
+              <Button
+                size="lg"
+                className="touch-target flex-[1.5]"
+                onClick={() => {
+                  setStepDir(1);
+                  setStep(2);
+                }}
+                disabled={!canSubmit}
+              >
                 {t("common.next")}
               </Button>
             ) : null}