update dropdown

src/components/sections/WingsWhyGrid.tsx

@@ -236,11 +236,15 @@ export default function WingsWhyGrid() {
       return { points, isMobile };
     };
 
-    // Keep the (static, or already-settled) line in sync with layout reflow.
-    // Only ever updates geometry — never restarts or replays the animation.
     ro = new ResizeObserver(() => {
       cancelAnimationFrame(resizeRaf);
-      resizeRaf = requestAnimationFrame(measure);
+      resizeRaf = requestAnimationFrame(() => {
+        if (!reduced) {
+          buildSequence();
+        } else {
+          measure();
+        }
+      });
     });
     ro.observe(wrap);
 
@@ -293,9 +297,8 @@ export default function WingsWhyGrid() {
       gsap.delayedCall(0.95, () => card.classList.remove("wwg-card-pulse"));
     };
 
-    const runSequence = () => {
-      if (played) return;
-      played = true;
+    const buildSequence = () => {
+      if (playedTimeline) playedTimeline.kill();
 
       const { points, isMobile } = measure();
       if (points.length < 2) return;
@@ -327,7 +330,14 @@ export default function WingsWhyGrid() {
       let currentAngle = 0;
       let angleInit = false;
 
-      const tl = gsap.timeline();
+      const tl = gsap.timeline({
+        scrollTrigger: {
+          trigger: wrap,
+          start: "top 75%",
+          end: "bottom 35%",
+          scrub: 1,
+        },
+      });
       playedTimeline = tl;
 
       // The energy pulse's own journey — calm and deliberate, ~4.8-5.5s so
@@ -413,6 +423,10 @@ export default function WingsWhyGrid() {
             if (!fired[i] && p >= f) {
               fired[i] = true;
               activateCard(i);
+            } else if (fired[i] && p < f) {
+              fired[i] = false;
+              // Reset card state if scrubbed backwards
+              cardRefs.current[i]?.classList.remove("wwg-card-flown", "wwg-card-pulse");
             }
           });
         },
@@ -443,26 +457,8 @@ export default function WingsWhyGrid() {
       gsap.set(traveler, { opacity: 0 });
       gsap.set(illum, { opacity: 0 });
 
-      // Starts as soon as the section is mostly in view (matches the cards'
-      // own "top 85%" stagger-reveal trigger) rather than waiting for it to
-      // be ~centered — the ~6s draw+flight sequence needs that extra lead
-      // time to actually be seen during a normal scroll pass, not just
-      // triggered and then scrolled straight past.
-      st = ScrollTrigger.create({
-        trigger: wrap,
-        start: "top 85%",
-        once: true,
-        onEnter: runSequence,
-      });
-
-      rafIn = requestAnimationFrame(() => {
-        const r = wrap.getBoundingClientRect();
-        const vh = window.innerHeight || document.documentElement.clientHeight;
-        if (r.top < vh * 0.85 && r.bottom > 0) {
-          runSequence();
-          st?.kill();
-        }
-      });
+      // Build the scrubbing sequence immediately
+      buildSequence();
     }
     }, wrap);