Update How It Works 3D page

src/modules/how-it-works-3d/Experience3D.jsx

@@ -66,6 +66,17 @@ export default function Experience3D() {
     return () => io.disconnect()
   }, [])
 
+  // Refresh ScrollTrigger when the scene actually mounts. WebGL canvas mounting
+  // can block the main thread and shift elements, so a refresh here is critical.
+  useEffect(() => {
+    if (mountScene) {
+      const timer = setTimeout(() => {
+        ScrollTrigger.refresh()
+      }, 150)
+      return () => clearTimeout(timer)
+    }
+  }, [mountScene])
+
   // Own Lenis instance (global Lenis is gated off for this route).
   useEffect(() => {
     const lenis = new Lenis({
@@ -77,18 +88,14 @@ export default function Experience3D() {
     setLenis(lenis)
     lenis.on('scroll', ScrollTrigger.update)
 
-    let rafId
-    function raf(time) {
-      lenis.raf(time)
-      rafId = requestAnimationFrame(raf)
-    }
-    rafId = requestAnimationFrame(raf)
-
+    // Drive Lenis using GSAP's ticker to ensure synchronization with ScrollTrigger
+    const tickerCb = (time) => lenis.raf(time * 1000)
+    gsap.ticker.add(tickerCb)
     gsap.ticker.lagSmoothing(0)
     ScrollTrigger.refresh()
 
     return () => {
-      cancelAnimationFrame(rafId)
+      gsap.ticker.remove(tickerCb)
       lenis.destroy()
       setLenis(null)
     }