diff --git a/docs/design/dd-spotlight-grid.md b/docs/design/dd-spotlight-grid.md
index 7517ecf..ece3f66 100644
--- a/docs/design/dd-spotlight-grid.md
+++ b/docs/design/dd-spotlight-grid.md
@@ -12,7 +12,7 @@ In the browse lens:
 
 - Each entity renders as a compact card (name, classification badge, group accent, PK, column count) on a responsive CSS grid, grouped under the existing group headers.
 - Hovering a card spotlights it: all unconnected cards dim; SVG leader lines are drawn from the card to every *connected, on-screen* card, labeled with the relationship predicate and cardinality, with direction encoded by arrowhead and color.
-- Connections to *off-screen* cards render as chips on the spotlighted card ("↓ Invoice · bills") that scroll to and flash the target.
+- Connections to *off-screen* cards render as chips on the spotlighted card ("↓ Invoice · bills") that smoothly scroll to the target, then flash it only after the scroll settles so the attention cue is visible.
 - Clicking a card pins the spotlight (survives mouse-out); Esc or clicking empty grid releases it.
 
 The predicates are the payoff: a spotlit `Party` literally reads as business sentences radiating outward — `makes →` to `Payment`, `← is owned by` from `Account`. This is the project's predicate philosophy made visible (predicates encode business language, not ORM verbs).
diff --git a/docs/spec/dd-spotlight-grid.md b/docs/spec/dd-spotlight-grid.md
index f1ca4d8..683352e 100644
--- a/docs/spec/dd-spotlight-grid.md
+++ b/docs/spec/dd-spotlight-grid.md
@@ -120,7 +120,7 @@ The grid is ordered by group then alphabetically, not by connectivity, so a node
 
 ### Off-screen chips
 
-- Rendered on the active card: one chip per off-screen connection, `<arrow> <Name> · <label>` where the arrow glyph is ↑/↓ by target position. FK connections use the predicate (`fwd`/`rev`, `fwd ⇄ rev` for a both-bundle); flow connections use the data payload. Click scrolls the target card into view (`scrollIntoView` smooth, block center) and flashes it (temporary CSS class, animation ~1.2s, class removed on animationend).
+- Rendered on the active card: one chip per off-screen connection, `<arrow> <Name> · <label>` where the arrow glyph is ↑/↓ by target position. FK connections use the predicate (`fwd`/`rev`, `fwd ⇄ rev` for a both-bundle); flow connections use the data payload. Click smoothly scrolls the target card into view (`scrollIntoView`, block center), using instant scrolling when the user prefers reduced motion. The temporary flash class is added only after the dictionary scroll position has settled and the target intersects the scrollport. It pulses three times over two seconds, then is removed on `animationend`. A newer chip click cancels any pending or active flash from the previous navigation.
 - Chips do not change card layout of *other* cards (no grid reflow on hover); they overlay or extend only the active card.
 
 ### CSS — `src/app/styles.css`
