fix(story): remove stage bar and retune sync

Author: sankalpgambhir

index.html

@@ -207,34 +207,6 @@ <h2>Europe is not collapsing. Listed-market power moved elsewhere.</h2>
           </div>
 
           <section class="map-panel story-stage" aria-label="Interactive story stage">
-          <div class="section-kicker section-kicker--panel">
-            <p class="eyebrow">Evidence explorer</p>
-            <h2>Compare the story from four angles</h2>
-            <p>
-              Start with GDP to see that Europe is not standing still, then
-              switch to ETF Price, Market Cap, and ACWI composition to see where
-              the gap opens. Use countries for concrete examples, or regions for
-              the broader pattern.
-            </p>
-            <div class="stage-guide" aria-label="Evidence graph steps">
-              <button type="button" data-stage-jump="stage-map">
-                <span>01</span>
-                Map / scatter
-              </button>
-              <button type="button" data-stage-jump="stage-evolution">
-                <span>02</span>
-                2008 break
-              </button>
-              <button type="button" data-stage-jump="stage-trajectory">
-                <span>03</span>
-                Trajectory
-              </button>
-              <button type="button" data-stage-jump="stage-acwi">
-                <span>04</span>
-                ACWI sectors
-              </button>
-            </div>
-          </div>
 
           <section id="stage-map" class="evidence-step evidence-step--map" data-stage-step="stage-map" aria-label="Map and scatter evidence">
             <div class="control-bar">

src/story-controller.js

@@ -5,6 +5,7 @@
 
 const ACTIVE_CLASS = "story-step--active";
 const STAGE_ACTIVE_CLASS = "evidence-step--active";
+const STORY_TRIGGER_RATIO = 0.7;
 
 /**
  * Connects story steps and preset buttons to a chart preset callback.
@@ -18,6 +19,8 @@ export function createStoryController({ applyPreset }) {
   const stage = document.querySelector(".story-stage");
   const stageSteps = [...document.querySelectorAll("[data-stage-step]")];
   const stageJumpButtons = [...document.querySelectorAll("[data-stage-jump]")];
+  let activeScrollPresetId = "";
+  let scrollFrame = 0;
 
   /**
    * Applies a preset and updates the active visual state.
@@ -54,24 +57,18 @@ export function createStoryController({ applyPreset }) {
   }
 
   if (!("IntersectionObserver" in window)) {
-    return { destroy() {} };
+    syncActiveStoryStep();
+    window.addEventListener("scroll", queueStorySync, { passive: true });
+    window.addEventListener("resize", queueStorySync);
+    return {
+      destroy() {
+        if (scrollFrame) window.cancelAnimationFrame(scrollFrame);
+        window.removeEventListener("scroll", queueStorySync);
+        window.removeEventListener("resize", queueStorySync);
+      },
+    };
   }
 
-  const observer = new IntersectionObserver(
-    (entries) => {
-      const visible = entries
-        .filter((entry) => entry.isIntersecting)
-        .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
-      const presetId = visible?.target?.dataset?.storyPreset;
-      if (presetId) activatePreset(presetId);
-    },
-    {
-      root: null,
-      rootMargin: "-28% 0px -44% 0px",
-      threshold: [0.25, 0.5, 0.75],
-    },
-  );
-
   const stageObserver =
     stage instanceof HTMLElement
       ? new IntersectionObserver(
@@ -96,8 +93,10 @@ export function createStoryController({ applyPreset }) {
         )
       : null;
 
-  for (const step of steps) observer.observe(step);
   if (steps[0]?.dataset.storyPreset) activatePreset(steps[0].dataset.storyPreset);
+  syncActiveStoryStep();
+  window.addEventListener("scroll", queueStorySync, { passive: true });
+  window.addEventListener("resize", queueStorySync);
   for (const step of stageSteps) stageObserver?.observe(step);
   if (stageSteps[0]?.dataset.stageStep) {
     stageSteps[0].classList.add(STAGE_ACTIVE_CLASS);
@@ -108,10 +107,53 @@ export function createStoryController({ applyPreset }) {
 
   return {
     destroy() {
-      observer.disconnect();
+      if (scrollFrame) window.cancelAnimationFrame(scrollFrame);
+      window.removeEventListener("scroll", queueStorySync);
+      window.removeEventListener("resize", queueStorySync);
       stageObserver?.disconnect();
     },
   };
+
+  function queueStorySync() {
+    if (scrollFrame) return;
+    scrollFrame = window.requestAnimationFrame(() => {
+      scrollFrame = 0;
+      syncActiveStoryStep();
+    });
+  }
+
+  function syncActiveStoryStep() {
+    const nextStep = getActiveStoryStep(steps);
+    const presetId = nextStep?.dataset?.storyPreset;
+    if (!presetId || presetId === activeScrollPresetId) return;
+    activeScrollPresetId = presetId;
+    activatePreset(presetId);
+  }
+}
+
+/**
+ * Picks the story step whose vertical span currently contains the activation
+ * line. This fires when the top of a new section crosses the chosen band,
+ * which behaves well even when sections are taller than the viewport.
+ *
+ * @param {HTMLElement[]} steps Story steps ordered in document flow.
+ * @returns {HTMLElement | undefined} Active step.
+ */
+function getActiveStoryStep(steps) {
+  const triggerY = window.innerHeight * STORY_TRIGGER_RATIO;
+  let fallback = steps[0];
+
+  for (const step of steps) {
+    const rect = step.getBoundingClientRect();
+    if (rect.bottom <= 0) {
+      fallback = step;
+      continue;
+    }
+    if (rect.top <= triggerY && rect.bottom > triggerY) return step;
+    if (rect.top > triggerY) return fallback ?? step;
+  }
+
+  return fallback;
 }
 
 /**
@@ -123,6 +165,6 @@ export function createStoryController({ applyPreset }) {
  */
 function getStageHeaderOffset(stage) {
   const header = stage.querySelector(".section-kicker--panel");
-  if (!(header instanceof HTMLElement)) return 160;
+  if (!(header instanceof HTMLElement)) return 18;
   return header.offsetHeight + 28;
 }

