updated section design

src/components/ScrollStack.tsx

@@ -29,6 +29,7 @@ interface ScrollStackProps {
   blurAmount?: number;
   hideBehind?: boolean;
   useWindowScroll?: boolean;
+  disabled?: boolean;
   onStackComplete?: () => void;
 }
 
@@ -45,6 +46,7 @@ const ScrollStack = ({
   blurAmount = 0,
   hideBehind = false,
   useWindowScroll = false,
+  disabled = false,
   onStackComplete,
 }: ScrollStackProps) => {
   const scrollerRef = useRef<HTMLDivElement>(null);
@@ -288,6 +290,20 @@ const ScrollStack = ({
     cardsRef.current = cards;
     const transformsCache = lastTransformsRef.current;
 
+    // Disabled (e.g. on mobile): clear any pinning transforms so the cards
+    // flow as a normal scrollable list, and skip the whole sticky-stack setup.
+    if (disabled) {
+      cards.forEach((card) => {
+        card.style.transform = '';
+        card.style.filter = '';
+        card.style.opacity = '';
+        card.style.marginBottom = '';
+        card.style.willChange = '';
+      });
+      transformsCache.clear();
+      return;
+    }
+
     cards.forEach((card, i) => {
       if (i < cards.length - 1) {
         card.style.marginBottom = `${itemDistance}px`;
@@ -323,7 +339,7 @@ const ScrollStack = ({
       isUpdatingRef.current = false;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [itemDistance, itemScale, itemStackDistance, stackPosition, scaleEndPosition, baseScale, rotationAmount, blurAmount, useWindowScroll, onStackComplete, setupLenis, updateCardTransforms, measurePositions]);
+  }, [itemDistance, itemScale, itemStackDistance, stackPosition, scaleEndPosition, baseScale, rotationAmount, blurAmount, useWindowScroll, disabled, onStackComplete, setupLenis, updateCardTransforms, measurePositions]);
 
   return (
     <div
@@ -331,7 +347,7 @@ const ScrollStack = ({
       ref={scrollerRef}
       style={useWindowScroll ? { overflow: 'visible', height: 'auto', position: 'static' } : undefined}
     >
-      <div className="scroll-stack-inner">
+      <div className="scroll-stack-inner" style={disabled ? { padding: 0, minHeight: 0 } : undefined}>
         {children}
         {/* Spacer so the last pin can release cleanly */}
         <div className="scroll-stack-end" />