@@ -149,7 +149,7 @@ The visual test `test/visual/test-dd-spotlight-grid.ts` (Playwright, `models/key
 | CP2 | Lens toggle + GridCard + grid rendering + `onOpenEntity` wiring. Visual test created with assertions: toggle renders in sticky bar; browse lens shows a grid card per entity (count vs `/api/model` nodes); search filters grid cards; lens persists across reload (localStorage); print emulation (`page.emulateMedia({ media: 'print' })`) shows read-lens DOM; ⓘ opens entity modal | typecheck (src/ adds no new errors) + `bun test/visual/test-dd-spotlight-grid.ts` |
 | CP3 | Spotlight state + dimming. Test extended: hover a known entity and assert the lit set is EXACTLY {active} ∪ connected ids — compute the expected set in-page from `window.__MODEL__`-derived edges (or fetch `/api/model`), not hardcoded — and all other cards carry the dim class; pin survives mouse-out; Esc releases; empty-grid click releases; lens switch + search change clear pin. This count assertion is the validation gate for the design's "Known tension" (dimming makes line crossings tolerable) | `bun test/visual/test-dd-spotlight-grid.ts` |
 | CP4 | `SpotlightOverlay` leader lines. Test extended: `<path>` count equals on-screen connection count for a pinned entity; predicate label text present (e.g. a known predicate from key-inherited); distinct stroke colors for out vs in; anchors track a window resize (resize viewport, assert line endpoint within tolerance of card rect) | `bun test/visual/test-dd-spotlight-grid.ts` |
-| CP5 | Off-screen chips. Test extended: pin an entity with off-screen connections; chip rendered with arrow + name + predicate; click scrolls target into scrollport and flash class appears then clears | `bun test/visual/test-dd-spotlight-grid.ts` |
+| CP5 | Off-screen chips. Test extended: pin an entity with off-screen connections; chip rendered with arrow + name + predicate; click scrolls target into the scrollport; flash is absent while scrolling, appears after scroll settlement, then clears | `bun test/visual/test-dd-spotlight-grid.ts` |
 | CP6 | Full visual review: run the complete script; capture + REVIEW screenshots dark + light (spotlight active, pinned, chips visible); confirm read lens byte-identical behavior (CP9 highlight + CP10 print tests still pass) | `bun test/visual/test-dd-spotlight-grid.ts` + `bun test/visual/test-cp9-dd-search-highlight.ts` + screenshots reviewed |
 | CP7 | Docs: CLAUDE.md feature-map row — Feature: "DD browse lens: spotlight grid (cards, hover/pin spotlight, predicate leader lines, off-screen chips)", Design: `dd-spotlight-grid`, Spec: `dd-spotlight-grid`, Guide: `—`, Skill: `—` | row present; `bun run typecheck` (src/ adds no new errors) + full `bun run test` |
 
@@ -213,7 +213,7 @@ Shipped CP1–CP7 via the autopilot subagent loop (worktree `dd-spotlight-grid`)
 - **CP2** `GridCard.tsx` + lens toggle in `DictionaryView` + `onOpenEntity` wiring in `App.tsx`. Browse/read lenses, localStorage `ignatius-dict-lens`, print forces read. Findings folded: print save/restore resets `savedLensRef` after restore; reader legend gated to read lens; ⓘ-modal test assertion tightened to `.modal-backdrop`.
 - **CP3** spotlight state + dimming. Blocking finding fixed: dropped `pointer-events: none` from the dim class (dimmed cards stay interactive — hover retargets, ⓘ still opens); spotlight state moved above `switchLens`; `hoverId` cleared on lens switch.
 - **CP4** `SpotlightOverlay.tsx` — leader lines, amber out / teal in (theme vars `--spotlight-line-out`/`--spotlight-line-in`, dark+light), arrowheads encode direction (`auto-start-reverse` so in-arrows point at the active card), midpoint pill stacks one predicate label per bundled edge with a parent-first cardinality chip (the always-on placement here was **superseded by CP14 hover-reveal** — pills now hidden by default, revealed on connected-card hover); rAF-throttled anchoring on scroll/resize/ResizeObserver. Blocking finding fixed: in-arrowhead orientation. Added per-path stroke-mapping + rev-text + cardinality-orientation assertions.
-- **CP5** off-screen chips — connections outside the scrollport render as chips (arrow + name + predicate; `fwd ⇄ rev` for a both-bundle) instead of lines; click scrolls + flashes the target; a connection is exactly line-or-chip via a shared on-screen set.
+- **CP5** off-screen chips — connections outside the scrollport render as chips (arrow + name + predicate; `fwd ⇄ rev` for a both-bundle) instead of lines; click scrolls the target, waits for the dictionary scroll position to settle, then flashes the now-visible card; a connection is exactly line-or-chip via a shared on-screen set.
 - **CP6** light-mode visual coverage added to the test (theme toggled via the real `.theme-toggle`); read-lens regressions (CP9 search highlight, CP10 print, sticky-search + debounce) all still PASS.
 - **CP7** CLAUDE.md feature-map row + this log.
 
diff --git a/src/app/components/entity/SpotlightOverlay.tsx b/src/app/components/entity/SpotlightOverlay.tsx
index 74da231..dc4be85 100644
--- a/src/app/components/entity/SpotlightOverlay.tsx
+++ b/src/app/components/entity/SpotlightOverlay.tsx
@@ -485,6 +485,97 @@ export function SpotlightOverlay({
 
   useEffect(() => {
     const NS = 'http://www.w3.org/2000/svg';
+    const SCROLL_SETTLE_MS = 100;
+    const SCROLL_SETTLE_TIMEOUT_MS = 5_000;
+    const FLASH_CLASS = 'dict-grid-card--flash';
+    let scrollSettleRaf: number | null = null;
+    let flashingCard: HTMLElement | null = null;
+    let flashEndHandler: ((event: AnimationEvent) => void) | null = null;
+
+    function clearActiveFlash() {
+      if (flashingCard !== null) {
+        if (flashEndHandler !== null) {
+          flashingCard.removeEventListener('animationend', flashEndHandler);
+        }
+        flashingCard.classList.remove(FLASH_CLASS);
+      }
+      flashingCard = null;
+      flashEndHandler = null;
+    }
+
+    function cancelPendingFlash() {
+      if (scrollSettleRaf !== null) {
+        cancelAnimationFrame(scrollSettleRaf);
+        scrollSettleRaf = null;
+      }
+    }
+
+    function flashCard(targetCard: HTMLElement) {
+      clearActiveFlash();
+      flashingCard = targetCard;
+      flashEndHandler = () => {
+        targetCard.classList.remove(FLASH_CLASS);
+        if (flashingCard === targetCard) {
+          flashingCard = null;
+          flashEndHandler = null;
+        }
+      };
+
+      targetCard.classList.add(FLASH_CLASS);
+      targetCard.addEventListener('animationend', flashEndHandler, { once: true });
+    }
+
+    function scrollToCardAndFlash(targetCard: HTMLElement, scrollport: HTMLElement) {
+      cancelPendingFlash();
+      clearActiveFlash();
+
+      const startedAt = performance.now();
+      let lastMovementAt = startedAt;
+      let previousScrollLeft = scrollport.scrollLeft;
+      let previousScrollTop = scrollport.scrollTop;
+
+      const scrollBehavior = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+        ? 'auto'
+        : 'smooth';
+      targetCard.scrollIntoView({ behavior: scrollBehavior, block: 'center' });
+
+      function waitForScrollToSettle(now: number) {
+        const currentScrollLeft = scrollport.scrollLeft;
+        const currentScrollTop = scrollport.scrollTop;
+        if (
+          currentScrollLeft !== previousScrollLeft
+          || currentScrollTop !== previousScrollTop
+        ) {
+          previousScrollLeft = currentScrollLeft;
+          previousScrollTop = currentScrollTop;
+          lastMovementAt = now;
+        }
+
+        const targetRect = targetCard.getBoundingClientRect();
+        const scrollportRect = scrollport.getBoundingClientRect();
+        const targetIsVisible =
+          targetRect.bottom >= scrollportRect.top
+          && targetRect.top <= scrollportRect.bottom
+          && targetRect.right >= scrollportRect.left
+          && targetRect.left <= scrollportRect.right;
+
+        if (targetIsVisible && now - lastMovementAt >= SCROLL_SETTLE_MS) {
+          scrollSettleRaf = null;
+          flashCard(targetCard);
+          return;
+        }
+
+        if (now - startedAt >= SCROLL_SETTLE_TIMEOUT_MS) {
+          scrollSettleRaf = null;
+          return;
+        }
+
+        scrollSettleRaf = requestAnimationFrame(waitForScrollToSettle);
+      }
+
+      scrollSettleRaf = requestAnimationFrame(waitForScrollToSettle);
+    }
+
 
     function renderPredicatePill(
       svg: SVGSVGElement,
@@ -749,11 +840,9 @@ export function SpotlightOverlay({
           e.stopPropagation();
           const targetCard = resolveOtherCard(targetId);
           if (targetCard === null) return;
-          targetCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
-          targetCard.classList.add('dict-grid-card--flash');
-          targetCard.addEventListener('animationend', () => {
-            targetCard.classList.remove('dict-grid-card--flash');
-          }, { once: true });
+          const scrollport = document.querySelector<HTMLElement>('[data-ignatius="dict-view"]');
+          if (scrollport === null) return;
+          scrollToCardAndFlash(targetCard, scrollport);
         });
 
         container.appendChild(btn);
@@ -1073,6 +1162,8 @@ export function SpotlightOverlay({
         cancelAnimationFrame(rafRef.current);
         rafRef.current = null;
       }
+      cancelPendingFlash();
+      clearActiveFlash();
     };
   }, [activeId, connections, flowConnections, inheritedConnections, labelHoverCardId, gridContainerRef]);
 
diff --git a/src/app/styles.css b/src/app/styles.css
index 6f44b3b..314be94 100644
--- a/src/app/styles.css
+++ b/src/app/styles.css
@@ -2740,15 +2740,18 @@ a.dict-link-missing:hover {
   text-overflow: ellipsis;
 }
 
-/* Flash animation — added by chip click, removed on animationend. */
+/* Three attention pulses over two seconds; added after scrolling settles. */
 @keyframes spotlight-flash {
-  0%   { box-shadow: 0 0 0 3px var(--spotlight-line-out, #f59e0b), 0 0 12px 4px var(--spotlight-line-out, #f59e0b); }
-  60%  { box-shadow: 0 0 0 3px var(--spotlight-line-out, #f59e0b), 0 0 12px 4px var(--spotlight-line-out, #f59e0b); }
-  100% { box-shadow: none; }
+  0%, 100% { box-shadow: none; }
+  35% {
+    box-shadow:
+      0 0 0 3px var(--spotlight-line-out, #f59e0b),
+      0 0 12px 4px var(--spotlight-line-out, #f59e0b);
+  }
 }
 
 .dict-grid-card--flash {
-  animation: spotlight-flash 1.2s ease-out forwards;
+  animation: spotlight-flash 666.667ms ease-in-out 3 forwards;
 }
 
 /* ── Focus / isolate mode (CP15) ─────────────────────────────────────────── */
diff --git a/test/visual/test-dd-spotlight-grid.ts b/test/visual/test-dd-spotlight-grid.ts
index 1ed40eb..4a80863 100644
--- a/test/visual/test-dd-spotlight-grid.ts
+++ b/test/visual/test-dd-spotlight-grid.ts
@@ -1744,77 +1744,131 @@ try {
         }
         note(`OK CP5.3: Target "${chipTarget}" scrolled into scrollport after chip click`);
 
-        // Check for the flash class — it may already be removed if animationend fired.
-        // Check immediately after scroll (before animation ends).
-        // Re-scroll to off-screen position to re-trigger the test cleanly.
-        // We'll click the chip again and immediately check for the class within 100ms.
-        //
-        // Strategy: scroll back to the state where target is off-screen, then click again
-        // and immediately (within the animation duration of 1.2s) check for the class.
-        await page.evaluate(() => {
-          const dictView = document.querySelector('[data-ignatius="dict-view"]');
-          if (dictView) dictView.scrollTop = dictView.scrollHeight;
-        });
+        // Re-scroll to the farthest edge from the target so the second click
+        // exercises a long smooth scroll, then measure the flash against real
+        // scroll events rather than a fixed animation delay.
+        await page.evaluate((targetId: string) => {
+          const dictView = document.querySelector<HTMLElement>('[data-ignatius="dict-view"]');
+          const card = document.querySelector<HTMLElement>(
+            `.dict-grid-card[data-entity-id="${targetId}"]`,
+          );
+          if (!dictView || !card) return;
+          const targetCenter = card.offsetTop + card.offsetHeight / 2;
+          dictView.scrollTop = targetCenter < dictView.scrollHeight / 2
+            ? dictView.scrollHeight
+            : 0;
+        }, chipTarget);
         await page.waitForTimeout(500);
 
-        // Check if target is off-screen again.
         const targetOffScreen2 = await page.evaluate((targetId: string) => {
           const card = document.querySelector(`.dict-grid-card[data-entity-id="${targetId}"]`);
-          if (!card) return false;
           const scrollport = document.querySelector('[data-ignatius="dict-view"]');
-          if (!scrollport) return false;
+          if (!card || !scrollport) return false;
           const r = card.getBoundingClientRect();
           const s = scrollport.getBoundingClientRect();
           return r.bottom < s.top || r.top > s.bottom || r.right < s.left || r.left > s.right;
         }, chipTarget);
 
         if (targetOffScreen2) {
-          // Chip should still be visible (target is off-screen again).
-          const chipVisible2 = await page.locator('.spotlight-chips-container .spotlight-chip').count() > 0;
-          if (!chipVisible2) {
-            note('CP5.3: Chip disappeared after scrolling back — trying without flash assertion');
-          } else {
-            // Click via page.evaluate to bypass Playwright's viewport-check on
-            // position:fixed chips that may be positioned outside the viewport when
-            // the active card is off-screen (chips are anchored to the card's fixed pos).
-            await page.evaluate((tgt: string) => {
-              const chip = document.querySelector<HTMLElement>(
-                `.spotlight-chips-container .spotlight-chip[data-chip-target="${tgt}"]`
-              );
-              chip?.click();
-            }, chipTarget);
-            // Check for flash class within 300ms (well within the 1.2s animation).
-            await page.waitForTimeout(100);
-            const hasFlash = await page.evaluate((targetId: string) => {
-              const card = document.querySelector(`.dict-grid-card[data-entity-id="${targetId}"]`);
-              return card?.classList.contains('dict-grid-card--flash') ?? false;
-            }, chipTarget);
-            note(`CP5.3: Flash class present within 100ms of click: ${hasFlash}`);
-
-            if (!hasFlash) {
-              await shot('FAIL-cp5-no-flash.png');
-              fail(`CP5.3: .dict-grid-card--flash not found on "${chipTarget}" within 100ms of chip click`);
-            }
-            note('OK CP5.3: .dict-grid-card--flash class present after chip click');
-
-            // Wait for the flash animation to complete (~1.2s) and verify class is removed.
-            await page.waitForTimeout(1500);
-            const flashRemoved = await page.evaluate((targetId: string) => {
-              const card = document.querySelector(`.dict-grid-card[data-entity-id="${targetId}"]`);
-              return !(card?.classList.contains('dict-grid-card--flash') ?? true);
-            }, chipTarget);
-            note(`CP5.3: Flash class removed after animation: ${flashRemoved}`);
-
-            if (!flashRemoved) {
-              await shot('FAIL-cp5-flash-not-removed.png');
-              fail(`CP5.3: .dict-grid-card--flash not removed after animation (~1.2s) on "${chipTarget}"`);
-            }
-            note('OK CP5.3: Flash class removed on animationend');
+          const flashTiming = await page.evaluate(async (targetId: string) => {
+            const scrollport = document.querySelector<HTMLElement>('[data-ignatius="dict-view"]');
+            const card = document.querySelector<HTMLElement>(
+              `.dict-grid-card[data-entity-id="${targetId}"]`,
+            );
+            const chip = document.querySelector<HTMLElement>(
+              `.spotlight-chips-container .spotlight-chip[data-chip-target="${targetId}"]`,
+            );
+            if (!scrollport || !card || !chip) return null;
+
+            return await new Promise<{
+              flashedWithin50ms: boolean;
+              quietBeforeFlashMs: number;
+              targetVisibleAtFlash: boolean;
+            } | null>((resolve) => {
+              let lastScrollAt = performance.now();
+              let flashedWithin50ms = false;
+              let initialWindowElapsed = false;
+              let flashResult: {
+                quietBeforeFlashMs: number;
+                targetVisibleAtFlash: boolean;
+              } | null = null;
+
+              const finish = () => {
+                if (!initialWindowElapsed || flashResult === null) return;
+                resolve({ flashedWithin50ms, ...flashResult });
+              };
+              const onScroll = () => { lastScrollAt = performance.now(); };
+              scrollport.addEventListener('scroll', onScroll, { passive: true });
+
+              const observer = new MutationObserver(() => {
+                if (!card.classList.contains('dict-grid-card--flash')) return;
+                const cardRect = card.getBoundingClientRect();
+                const scrollportRect = scrollport.getBoundingClientRect();
+                flashResult = {
+                  quietBeforeFlashMs: performance.now() - lastScrollAt,
+                  targetVisibleAtFlash:
+                    cardRect.bottom >= scrollportRect.top
+                    && cardRect.top <= scrollportRect.bottom
+                    && cardRect.right >= scrollportRect.left
+                    && cardRect.left <= scrollportRect.right,
+                };
+                observer.disconnect();
+                scrollport.removeEventListener('scroll', onScroll);
+                finish();
+              });
+              observer.observe(card, { attributes: true, attributeFilter: ['class'] });
+
+              setTimeout(() => {
+                flashedWithin50ms = card.classList.contains('dict-grid-card--flash');
+                initialWindowElapsed = true;
+                finish();
+              }, 50);
+
+              setTimeout(() => {
+                observer.disconnect();
+                scrollport.removeEventListener('scroll', onScroll);
+                resolve(null);
+              }, 5_000);
+
+              chip.click();
+            });
+          }, chipTarget);
+
+          if (flashTiming === null) {
+            await shot('FAIL-cp5-no-flash.png');
+            fail(`CP5.3: .dict-grid-card--flash never appeared on "${chipTarget}" after scrolling`);
+          }
+          const observedFlashTiming = flashTiming!;
+          note(`CP5.3: Flash present within 50ms of click: ${observedFlashTiming.flashedWithin50ms}`);
+          note(`CP5.3: Scroll quiet before flash: ${observedFlashTiming.quietBeforeFlashMs.toFixed(1)}ms`);
 
-            await shot('30-cp5-flash-cleared.png');
+          if (observedFlashTiming.flashedWithin50ms) {
+            await shot('FAIL-cp5-flash-before-scroll.png');
+            fail(`CP5.3: "${chipTarget}" flashed before its smooth scroll could settle`);
+          }
+          if (observedFlashTiming.quietBeforeFlashMs < 80) {
+            await shot('FAIL-cp5-flash-during-scroll.png');
+            fail(`CP5.3: "${chipTarget}" flashed only ${observedFlashTiming.quietBeforeFlashMs.toFixed(1)}ms after the last scroll event`);
+          }
+          if (!observedFlashTiming.targetVisibleAtFlash) {
+            await shot('FAIL-cp5-flash-offscreen.png');
+            fail(`CP5.3: "${chipTarget}" was not visible when its flash started`);
+          }
+          note('OK CP5.3: Flash starts after scroll settlement with the target visible');
+
+          await page.waitForTimeout(2300);
+          const flashRemoved = await page.evaluate((targetId: string) => {
+            const card = document.querySelector(`.dict-grid-card[data-entity-id="${targetId}"]`);
+            return !(card?.classList.contains('dict-grid-card--flash') ?? true);
+          }, chipTarget);
+          if (!flashRemoved) {
+            await shot('FAIL-cp5-flash-not-removed.png');
+            fail(`CP5.3: .dict-grid-card--flash not removed after its two-second animation on "${chipTarget}"`);
           }
+          note('OK CP5.3: Flash class removed on animationend');
+          await shot('30-cp5-flash-cleared.png');
         } else {
-          note('CP5.3: Target back on-screen after scroll — flash assertion covered by first click');
+          note('CP5.3: Target remained on-screen at both scroll extremes — settlement assertion skipped');
         }
       }
     } else {