feat: refine website gateway os hero

website/app/BossAiMotion.tsx

@@ -39,7 +39,33 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
         gsap.set(".boot-screen", { display: "none" });
       });
 
-      matchMedia.add("(prefers-reduced-motion: no-preference)", () => {
+      matchMedia.add("(prefers-reduced-motion: no-preference) and (max-width: 640px)", () => {
+        gsap.set("[data-motion], [data-motion-dot], [data-motion-orbit], [data-motion-line]", {
+          autoAlpha: 1,
+          clearProps: "transform",
+        });
+        gsap.set(".boot-screen", { display: "none" });
+
+        gsap.to("[data-motion-dot]", {
+          scale: 1.14,
+          autoAlpha: 0.76,
+          duration: 1.4,
+          ease: "sine.inOut",
+          repeat: -1,
+          yoyo: true,
+          stagger: 0.2,
+        });
+
+        gsap.to("[data-motion-line]", {
+          strokeDashoffset: -120,
+          duration: 6,
+          ease: "none",
+          repeat: -1,
+          stagger: 0.24,
+        });
+      });
+
+      matchMedia.add("(prefers-reduced-motion: no-preference) and (min-width: 641px)", () => {
         const heroTitle = root.querySelector<HTMLElement>(".hero-copy h1");
         const splitTitle = heroTitle
           ? SplitText.create(heroTitle, {
@@ -73,9 +99,11 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
             "-=0.28",
           )
           .from(".hero-copy p", { y: 18, duration: 0.7 }, "-=0.5")
+          .from("[data-motion='signal']", { y: 10, duration: 0.42, stagger: 0.06 }, "-=0.42")
           .from(".hero-actions > *", { y: 12, duration: 0.46, stagger: 0.08 }, "-=0.42")
           .from(".hero-proof > div", { y: 12, duration: 0.5, stagger: 0.07 }, "-=0.28")
           .from("[data-motion='hero-console']", { y: 26, rotateX: 4, duration: 0.9 }, "-=0.78")
+          .from("[data-motion='exchange-step']", { y: 12, duration: 0.48, stagger: 0.06 }, "-=0.58")
           .from("[data-motion='route-row']", { x: 14, duration: 0.55, stagger: 0.08 }, "-=0.48")
           .from("[data-motion='node']", { scale: 0.96, duration: 0.45, stagger: 0.08 }, "-=0.3");
 
@@ -107,6 +135,7 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
         const heroSection = root.querySelector<HTMLElement>(".hero-section");
         const heroConsole = root.querySelector<HTMLElement>(".hero-console");
         const routeRows = gsap.utils.toArray<HTMLElement>(".route-row", root);
+        const exchangeSteps = gsap.utils.toArray<HTMLElement>(".exchange-step", root);
         const consoleTiles = gsap.utils.toArray<HTMLElement>(".console-metrics > div, .mini-grid > div", root);
 
         if (heroSection && heroConsole) {
@@ -155,6 +184,19 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
             },
           });
 
+          gsap.to(exchangeSteps, {
+            y: (index) => -5 + index * 1.4,
+            autoAlpha: (index) => 0.98 - index * 0.02,
+            ease: "none",
+            stagger: { each: 0.035, from: "start" },
+            scrollTrigger: {
+              trigger: heroConsole,
+              start: "top 80%",
+              end: "center 18%",
+              scrub: true,
+            },
+          });
+
           gsap.to(consoleTiles, {
             y: -12,
             autoAlpha: 0.9,