Implemented the PD-009 refinement.

PlotLine/wwwroot/css/site.css

@@ -2439,24 +2439,43 @@ body.timeline-inspector-resizing {
 
 .timeline-navigation-card {
   display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-areas:
-  gap: 14px;
+    "icon copy"
+    "icon actions";
+  grid-template-columns: auto minmax(0, 620px);
+  gap: 8px 14px;
   align-items: center;
+  justify-content: center;
   border: 1px solid rgba(47, 111, 99, 0.42);
   border-left: 5px solid var(--plotline-accent);
   border-radius: 8px;
   margin: 0 0 12px;
   padding: 14px 16px;
+  max-height: 280px;
+  overflow: hidden;
   color: var(--plotline-ink);
   background: linear-gradient(135deg, rgba(238, 245, 242, 0.98), rgba(255, 255, 255, 0.94));
   box-shadow: 0 10px 26px rgba(30, 37, 43, 0.08);
+  opacity: 1;
+  transform: translateY(0);
+  transition: opacity 1.15s ease, max-height 1.2s ease, margin 1.2s ease, padding 1.2s ease, transform 1.15s ease;
 }
 
 .timeline-navigation-card[hidden] {
   display: none;
 }
 
+.timeline-navigation-card.is-dismissing {
+  margin-bottom: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  max-height: 0;
+  opacity: 0;
+  transform: translateY(-6px);
+}
+
 .timeline-navigation-card-icon {
+  grid-area: icon;
   display: grid;
   place-items: center;
   width: 42px;
@@ -2468,6 +2487,11 @@ body.timeline-inspector-resizing {
   font-weight: 900;
 }
 
+.timeline-navigation-card-copy {
+  grid-area: copy;
+  text-align: center;
+}
+
 .timeline-navigation-card-copy h2 {
   margin: 0 0 6px;
   color: var(--plotline-accent-dark);
@@ -2482,10 +2506,11 @@ body.timeline-inspector-resizing {
 }
 
 .timeline-navigation-card-actions {
+  grid-area: actions;
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
-  justify-content: flex-end;
+  justify-content: center;
 }
 
 .timeline-horizontal-overflow {
@@ -2529,6 +2554,12 @@ body.timeline-inspector-resizing {
   box-shadow: inset 18px 0 18px -20px rgba(244, 234, 220, 0.55), inset -18px 0 18px -20px rgba(244, 234, 220, 0.55);
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .timeline-navigation-card {
+    transition: opacity 0.12s ease;
+  }
+}
+
 .timeline-scene-card.filter-dim,
 .timeline-scene-card.focus-dim,
 .lane-dim {
@@ -4118,6 +4149,9 @@ body.dragging-location [data-drag-type="location"] {
   }
 
   .timeline-navigation-card {
+    grid-template-areas:
+      "copy"
+      "actions";
     grid-template-columns: 1fr;
   }
 
@@ -4126,7 +4160,7 @@ body.dragging-location [data-drag-type="location"] {
   }
 
   .timeline-navigation-card-actions {
-    justify-content: flex-start;
+    justify-content: center;
   }
 
   .story-bible-search,

PlotLine/wwwroot/js/site.js

@@ -1260,9 +1260,32 @@
     let dismissedForPage = false;
     let isDemoing = false;
     let isArmed = false;
+    let dismissTimer = null;
     const knownLeft = new WeakMap();
 
     const rememberPosition = (container) => knownLeft.set(container, container.scrollLeft);
+    const prefersReducedMotion = () => window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches;
+
+    const showCard = () => {
+      window.clearTimeout(dismissTimer);
+      card.hidden = false;
+      card.classList.remove("is-dismissing");
+    };
+
+    const hideCard = (animate = false) => {
+      window.clearTimeout(dismissTimer);
+      if (!animate || prefersReducedMotion() || card.hidden) {
+        card.classList.remove("is-dismissing");
+        card.hidden = true;
+        return;
+      }
+
+      card.classList.add("is-dismissing");
+      dismissTimer = window.setTimeout(() => {
+        card.hidden = true;
+        card.classList.remove("is-dismissing");
+      }, 1300);
+    };
 
     const updateEdgeIndicators = (container) => {
       const hasOverflow = hasHorizontalOverflow(container);
@@ -1274,13 +1297,17 @@
 
     const updateGuidanceState = () => {
       const shouldShow = hasHorizontalOverflow(primaryScrollContainer()) && !readDiscovered() && !dismissedForPage;
-      card.hidden = !shouldShow;
+      if (shouldShow) {
+        showCard();
+      } else if (!card.classList.contains("is-dismissing")) {
+        hideCard(false);
+      }
       allScrollContainers().forEach(updateEdgeIndicators);
     };
 
     const markDiscovered = () => {
       dismissedForPage = true;
-      card.hidden = true;
+      hideCard(true);
       try {
         localStorage.setItem(navigationDiscoveryKey, "true");
       } catch {