src/story-state.js

@@ -139,6 +139,6 @@ function getStageFocusTarget(stage, treemapPanel, focus) {
  */
 function getStageHeaderOffset(stage) {
   const header = stage.querySelector(".section-kicker--panel");
-  if (!(header instanceof HTMLElement)) return 160;
+  if (!(header instanceof HTMLElement)) return 18;
   return header.offsetHeight + 28;
 }

src/story.css

@@ -353,56 +353,6 @@
   overscroll-behavior: contain;
 }
 
-.story-stage .section-kicker--panel {
-  position: sticky;
-  top: 0;
-  z-index: 4;
-  backdrop-filter: blur(22px) saturate(140%);
-  -webkit-backdrop-filter: blur(22px) saturate(140%);
-  background: rgba(9, 13, 23, 0.9);
-}
-
-.stage-guide {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 16px;
-}
-
-.stage-guide button {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  min-height: 34px;
-  padding: 7px 11px;
-  border: 1px solid var(--hairline);
-  border-radius: var(--radius-pill);
-  background: rgba(255, 255, 255, 0.035);
-  color: var(--text-secondary);
-  font-size: 0.74rem;
-  font-weight: 800;
-  transition:
-    border-color 180ms var(--ease-emphasized),
-    background 180ms var(--ease-emphasized),
-    color 180ms var(--ease-emphasized);
-}
-
-.stage-guide button span {
-  color: var(--text-tertiary);
-  font-variant-numeric: tabular-nums;
-}
-
-.stage-guide button:hover,
-.stage-guide button[data-active="true"] {
-  border-color: rgba(111, 161, 255, 0.34);
-  background: rgba(111, 161, 255, 0.12);
-  color: var(--text-primary);
-}
-
-.stage-guide button[hidden] {
-  display: none;
-}
-
 .evidence-step {
   position: relative;
   margin: 18px;
@@ -798,11 +748,6 @@ footer {
   .story-stat-row {
     margin-top: 18px;
   }
-
-  .section-kicker--panel {
-    padding: 18px;
-  }
-
   .chart-note {
     margin: -4px 16px 16px;
   }