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

@@ -1,14 +1,17 @@
 "use client";
 
 import Link from "next/link";
+import { motion } from "framer-motion";
 import { useState } from "react";
 
 import { ApiError, generateDeck } from "@/lib/client-api";
 import { activityTypes, materialiseActivities } from "@/lib/deck-ops";
 import { createFolder as makeFolder, listFolders } from "@/lib/folders";
 import { useI18n } from "@/lib/i18n";
+import { springGentle } from "@/lib/motion";
 import { UNORGANIZED_ID, type Deck } from "@/lib/schemas";
 import { appendActivities, deleteDeck, downloadDeck, renameDeck, upsertDeck } from "@/lib/storage";
+import { useIsPhone } from "@/lib/use-phone";
 import { cn, formatDate, truncate } from "@/lib/utils";
 import { ChevronDownIcon, DownloadIcon, EllipsisIcon, FolderIcon, PlayIcon, RefreshIcon } from "@/components/icons";
 import { Button, ProgressBar } from "@/components/ui";
@@ -21,8 +24,18 @@ const ADD_OPTIONS = [3, 5, 8];
  * One deck in the dashboard grid: title, muted metadata, tags, summary and a
  * prominent Study CTA with quiet secondary actions.
  */
-export function DeckCard({ deck, onMove }: { deck: Deck; onMove?: (folderId: string | undefined) => void }) {
+export function DeckCard({
+  deck,
+  onMove,
+  index = 0,
+}: {
+  deck: Deck;
+  onMove?: (folderId: string | undefined) => void;
+  /** Position in the list — used for the capped first-load stagger. */
+  index?: number;
+}) {
   const { t, plural } = useI18n();
+  const isPhone = useIsPhone();
   const folders = listFolders();
   const [busy, setBusy] = useState<Busy>(null);
   const [menuOpen, setMenuOpen] = useState(false);
@@ -110,8 +123,23 @@ export function DeckCard({ deck, onMove }: { deck: Deck; onMove?: (folderId: str
   const menuRow =
     "flex w-full items-center gap-2.5 rounded-xl px-3 py-2 text-left text-[13px] font-medium text-[var(--text)] transition hover:bg-[var(--hover)]";
 
+  /* Phones: cards fade up in a short capped stagger, glide when the grid
+     reflows (folder moves, filtering) and shrink away on delete. */
+  const cardVariants = {
+    hidden: { opacity: 0, y: 12 },
+    show: { opacity: 1, y: 0, transition: { ...springGentle, delay: Math.min(index, 8) * 0.04 } },
+    exit: { opacity: 0, scale: 0.97, transition: { duration: 0.16 } },
+  };
+
   return (
-    <li className="card card-hover group relative flex flex-col p-4 sm:p-5">
+    <motion.li
+      layout={isPhone}
+      variants={isPhone ? cardVariants : undefined}
+      initial={isPhone ? "hidden" : false}
+      animate={isPhone ? "show" : undefined}
+      exit={isPhone ? "exit" : undefined}
+      className="card card-hover group relative flex flex-col p-4 sm:p-5"
+    >
       {/* Phones: the whole card is tappable too; interactive children sit above it. */}
       <Link
         href={`/deck/${deck.id}`}
@@ -474,7 +502,7 @@ export function DeckCard({ deck, onMove }: { deck: Deck; onMove?: (folderId: str
         </div>
       ) : null}
 
-    </li>
+    </motion.li>
   );
 }