reveal the editorial page top-to-bottom: wrap every block and cascade the first screenful

src/app/components/editorial-ui.tsx

@@ -18,19 +18,10 @@ export function Reveal({
   useEffect(() => {
     const el = ref.current;
     if (!el) return;
-    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
-
-    // Only animate what starts below the fold. Anything already on screen stays
-    // visible — otherwise the hero fades in after the section beneath it.
-    const rect = el.getBoundingClientRect();
-    const onScreen = rect.top < window.innerHeight && rect.bottom > 0;
-    if (onScreen) return;
-
-    // Hide it without a transition, then reveal when it scrolls into view.
-    el.style.transition = "none";
-    el.classList.add("reveal-armed");
-    void el.offsetHeight;
-    el.style.transition = "";
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      el.classList.add("is-in");
+      return;
+    }
 
     const io = new IntersectionObserver(
       (entries) => {
@@ -41,11 +32,22 @@ export function Reveal({
           }
         }
       },
-      { rootMargin: "0px 0px -10% 0px", threshold: 0.05 }
+      { rootMargin: "0px 0px -12% 0px", threshold: 0.08 }
     );
-    io.observe(el);
+
+    const rect = el.getBoundingClientRect();
+    const onScreen = rect.top < window.innerHeight && rect.bottom > 0;
+    if (onScreen) {
+      // First screenful: stagger in document order so it fills top to bottom.
+      const all = Array.from(document.querySelectorAll<HTMLElement>(".reveal"));
+      const order = Math.min(Math.max(0, all.indexOf(el)), 8);
+      el.style.setProperty("--delay", `${delay + order * 90}ms`);
+      requestAnimationFrame(() => el.classList.add("is-in"));
+    } else {
+      io.observe(el);
+    }
     return () => io.disconnect();
-  }, []);
+  }, [delay]);
 
   return (
     <div ref={ref} className={`reveal ${className}`} style={{ "--delay": `${delay}ms` } as CSSProperties}>