Fix stack cover: shared sticky line, z-index, show body only on stack.

All folders stick at --stack-reveal; higher layers paint over lower ones.
Bodies hidden until panel aligns on the stack line (no vertical list).

Co-authored-by: Cursor <cursoragent@cursor.com>

shared/stack-layout.css

@@ -1,4 +1,4 @@
-/* Pull layers into one stack so sticky overlap works */
+/* Overlapping scroll slots — each layer covers the one below via z-index */
 .scroll-section {
   height: var(--stack-slot);
   position: relative;
@@ -19,17 +19,17 @@
   margin-bottom: 3rem;
 }
 
-/* Only the active layer shows its body; tabs always visible */
-.scroll-section:not(.is-active) .body,
-.scroll-section:not(.is-active) .layer-inner,
-.scroll-section:not(.is-active) .frame-body,
-.scroll-section:not(.is-active) .unit-body {
+/* Body visible only when card is stuck on the stack — next card covers previous */
+.scroll-section:not(.is-stuck) .body,
+.scroll-section:not(.is-stuck) .layer-inner,
+.scroll-section:not(.is-stuck) .frame-body,
+.scroll-section:not(.is-stuck) .unit-body {
   visibility: hidden;
-  height: 0;
   min-height: 0;
-  margin-top: 0 !important;
-  padding: 0;
+  height: 0;
+  padding-top: 0;
+  padding-bottom: 0;
   border: none;
-  overflow: hidden;
   box-shadow: none;
+  overflow: hidden;
 }

shared/stack-scroll.js

@@ -1,4 +1,4 @@
-/** Shared scroll-depth tracking + jump-to-layer for stack variants */
+/** Scroll depth + jump + hide upcoming cards until they cover the stack */
 export function initStackScroll(options = {}) {
   const {
     sectionSelector = '.scroll-section',
@@ -11,14 +11,22 @@ export function initStackScroll(options = {}) {
   const sections = document.querySelectorAll(sectionSelector);
   if (!sections.length) return;
 
+  const reveal = () => {
+    const v = getComputedStyle(document.documentElement).getPropertyValue('--stack-reveal').trim();
+    return parseFloat(v) || 344;
+  };
+
   const mid = () => window.innerHeight * 0.42;
 
   function updateDepth() {
+    const rLine = reveal();
     let active = 0;
+
     sections.forEach((sec) => {
       const r = sec.getBoundingClientRect();
       if (r.top <= mid() && r.bottom > mid()) active = Number(sec.dataset.layer);
     });
+
     if (depthEl) depthEl.textContent = `${depthPrefix}${active}`;
 
     document.querySelectorAll('.stack-ruler button, .stack-ruler [data-goto], .tab-rail button, .tab[data-goto]').forEach((el) => {
@@ -29,11 +37,17 @@ export function initStackScroll(options = {}) {
 
     sections.forEach((sec) => {
       const layer = Number(sec.dataset.layer);
-      const isActive = layer === active;
-      sec.classList.toggle('is-active', isActive);
       const panel = sec.querySelector(panelSelector);
       if (!panel) return;
-      panel.style.zIndex = isActive ? 100 : 10 + layer;
+
+      const r = sec.getBoundingClientRect();
+      const pr = panel.getBoundingClientRect();
+      const onStack = Math.abs(pr.top - rLine) < 10;
+      const past = r.bottom <= rLine;
+
+      sec.classList.toggle('is-active', layer === active);
+      sec.classList.toggle('is-stuck', onStack);
+      sec.classList.toggle('is-past', past);
     });
   }
 
@@ -49,5 +63,6 @@ export function initStackScroll(options = {}) {
   });
 
   window.addEventListener('scroll', updateDepth, { passive: true });
+  window.addEventListener('resize', updateDepth, { passive: true });
   updateDepth();
 }

shared/stack-vars.css

@@ -1,4 +1,4 @@
-/* Shared stack scroll — overlapping sticky layers */
+/* Shared stack scroll — cards share one sticky line and cover via z-index */
 :root {
   --stack-nav: 2.5rem;
   --stack-stick: 3rem;
@@ -7,6 +7,7 @@
   --stack-reveal: calc(var(--stack-stick) + var(--stack-step) * 6 + var(--stack-tab-h));
   --stack-slot: 100vh;
   --stack-slot-last: 50vh;
+  /* Scroll one "deck" height before next card covers */
   --stack-pull: calc(var(--stack-slot) - var(--stack-reveal));
   --stack-body-h: calc(100dvh - var(--stack-reveal) - 1.25rem);
 }