refactor: enable re-triggering of ecosystem section animations by resetting states and clearing timeouts on intersection exit

apps/product-site/src/components/sections/Ecosystem.tsx

@@ -13,24 +13,38 @@ export function Ecosystem() {
     if (grid) {
       const bars = grid.querySelectorAll<HTMLElement>('.report-bar');
       const ring = grid.querySelector<SVGElement>('.ring-progress');
-      let done = false;
+      const timeouts: ReturnType<typeof setTimeout>[] = [];
 
       obs = new IntersectionObserver(
         (entries) => {
           entries.forEach((entry) => {
-            if (entry.isIntersecting && !done) {
+            if (entry.isIntersecting) {
-              done = true;
               bars.forEach((bar, i) => {
-                setTimeout(() => {
+                timeouts.push(
-                  if (bar.dataset.w) bar.style.width = bar.dataset.w;
+                  setTimeout(() => {
-                }, i * 150);
+                    if (bar.dataset.w) bar.style.width = bar.dataset.w;
+                  }, i * 150)
+                );
               });
               if (ring && ring.dataset.dash) {
-                setTimeout(() => {
+                timeouts.push(
-                  ring.style.strokeDasharray = ring.dataset.dash!;
+                  setTimeout(() => {
-                }, 200);
+                    ring.style.strokeDasharray = ring.dataset.dash!;
+                  }, 200)
+                );
+              }
+            } else {
+              // Clear pending timeouts
+              timeouts.forEach(clearTimeout);
+              timeouts.length = 0;
+              
+              // Reset elements to trigger transition again on next enter
+              bars.forEach((bar) => {
+                bar.style.width = '0';
+              });
+              if (ring) {
+                ring.style.strokeDasharray = '0 213.6';
               }
-              obs.disconnect();
             }
           });
         },