diff --git a/src/App.tsx b/src/App.tsx
index f9b245db8..980bd95fd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -301,7 +301,8 @@ export function RouteContent({ children }: { children: ReactNode }) {
     <PageLabelProvider value={setPageLabel}>
       <LocalizedRouteErrorBoundary key={location.pathname}>
         <Suspense fallback={<PendingRoute />}>
-          {children}
+          {/* App pages rise in once as they open. Public pages keep their own reveals and fixed bars. */}
+          {location.pathname.startsWith('/app') ? <div className="page-enter">{children}</div> : children}
         </Suspense>
       </LocalizedRouteErrorBoundary>
     </PageLabelProvider>
diff --git a/src/components/brand/Owl.tsx b/src/components/brand/Owl.tsx
index a8e6ee211..ffc664cee 100644
--- a/src/components/brand/Owl.tsx
+++ b/src/components/brand/Owl.tsx
@@ -1,3 +1,4 @@
+import { useState, type CSSProperties } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { cn } from '@/lib/utils';
 import point from '@/assets/owl/owl-point.svg';
@@ -20,8 +21,67 @@ import sleepy from '@/assets/owl/owl-sleepy.svg';
  */
 export type OwlPose = 'point' | 'idea' | 'skeptical' | 'surprised' | 'celebrating' | 'thinking' | 'reading' | 'timekeeper' | 'arguing' | 'coach' | 'sleepy';
 
+/** A one-shot move the owl plays when it arrives or changes pose (index.css, "The owl's motion"). */
+export type OwlGesture = 'wave' | 'cheer' | 'hop';
+
 const POSES: Record<OwlPose, string> = { point, idea, skeptical, surprised, celebrating, thinking, reading, timekeeper, arguing, coach, sleepy };
 
+const GESTURES: Partial<Record<OwlPose, OwlGesture>> = {
+  point: 'wave',
+  coach: 'wave',
+  arguing: 'wave',
+  celebrating: 'cheer',
+  surprised: 'hop',
+  idea: 'hop',
+};
+
+/** Each eye's outline as [left, top, width, height] in % of the square; sleepy's are already shut. */
+type EyeBox = readonly [number, number, number, number];
+const EYES: Partial<Record<OwlPose | 'mark', readonly [EyeBox, EyeBox]>> = {
+  arguing: [[34.4, 22.2, 12.8, 14], [56.6, 22.2, 11.8, 14]],
+  celebrating: [[31.3, 20, 11.7, 12.8], [50.9, 19.4, 10.9, 12.8]],
+  coach: [[37.7, 23.9, 13, 14.4], [60.4, 23.9, 12.1, 14.4]],
+  idea: [[41.7, 23.5, 13.4, 14.7], [64.3, 24, 12.5, 14.7]],
+  point: [[35.5, 22.7, 13.5, 14.8], [59, 22.7, 12.5, 14.8]],
+  reading: [[33, 25.9, 12.8, 14], [55.2, 25.9, 11.8, 14]],
+  skeptical: [[29.3, 27.8, 12.2, 11.8], [50.6, 27.4, 11.5, 11.8]],
+  surprised: [[38.3, 17, 13, 14.3], [60.4, 17.5, 12.1, 14.3]],
+  thinking: [[31.2, 25.9, 12.8, 14], [53.3, 25.9, 11.8, 14]],
+  timekeeper: [[30.1, 22.2, 12.8, 14], [52.3, 22.2, 11.8, 14]],
+  mark: [[27.3, 36.3, 18, 19.5], [54.7, 36.3, 18, 19.5]],
+};
+
+// Below this the lids are a pixel or two and the blink reads as flicker.
+const MIN_BLINK_SIZE = 28;
+
+/**
+ * Every owl blinks on its own clock: a random period and phase, fixed for the owl's lifetime
+ * so a re-render (a streaming reply re-renders often) never restarts it.
+ */
+function useBlinkClock(): CSSProperties {
+  const [clock] = useState(() => ({
+    '--owl-blink-period': `${(4.6 + Math.random() * 2.4).toFixed(2)}s`,
+    '--owl-blink-delay': `${(-Math.random() * 6).toFixed(2)}s`,
+  }));
+  return clock as CSSProperties;
+}
+
+/** Two lids over the owl's eyes. They sit flat (scaleY 0) and close briefly on the blink keyframes. */
+function OwlLids({ eyes, size }: { eyes: readonly [EyeBox, EyeBox]; size: number }) {
+  const lash = `${Math.max(1, size * 0.012).toFixed(1)}px`;
+  return (
+    <>
+      {eyes.map(([left, top, width, height], index) => (
+        <span
+          key={index}
+          className="owl-lid"
+          style={{ left: `${left}%`, top: `${top}%`, width: `${width}%`, height: `${height}%`, '--owl-lash': lash } as CSSProperties}
+        />
+      ))}
+    </>
+  );
+}
+
 // A pose change crossfades with a small pop on the design system's `pop` spring. With reduced
 // motion, App's MotionConfig drops the scale and travel and only the fade remains.
 const POSE_TRANSITION = { type: 'spring', stiffness: 420, damping: 22, mass: 1, opacity: { duration: 0.16 } } as const;
@@ -35,35 +95,56 @@ interface OwlProps {
   label?: string;
   /** Above the fold: load at once instead of when scrolled near. */
   priority?: boolean;
+  /** The move played on arrival and on each pose change; false keeps it still. Defaults by pose. */
+  gesture?: OwlGesture | false;
+  /** A slow breath while idle. Off on the landing page, where nothing moves on its own. */
+  breathe?: boolean;
 }
 
-/** The owl, full body. Changing `pose` animates from one pose to the next. */
-export function Owl({ pose, size, className, label, priority = false }: OwlProps) {
+/**
+ * The owl, full body. It blinks, breathes, plays its pose's gesture when it arrives, and hops when
+ * hovered. Changing `pose` animates from one pose to the next. All of it is CSS keyframes, so
+ * reduced motion (index.css) stops every move and leaves the owl still.
+ */
+export function Owl({ pose, size, className, label, priority = false, gesture, breathe = true }: OwlProps) {
+  const clock = useBlinkClock();
+  const move = gesture === undefined ? GESTURES[pose] : gesture;
+  const eyes = size >= MIN_BLINK_SIZE ? EYES[pose] : undefined;
   return (
     <span
-      className={cn('relative inline-block shrink-0', className)}
-      style={{ width: size, height: size }}
+      className={cn('owl relative inline-block shrink-0', className)}
+      style={{ width: size, height: size, ...clock }}
       role={label ? 'img' : undefined}
       aria-label={label}
       aria-hidden={label ? undefined : true}
     >
-      <AnimatePresence initial={false}>
-        <motion.img
-          key={pose}
-          src={POSES[pose]}
-          width={size}
-          height={size}
-          alt=""
-          draggable={false}
-          decoding="async"
-          loading={priority ? 'eager' : 'lazy'}
-          className="absolute inset-0 h-full w-full select-none object-contain"
-          initial={{ opacity: 0, scale: 0.9, y: 6 }}
-          animate={{ opacity: 1, scale: 1, y: 0 }}
-          exit={{ opacity: 0, scale: 0.96, y: 0 }}
-          transition={POSE_TRANSITION}
-        />
-      </AnimatePresence>
+      <span className={cn('owl-body absolute inset-0', breathe && 'owl-breathe')}>
+        <AnimatePresence initial={false}>
+          <motion.span
+            key={pose}
+            className="absolute inset-0"
+            initial={{ opacity: 0, scale: 0.9, y: 6 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.96, y: 0 }}
+            transition={POSE_TRANSITION}
+          >
+            {/* Keyed with the pose, so the gesture replays on every change. */}
+            <span className={cn('absolute inset-0', move && `owl-gesture-${move}`)}>
+              <img
+                src={POSES[pose]}
+                width={size}
+                height={size}
+                alt=""
+                draggable={false}
+                decoding="async"
+                loading={priority ? 'eager' : 'lazy'}
+                className="absolute inset-0 h-full w-full select-none object-contain"
+              />
+              {eyes && <OwlLids eyes={eyes} size={size} />}
+            </span>
+          </motion.span>
+        </AnimatePresence>
+      </span>
     </span>
   );
 }
@@ -74,52 +155,68 @@ interface OwlAvatarProps {
   size?: number;
   className?: string;
   label?: string;
+  /**
+   * Blink now and then. Off by default: a transcript renders one avatar per message, and only
+   * the one that is present (a header, a working indicator) should look alive.
+   */
+  blink?: boolean;
 }
 
 /** The owl's head and shoulders in a tinted circle: the Ask coach and the Sparring opponent. */
-export function OwlAvatar({ pose, size = 40, className, label }: OwlAvatarProps) {
+export function OwlAvatar({ pose, size = 40, className, label, blink = false }: OwlAvatarProps) {
+  const clock = useBlinkClock();
+  // The avatar zooms 1.6x onto the head, so its lids are big enough from a smaller size.
+  const eyes = blink && size * 1.6 >= MIN_BLINK_SIZE ? EYES[pose] : undefined;
   return (
     <span
       className={cn(
         'relative inline-flex shrink-0 overflow-hidden rounded-full bg-plume-100 ring-2 ring-white dark:bg-plume-900 dark:ring-ink-900',
         className,
       )}
-      style={{ width: size, height: size }}
+      style={{ width: size, height: size, ...clock }}
       role={label ? 'img' : undefined}
       aria-label={label}
       aria-hidden={label ? undefined : true}
     >
       <AnimatePresence initial={false}>
-        <motion.img
+        <motion.span
           key={pose}
-          src={POSES[pose]}
-          width={size}
-          height={size}
-          alt=""
-          draggable={false}
-          decoding="async"
-          // The full pose, zoomed onto the head and shoulders.
-          className="absolute inset-0 h-full w-full origin-[52%_32%] scale-[1.6] select-none object-contain"
+          // The full pose, zoomed onto the head and shoulders; the lids zoom with it.
+          className="absolute inset-0 origin-[52%_32%] scale-[1.6]"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
           transition={{ duration: 0.18 }}
-        />
+        >
+          <img
+            src={POSES[pose]}
+            width={size}
+            height={size}
+            alt=""
+            draggable={false}
+            decoding="async"
+            className="absolute inset-0 h-full w-full select-none object-contain"
+          />
+          {eyes && <OwlLids eyes={eyes} size={size * 1.6} />}
+        </motion.span>
       </AnimatePresence>
     </span>
   );
 }
 
-/** The app mark: the owl's head on its sky tile (public/owl-mark.svg, also the favicon source). */
+/**
+ * The app mark: the owl's head on its sky tile (public/owl-mark.svg, also the favicon source).
+ * It blinks now and then wherever it is big enough to see.
+ */
 export function OwlMark({ size = 36, className, alt = '' }: { size?: number; className?: string; alt?: string }) {
+  const clock = useBlinkClock();
   return (
-    <img
-      src="/owl-mark.svg"
-      alt={alt}
-      width={size}
-      height={size}
-      decoding="async"
-      className={cn('shrink-0 rounded-[28%] shadow-[0_2px_0_var(--do-plume-200)] dark:shadow-[0_2px_0_var(--do-plume-950)]', className)}
-    />
+    <span
+      className={cn('relative block shrink-0 overflow-hidden rounded-[28%] shadow-[0_2px_0_var(--do-plume-200)] dark:shadow-[0_2px_0_var(--do-plume-950)]', className)}
+      style={{ width: size, height: size, ...clock }}
+    >
+      <img src="/owl-mark.svg" alt={alt} width={size} height={size} decoding="async" className="block h-full w-full" />
+      {size >= MIN_BLINK_SIZE && EYES.mark && <span aria-hidden="true"><OwlLids eyes={EYES.mark} size={size} /></span>}
+    </span>
   );
 }
diff --git a/src/components/features/ask/AskChat.tsx b/src/components/features/ask/AskChat.tsx
index 726e6898b..c6418b917 100644
--- a/src/components/features/ask/AskChat.tsx
+++ b/src/components/features/ask/AskChat.tsx
@@ -577,7 +577,7 @@ export function AskChat({ messages, streamingMessage, isLoading, error, onDismis
         {/* Wraps on a phone: the Hungarian title and two buttons do not fit one 375 px row. */}
         <div className="flex flex-wrap items-center justify-between gap-x-3 gap-y-2">
           <div className="flex min-w-0 items-center gap-3">
-            <OwlAvatar pose="coach" size={44} label={t('askChat.coachAvatarAlt', 'The owl, your debate coach')} />
+            <OwlAvatar pose="coach" size={44} blink label={t('askChat.coachAvatarAlt', 'The owl, your debate coach')} />
             <div className="min-w-0">
               <CardTitle>{t('askChat.title')}</CardTitle>
               <CardDescription>{t('askChat.subtitle')}</CardDescription>
@@ -619,7 +619,7 @@ export function AskChat({ messages, streamingMessage, isLoading, error, onDismis
                 // One true status line: what is happening, and how long it has taken once that matters.
                 <p className="flex items-center gap-2.5 text-sm font-bold text-muted-foreground motion-safe:animate-in fade-in-0 duration-200" role="status" aria-live="polite">
                   {/* Decorative: a label here would be announced with every status update. */}
-                  <OwlAvatar pose="coach" size={32} />
+                  <OwlAvatar pose="coach" size={32} blink />
                   <span className="inline-flex items-center gap-2 rounded-[20px] rounded-bl-md border-2 border-border bg-card px-3.5 py-2.5">
                     {searchingWeb ? t('askChat.searchingWeb', 'Searching the web…') : t('askChat.working', 'Working…')}
                     <ThinkingDots className="text-primary" />
diff --git a/src/components/features/attack/AttackResults.tsx b/src/components/features/attack/AttackResults.tsx
index e79b76dba..2b6260b9a 100644
--- a/src/components/features/attack/AttackResults.tsx
+++ b/src/components/features/attack/AttackResults.tsx
@@ -5,6 +5,7 @@ import { AlertCircle, AlertTriangle, Info, Scale, Lightbulb, MessageSquare, Flam
 import { Badge } from '@/components/ui/badge';
 import { SectionCard } from '@/components/ui/section-card';
 import { Progress } from '@/components/ui/progress';
+import { CountUp } from '@/components/ui/count-up';
 import { Separator } from '@/components/ui/separator';
 import { Markdown } from '@/components/ui/markdown';
 import type { AttackOutput, Weakness } from '@/lib/ai/schemas/attack';
@@ -192,16 +193,17 @@ export function AttackResults({ result, discoveredSources, onDiscuss, onPractice
             <div className="flex items-center justify-between mb-2">
               <span className="text-sm font-medium text-foreground">{t('attackResults.caseStrength')}</span>
               <span className={cn(
-                  'text-lg font-bold',
+                  'text-lg font-bold tabular-nums',
                   overallAssessment.score >= 70 ? 'text-primary' :
                     overallAssessment.score >= 50 ? 'text-amber-600 dark:text-amber-400' : 'text-destructive'
                 )}>
-                  {overallAssessment.score}/100
+                  <CountUp value={overallAssessment.score} />/100
               </span>
             </div>
             <Progress
               value={overallAssessment.score}
               className="h-3"
+              reveal
             />
           </div>
 
diff --git a/src/components/features/factoids/FactoidsResults.tsx b/src/components/features/factoids/FactoidsResults.tsx
index d77d31a7b..f30f209a8 100644
--- a/src/components/features/factoids/FactoidsResults.tsx
+++ b/src/components/features/factoids/FactoidsResults.tsx
@@ -6,6 +6,7 @@ import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { SectionCard } from '@/components/ui/section-card';
 import { Progress } from '@/components/ui/progress';
+import { CountUp } from '@/components/ui/count-up';
 import type { FactoidsOutput, Factoid } from '@/lib/ai/schemas/factoids';
 import { cn } from '@/lib/utils';
 import { validateUrl } from '@/lib/validation/url';
@@ -79,7 +80,7 @@ function FactoidCard({ factoid, onSave }: { factoid: Factoid, onSave?: FactoidsR
           </div>
         </div>
         <div className="flex flex-col items-end gap-2">
-          <Progress value={factoid.relevanceScore} className="w-16 h-2" />
+          <Progress value={factoid.relevanceScore} className="w-16 h-2" reveal />
           {onSave && (
             <Button
               variant="ghost"
@@ -235,10 +236,10 @@ export function FactoidsResults({ result, discoveredSources, onDiscuss, onSave,
         <div className="space-y-4">
           <div className="flex items-center gap-4">
             <div className="flex-1">
-              <Progress value={(verifiedCount / totalCount) * 100} className="h-3" />
+              <Progress value={(verifiedCount / totalCount) * 100} className="h-3" reveal />
             </div>
-            <span className="text-sm font-medium text-foreground">
-              {Math.round((verifiedCount / totalCount) * 100)}%
+            <span className="text-sm font-medium tabular-nums text-foreground">
+              <CountUp value={Math.round((verifiedCount / totalCount) * 100)} />%
             </span>
           </div>
         </div>
diff --git a/src/components/features/onboarding/DebateOwlIntro.tsx b/src/components/features/onboarding/DebateOwlIntro.tsx
index 230228d02..6d611b1d2 100644
--- a/src/components/features/onboarding/DebateOwlIntro.tsx
+++ b/src/components/features/onboarding/DebateOwlIntro.tsx
@@ -148,7 +148,8 @@ function Line({ shown, icon, className, children }: {
       animate={shown ? { opacity: 1, y: 0 } : { opacity: 0, y: 6 }}
       transition={{ duration: 0.32, ease: EASE_OUT }}
     >
-      {icon && <span className="mt-1 flex h-4 w-5 shrink-0 items-center justify-center" aria-hidden="true">{icon}</span>}
+      {/* The icon pops in as its line lands; the check draws itself. */}
+      {icon && <span className={cn('mt-1 flex h-4 w-5 shrink-0 items-center justify-center', shown && 'success-pop [--success-delay:120ms]')} aria-hidden="true">{icon}</span>}
       <span>{children}</span>
     </motion.li>
   );
diff --git a/src/components/features/sparring/SparringRound.tsx b/src/components/features/sparring/SparringRound.tsx
index 685ead930..b55fa27ec 100644
--- a/src/components/features/sparring/SparringRound.tsx
+++ b/src/components/features/sparring/SparringRound.tsx
@@ -255,7 +255,7 @@ export function SparringRound({
                 // What you're answering stays in view above the composer, not below it in the transcript.
                 <article className="rounded-lg border-2 border-border bg-card p-4 sm:p-5" aria-labelledby="sparring-latest-opponent">
                   <div className="flex items-center gap-2.5">
-                    <OwlAvatar pose="arguing" size={32} label={t('sparring.opponentAvatarAlt', 'The owl, your AI opponent')} />
+                    <OwlAvatar pose="arguing" size={32} blink label={t('sparring.opponentAvatarAlt', 'The owl, your AI opponent')} />
                     <h2 id="sparring-latest-opponent" className="text-sm font-extrabold text-heading">{t('sparring.round.latestOpponent', 'Opponent’s last speech')}</h2>
                     <span className="truncate text-xs text-muted-foreground">{t(`sparring.turns.${latestOpponentSpeech.turnId}`, latestOpponentSpeech.role)}</span>
                   </div>
@@ -304,7 +304,7 @@ export function SparringRound({
                 // The opponent's speech as it is written, in the place it will be read.
                 <article data-testid="sparring-live-speech" className="rounded-lg border-2 border-brand-tint-border bg-card p-4 motion-safe:animate-in fade-in-0 duration-200 sm:p-5" aria-busy="true" aria-labelledby="sparring-live-opponent">
                   <div className="flex items-center gap-2.5">
-                    <OwlAvatar pose="arguing" size={32} label={t('sparring.opponentAvatarAlt', 'The owl, your AI opponent')} />
+                    <OwlAvatar pose="arguing" size={32} blink label={t('sparring.opponentAvatarAlt', 'The owl, your AI opponent')} />
                     <h2 id="sparring-live-opponent" className="text-sm font-extrabold text-heading">{t('sparring.round.opponentSpeaking', 'Opponent is speaking')}</h2>
                     {currentTurn && <span className="truncate text-xs text-muted-foreground">{t(`sparring.turns.${currentTurn.id}`, currentTurn.label)}</span>}
                   </div>
@@ -389,7 +389,7 @@ export function SparringRound({
                 return (
                   <div key={turn.id} className={cn('flex items-center gap-3 rounded-md px-3 py-2.5 text-sm transition-colors duration-300', current && 'bg-brand-tint text-foreground', complete && 'text-muted-foreground', !current && !complete && 'text-muted-foreground')}>
                     <span className={cn('flex h-7 w-7 shrink-0 items-center justify-center rounded-full border-2 text-xs font-bold tabular-nums transition-colors duration-300', complete ? 'border-success bg-success text-success-foreground' : current ? 'border-brand bg-brand text-white shadow-[0_2px_0_var(--do-primary-ledge)]' : 'border-border-strong text-muted-foreground')}>
-                      {complete ? <Check className="h-3.5 w-3.5 motion-safe:animate-in zoom-in-50 duration-300 ease-overshoot" strokeWidth={3.5} aria-label={t('sparring.round.completeStatus', 'Complete')} /> : index + 1}
+                      {complete ? <Check className="success-pop h-3.5 w-3.5" strokeWidth={3.5} aria-label={t('sparring.round.completeStatus', 'Complete')} /> : index + 1}
                     </span>
                     <span className="min-w-0 flex-1">
                       <span className="block truncate font-bold">{t(`sparring.turns.${turn.id}`, turn.label)}</span>
diff --git a/src/components/features/sparring/SparringScorecard.tsx b/src/components/features/sparring/SparringScorecard.tsx
index 8cfd9caa2..c746edbb3 100644
--- a/src/components/features/sparring/SparringScorecard.tsx
+++ b/src/components/features/sparring/SparringScorecard.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { Owl, OwlAvatar } from '@/components/brand/Owl';
+import { CountUp } from '@/components/ui/count-up';
 import { useTranslation } from 'react-i18next';
 import { Award, BarChart3, Download, FileText, Lightbulb, Mic, RotateCcw, Sparkles, Target, UserRound, Check } from 'lucide-react';
 import { PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart, ResponsiveContainer, Tooltip } from 'recharts';
@@ -74,7 +75,7 @@ export function SparringScorecard({ session, scorecard, onRestart, onExport, onE
                   <h2 id="result-heading" className="mt-1 font-display text-2xl font-[600] text-heading">{winnerText}</h2>
                 </div>
               </div>
-              <Badge variant="outline" className={cn('rounded-full px-3 py-1.5 text-xs', winnerTone(scorecard.winner))}>{scorecard.winner === 'user' && <Check className="h-3.5 w-3.5" strokeWidth={3} aria-hidden="true" />}{scorecard.winner === 'tie' ? t('sparring.scorecard.tied', 'Tied') : scorecard.winner === 'user' ? t('sparring.scorecard.winner', 'Winner') : t('sparring.scorecard.keepTraining', 'Keep training')}</Badge>
+              <Badge variant="outline" className={cn('rounded-full px-3 py-1.5 text-xs', winnerTone(scorecard.winner))}>{scorecard.winner === 'user' && <Check className="success-pop h-3.5 w-3.5 [--success-delay:700ms]" strokeWidth={3} aria-hidden="true" />}{scorecard.winner === 'tie' ? t('sparring.scorecard.tied', 'Tied') : scorecard.winner === 'user' ? t('sparring.scorecard.winner', 'Winner') : t('sparring.scorecard.keepTraining', 'Keep training')}</Badge>
             </div>
             <div className="mt-8 grid gap-4 sm:grid-cols-2">
               <ScoreTotal label={t('sparring.scorecard.yourScore', 'Your score')} score={scorecard.userScore} icon={<UserRound className="h-4 w-4" aria-hidden="true" />} isWinner={scorecard.winner === 'user'} topScoreLabel={t('sparring.scorecard.topScore', 'Top score')} />
@@ -196,7 +197,7 @@ function ScoreTotal({ label, score, icon, isWinner, topScoreLabel }: { label: st
   return (
     <div className={cn('rounded-lg border-2 p-4', isWinner ? 'border-brand bg-brand-tint shadow-[0_4px_0_var(--do-primary-tint-border)]' : 'border-border bg-card')}>
       <div className="flex items-center gap-2 text-sm font-bold text-muted-foreground">{icon}{label}{isWinner && <span className="ml-auto text-xs font-extrabold text-primary">{topScoreLabel}</span>}</div>
-      <p className="mt-2 font-display text-5xl font-[600] tracking-[-0.02em] text-heading tabular-nums">{score}<span className="ml-1 text-lg font-normal text-muted-foreground">/100</span></p>
+      <p className="mt-2 font-display text-5xl font-[600] tracking-[-0.02em] text-heading tabular-nums"><CountUp value={score} /><span className="ml-1 text-lg font-normal text-muted-foreground">/100</span></p>
     </div>
   );
 }
diff --git a/src/components/features/tools/live-draft.tsx b/src/components/features/tools/live-draft.tsx
index 3652fa9e4..7c97962ce 100644
--- a/src/components/features/tools/live-draft.tsx
+++ b/src/components/features/tools/live-draft.tsx
@@ -82,7 +82,7 @@ export function LiveToolRun({
   return (
     <div data-testid="live-draft" className="space-y-4" aria-busy="true">
       <div className="flex items-center gap-3 rounded-lg border-2 border-brand-tint-border bg-brand-tint px-3 py-2.5">
-        <OwlAvatar pose={pose ?? (writing ? 'point' : 'idea')} size={36} />
+        <OwlAvatar pose={pose ?? (writing ? 'point' : 'idea')} size={36} blink />
         <p className="flex min-w-0 flex-1 flex-wrap items-center gap-x-2 text-sm font-bold text-foreground">
           <span role="status" aria-live="polite">{writing ? t('tools.live.writingLive', 'Writing live') : status}</span>
           <ThinkingDots className="text-primary" />
diff --git a/src/components/features/tools/result-actions.tsx b/src/components/features/tools/result-actions.tsx
index 39606d5b6..91e65021f 100644
--- a/src/components/features/tools/result-actions.tsx
+++ b/src/components/features/tools/result-actions.tsx
@@ -37,7 +37,7 @@ export function SaveResultAction({ saved, onSave, disabled = false }: { saved: b
   if (saved) {
     return (
       <span className="inline-flex h-9 items-center gap-1.5 px-2 text-sm text-muted-foreground" data-testid="result-saved">
-        <Check className="h-4 w-4 text-primary" aria-hidden="true" />
+        <Check className="success-pop h-4 w-4 text-primary" aria-hidden="true" />
         {t('resultActions.savedToHistory', 'Saved to history')}
       </span>
     );
diff --git a/src/components/features/tools/tool-run.tsx b/src/components/features/tools/tool-run.tsx
index 4c1e3393c..362937cef 100644
--- a/src/components/features/tools/tool-run.tsx
+++ b/src/components/features/tools/tool-run.tsx
@@ -105,7 +105,7 @@ export function ToolRunStatus({ label, onCancel, pose = 'idea' }: { label: strin
   return (
     <div className="flex min-h-[400px] flex-col items-center justify-center gap-4 rounded-xl border-2 border-dashed border-border-strong bg-card/60 p-8 text-center motion-safe:animate-in fade-in-0 duration-300">
       <span className="owl-bob">
-        <Owl pose={pose} size={120} priority />
+        <Owl pose={pose} size={120} priority breathe={false} />
       </span>
       <p className="flex flex-wrap items-center justify-center gap-x-2 gap-y-1 text-[0.9375rem] font-bold text-foreground">
         <span role="status" aria-live="polite">{label}</span>
diff --git a/src/components/landing/Hero.tsx b/src/components/landing/Hero.tsx
index c10028cc7..521e6e7b0 100644
--- a/src/components/landing/Hero.tsx
+++ b/src/components/landing/Hero.tsx
@@ -138,7 +138,7 @@ const HeroPreview = () => {
         <Reveal onLoad delay={0.1} className="relative mx-auto w-full max-w-2xl lg:mx-0 lg:max-w-none">
             <div className="absolute -inset-8 bg-linear-to-r from-plume-400/25 via-plume-200/20 to-[rgb(255_196_20/0.22)] blur-3xl" />
             {/* The owl points the visitor at the product. */}
-            <Owl pose="point" size={140} priority className="absolute -bottom-10 -left-6 z-20 hidden -scale-x-100 sm:block lg:-left-12" />
+            <Owl pose="point" size={140} priority breathe={false} className="absolute -bottom-10 -left-6 z-20 hidden -scale-x-100 sm:block lg:-left-12" />
             <div className="relative overflow-hidden rounded-xl border-2 border-border bg-card shadow-2xl">
                 {/* Browser chrome */}
                 <div className="flex items-center border-b-2 border-border px-5 py-3">
diff --git a/src/components/ui/count-up.tsx b/src/components/ui/count-up.tsx
new file mode 100644
index 000000000..faf630bd0
--- /dev/null
+++ b/src/components/ui/count-up.tsx
@@ -0,0 +1,16 @@
+import { useCountUp } from '@/hooks/use-count-up';
+
+/**
+ * A number that ticks up from 0 when it first appears. Screen readers get the final value
+ * straight away; the ticking digits are hidden from them. Give the parent `tabular-nums`
+ * so the digits keep their width while they count.
+ */
+export function CountUp({ value, durationMs }: { value: number; durationMs?: number }) {
+  const shown = useCountUp(value, durationMs);
+  return (
+    <>
+      <span aria-hidden="true">{shown}</span>
+      <span className="sr-only">{value}</span>
+    </>
+  );
+}
diff --git a/src/components/ui/loading-spinner.tsx b/src/components/ui/loading-spinner.tsx
index 91020d321..f475a162c 100644
--- a/src/components/ui/loading-spinner.tsx
+++ b/src/components/ui/loading-spinner.tsx
@@ -32,7 +32,7 @@ export function OwlLoader({ message, pose = 'idea', size = 96, className }: OwlL
   return (
     <div className={cn('flex flex-col items-center justify-center gap-3 text-center', className)}>
       <span className="owl-bob">
-        <Owl pose={pose} size={size} priority />
+        <Owl pose={pose} size={size} priority breathe={false} />
       </span>
       {message ? (
         <p className="flex items-center gap-2 text-sm font-bold text-muted-foreground" role="status" aria-live="polite">
diff --git a/src/components/ui/progress.tsx b/src/components/ui/progress.tsx
index c4fd99494..b41ecc1f9 100644
--- a/src/components/ui/progress.tsx
+++ b/src/components/ui/progress.tsx
@@ -5,8 +5,11 @@ import { cn } from "@/lib/utils";
 
 const Progress = React.forwardRef<
   React.ElementRef<typeof ProgressPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
->(({ className, value, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
+    /** Fill from empty once on mount: a finished result's score, not a live countdown. */
+    reveal?: boolean;
+  }
+>(({ className, value, reveal = false, ...props }, ref) => (
   <ProgressPrimitive.Root
     ref={ref}
     className={cn("relative h-3 w-full overflow-hidden rounded-full bg-surface-sunken ring-1 ring-inset ring-border", className)}
@@ -14,7 +17,7 @@ const Progress = React.forwardRef<
     {...props}
   >
     <ProgressPrimitive.Indicator
-      className="progress-fill h-full w-full flex-1 rounded-full bg-brand transition-transform duration-300 ease-out-strong"
+      className={cn("progress-fill h-full w-full flex-1 rounded-full bg-brand transition-transform duration-300 ease-out-strong", reveal && "progress-reveal")}
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>
diff --git a/src/hooks/use-count-up.ts b/src/hooks/use-count-up.ts
new file mode 100644
index 000000000..169931363
--- /dev/null
+++ b/src/hooks/use-count-up.ts
@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react';
+
+const easeOutCubic = (t: number) => 1 - (1 - t) ** 3;
+
+/**
+ * Counts from 0 up to `target` once when a result appears, easing out over `durationMs`.
+ * With reduced motion, or in a browser without requestAnimationFrame, it shows the target at once.
+ * A changed target counts again from 0. Render the target itself for assistive tech and
+ * anything that depends on the value (colour thresholds); this is only what the eye sees.
+ */
+export function useCountUp(target: number, durationMs = 900): number {
+  const [shown, setShown] = useState(() => (shouldCount() ? 0 : target));
+
+  useEffect(() => {
+    if (!shouldCount()) {
+      setShown(target);
+      return;
+    }
+    let frame = 0;
+    const startedAt = performance.now();
+    const tick = (now: number) => {
+      const progress = Math.min(1, (now - startedAt) / durationMs);
+      setShown(Math.round(target * easeOutCubic(progress)));
+      if (progress < 1) frame = requestAnimationFrame(tick);
+    };
+    frame = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frame);
+  }, [target, durationMs]);
+
+  return shown;
+}
+
+function shouldCount() {
+  return typeof window !== 'undefined'
+    && typeof window.requestAnimationFrame === 'function'
+    && typeof window.matchMedia === 'function'
+    && !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
diff --git a/src/index.css b/src/index.css
index f12d209aa..daa3932ae 100644
--- a/src/index.css
+++ b/src/index.css
@@ -820,7 +820,8 @@ passes AA on every surface; buttons fill with --do-primary (#0A6FF0) and white t
     @apply text-balance font-display text-3xl font-[600] leading-tight tracking-[-0.015em] text-heading md:text-4xl md:leading-10 lg:text-5xl lg:leading-none lg:tracking-[-0.02em];
   }
 
-  /* Backgrounds are static: nothing on the landing page moves on its own. */
+  /* Backgrounds are static: nothing on the landing page moves on its own. The hero owl waves once
+     as it arrives and blinks now and then; it does not breathe there. */
   .animated-grid {
     background-image:
       linear-gradient(hsl(var(--border) / 0.8) 1px, transparent 1px),
@@ -1309,6 +1310,181 @@ passes AA on every surface; buttons fill with --do-primary (#0A6FF0) and white t
   }
 }
 
+/* The owl's motion (components/brand/Owl.tsx). Every move is a transform on its own layer, so
+   nothing reflows, and every move is a keyframe animation, so reduced motion (above) stops it. */
+
+/* Lids: flat until a blink pulls them down over the eye for about a tenth of a second. */
+.owl-lid {
+  position: absolute;
+  border-radius: 50%;
+  background: #1E8DFB;
+  box-shadow: inset 0 calc(var(--owl-lash) * -1.6) 0 #0B2A6E;
+  transform: scaleY(0);
+  transform-origin: 50% 0;
+  animation: owl-blink var(--owl-blink-period, 5.6s) linear var(--owl-blink-delay, 0s) infinite;
+  pointer-events: none;
+}
+
+@keyframes owl-blink {
+  0%, 93%, 100% {
+    transform: scaleY(0);
+  }
+  95% {
+    transform: scaleY(1);
+  }
+  97% {
+    transform: scaleY(0.15);
+  }
+}
+
+/* A slow breath, anchored at the feet. */
+.owl-breathe {
+  transform-origin: 50% 92%;
+  animation: owl-breathe 3.8s var(--do-ease-standard) infinite;
+}
+
+@keyframes owl-breathe {
+  0%, 100% {
+    transform: scale(1, 1);
+  }
+  50% {
+    transform: scale(1.012, 1.028);
+  }
+}
+
+/* Hovering the owl makes it hop once. */
+@media (hover: hover) and (pointer: fine) {
+  .owl:hover > .owl-body {
+    animation: owl-hop 560ms var(--do-ease-standard) both;
+  }
+}
+
+/* One-shot gestures, played when the owl arrives or changes pose. */
+.owl-gesture-wave {
+  transform-origin: 50% 90%;
+  animation: owl-wave 900ms var(--do-ease-standard) 120ms backwards;
+}
+
+.owl-gesture-cheer {
+  transform-origin: 50% 100%;
+  animation: owl-cheer 1100ms var(--do-ease-standard) 80ms backwards;
+}
+
+.owl-gesture-hop {
+  transform-origin: 50% 100%;
+  animation: owl-hop 600ms var(--do-ease-standard) 80ms backwards;
+}
+
+@keyframes owl-wave {
+  0% { transform: rotate(0deg); }
+  18% { transform: rotate(-7deg); }
+  38% { transform: rotate(6deg); }
+  58% { transform: rotate(-4deg); }
+  78% { transform: rotate(2deg); }
+  100% { transform: none; }
+}
+
+/* Two jumps with squash and stretch. */
+@keyframes owl-cheer {
+  0% { transform: translateY(0) scale(1, 1); }
+  10% { transform: translateY(0) scale(1.07, 0.9); }
+  28% { transform: translateY(-14%) scale(0.95, 1.07); }
+  44% { transform: translateY(0) scale(1.06, 0.93); }
+  58% { transform: translateY(-7%) scale(0.98, 1.03) rotate(-3deg); }
+  74% { transform: translateY(0) scale(1.03, 0.97); }
+  88% { transform: translateY(0) scale(0.995, 1.005); }
+  100% { transform: none; }
+}
+
+@keyframes owl-hop {
+  0% { transform: translateY(0) scale(1, 1); }
+  18% { transform: translateY(0) scale(1.05, 0.93); }
+  45% { transform: translateY(-8%) scale(0.97, 1.04); }
+  72% { transform: translateY(0) scale(1.03, 0.97); }
+  100% { transform: none; }
+}
+
+/* An app page rises into place once when it opens (App.tsx RouteContent). It ends on
+   `transform: none`, so fixed and sticky children behave as before once it has played. */
+.page-enter {
+  animation: page-enter 280ms var(--motion-ease-out-strong) backwards;
+}
+
+@keyframes page-enter {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+/* Sections of a page follow each other in, 60ms apart. */
+.enter-stagger > * {
+  animation: page-enter 360ms var(--motion-ease-out-strong) backwards;
+}
+
+.enter-stagger > :nth-child(2) { animation-delay: 60ms; }
+.enter-stagger > :nth-child(3) { animation-delay: 120ms; }
+.enter-stagger > :nth-child(4) { animation-delay: 180ms; }
+.enter-stagger > :nth-child(5) { animation-delay: 240ms; }
+.enter-stagger > :nth-child(n + 6) { animation-delay: 300ms; }
+
+/* Success: the check's badge pops on the overshoot curve and the tick draws itself in.
+   Apply to a lucide Check (its path is about 23 units long) or to its badge. */
+.success-pop {
+  animation: success-pop 420ms var(--do-ease-overshoot) var(--success-delay, 0ms) backwards;
+}
+
+.success-pop svg.lucide-check path,
+svg.lucide-check.success-pop path,
+[data-sonner-toast][data-type='success'] [data-icon] svg.lucide-check path {
+  stroke-dasharray: 24;
+  animation: check-draw 360ms var(--do-ease-decelerate) calc(var(--success-delay, 0ms) + 140ms) backwards;
+}
+
+@keyframes success-pop {
+  0% {
+    transform: scale(0.4);
+    opacity: 0;
+  }
+  60% {
+    transform: scale(1.14);
+    opacity: 1;
+  }
+  100% {
+    transform: none;
+  }
+}
+
+@keyframes check-draw {
+  from {
+    stroke-dashoffset: 24;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+/* A success toast's icon pops the same way as it arrives. */
+[data-sonner-toast][data-type='success'] [data-icon] {
+  animation: success-pop 420ms var(--do-ease-overshoot) 120ms backwards;
+}
+
+/* A result's progress bar fills from empty once, after the result appears (Progress `reveal`).
+   With no `to` frame it ends on the bar's own value. */
+.progress-reveal {
+  animation: progress-reveal 900ms var(--motion-ease-out-strong) 150ms backwards;
+}
+
+@keyframes progress-reveal {
+  from {
+    transform: translateX(-100%);
+  }
+}
+
 @keyframes motion-fade-out {
   from {
     opacity: 1;
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index c2cef9c77..678d4f95f 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -17,7 +17,7 @@ function ToolGroup({ title, tools }: { title: string; tools: readonly Tool[] })
       <CardHeader className="pb-3">
         <CardTitle>{title}</CardTitle>
       </CardHeader>
-      <CardContent className="px-3 pb-3 pt-0">
+      <CardContent className="enter-stagger px-3 pb-3 pt-0">
         {tools.map((tool) => <ToolLink key={tool.key} tool={tool} variant="row" tourId={`mode-${tool.key}`} />)}
       </CardContent>
     </Card>
@@ -92,7 +92,8 @@ export default function HomePage() {
 
   return (
     <div className="container px-4 py-8">
-      <div className="mx-auto min-h-[72vh] max-w-5xl">
+      {/* The header, current debate, tool groups and utilities follow each other in. */}
+      <div className="enter-stagger mx-auto min-h-[72vh] max-w-5xl">
         <PageHeader title={t('home.heading', 'What are you working on?')} />
 
         <CurrentDebateSummary t={t} />