fix: make website boot animation resilient

website/app/BossAiMotion.tsx

@@ -26,6 +26,13 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
         return;
       }
 
+      const bootScreen = root.querySelector<HTMLElement>(".boot-screen");
+      const completeBoot = () => {
+        bootScreen?.classList.add("boot-screen-done");
+      };
+      const bootFailSafe = window.setTimeout(completeBoot, 4600);
+
+      try {
         root.classList.add("motion-enhanced");
         gsap.set("[data-motion]", { autoAlpha: 1 });
         gsap.set("[data-motion-line]", { transformOrigin: "center" });
@@ -33,14 +40,17 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
         const matchMedia = gsap.matchMedia();
 
         matchMedia.add("(prefers-reduced-motion: reduce)", () => {
+          root.classList.add("motion-ready");
           gsap.set("[data-motion], [data-motion-dot], [data-motion-orbit], [data-motion-line], .boot-screen", {
             autoAlpha: 1,
             clearProps: "transform",
           });
           gsap.set(".boot-screen", { display: "none" });
+          completeBoot();
         });
 
         matchMedia.add("(prefers-reduced-motion: no-preference) and (max-width: 640px)", () => {
+          root.classList.add("motion-ready");
           gsap.set("[data-motion], [data-motion-dot], [data-motion-orbit], [data-motion-line]", {
             autoAlpha: 1,
             clearProps: "transform",
@@ -53,7 +63,8 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
             .fromTo(".boot-rule", { scaleX: 0 }, { scaleX: 1, duration: 0.34, transformOrigin: "left center" }, "-=0.08")
             .fromTo(".boot-progress span", { scaleX: 0 }, { scaleX: 1, duration: 0.5, transformOrigin: "left center" }, "-=0.04")
             .to(".boot-screen", { autoAlpha: 0, yPercent: -2, duration: 0.34, ease: "power3.inOut", delay: 0.06 })
-          .set(".boot-screen", { display: "none" });
+            .set(".boot-screen", { display: "none" })
+            .call(completeBoot);
 
           gsap.to("[data-motion-dot]", {
             scale: 1.14,
@@ -75,6 +86,7 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
         });
 
         matchMedia.add("(prefers-reduced-motion: no-preference) and (min-width: 641px)", () => {
+          root.classList.add("motion-ready");
           const heroTitle = root.querySelector<HTMLElement>(".hero-copy h1");
           const splitTitle = heroTitle
             ? SplitText.create(heroTitle, {
@@ -86,6 +98,7 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
 
           const intro = gsap.timeline({ defaults: { ease: bossEase } });
           intro
+            .set(".boot-screen", { autoAlpha: 1, display: "grid", yPercent: 0 })
             .from(".boot-frame", { y: 20, scale: 0.985, duration: 0.42, ease: "power3.out" })
             .from(".boot-mark", { scale: 0.72, rotate: -16, duration: 0.36 }, "-=0.18")
             .from(".boot-brand strong", { x: -8, duration: 0.32 }, "-=0.24")
@@ -94,6 +107,7 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
             .fromTo(".boot-progress span", { scaleX: 0 }, { scaleX: 1, duration: 0.72, transformOrigin: "left center" }, "-=0.08")
             .to(".boot-screen", { autoAlpha: 0, yPercent: -4, duration: 0.62, ease: "power3.inOut", delay: 0.08 })
             .set(".boot-screen", { display: "none" })
+            .call(completeBoot)
             .from("[data-motion='nav']", { y: -14, duration: 0.7 })
             .from(".section-kicker", { y: 14, duration: 0.56 }, "-=0.18")
             .from(
@@ -268,9 +282,18 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
         });
 
         return () => {
+          window.clearTimeout(bootFailSafe);
           matchMedia.revert();
-        root.classList.remove("motion-enhanced");
+          root.classList.remove("motion-enhanced", "motion-ready");
         };
+      } catch (error) {
+        console.warn("BossAI motion setup failed; using CSS boot fallback.", error);
+        root.classList.remove("motion-enhanced", "motion-ready");
+
+        return () => {
+          window.clearTimeout(bootFailSafe);
+        };
+      }
     },
     { scope: scopeRef },
   );

website/app/globals.css

@@ -241,11 +241,22 @@ a {
   pointer-events: none;
   background: var(--boot-bg);
   backdrop-filter: blur(14px);
-  animation: boot-screen-fallback 3.2s 0.25s ease forwards;
+  opacity: 1;
+  visibility: visible;
+  animation: boot-screen-fallback 3.6s 0.25s ease forwards;
+  will-change: opacity, visibility;
+}
+
+.boot-screen.boot-screen-done {
+  display: none !important;
+  opacity: 0 !important;
+  visibility: hidden !important;
+  animation: none !important;
 }
 
 .boot-frame {
   position: relative;
+  z-index: 1;
   width: min(720px, calc(100% - 28px));
   min-height: 290px;
   display: grid;
@@ -256,6 +267,9 @@ a {
   background: var(--boot-frame-bg);
   padding: clamp(24px, 4vw, 34px);
   box-shadow: var(--boot-shadow);
+  opacity: 0;
+  transform: translateY(14px) scale(0.985);
+  animation: boot-frame-fallback 0.58s 0.08s cubic-bezier(0.18, 0.84, 0.32, 1) both;
 }
 
 .boot-frame::before,
@@ -285,6 +299,9 @@ a {
   font-size: 22px;
   font-weight: 860;
   letter-spacing: -0.03em;
+  opacity: 0;
+  transform: translateY(6px);
+  animation: boot-item-fallback 0.42s 0.18s ease both;
 }
 
 .boot-mark {
@@ -303,7 +320,7 @@ a {
   height: 1px;
   background: var(--boot-rule-line);
   transform-origin: left center;
-  animation: boot-rule-fallback 0.72s ease both;
+  animation: boot-rule-fallback 0.72s 0.28s ease both;
 }
 
 .boot-lines {
@@ -319,6 +336,25 @@ a {
   color: var(--muted);
   font-family: var(--font-geist-mono), monospace;
   font-size: 12px;
+  opacity: 0;
+  transform: translateY(6px);
+  animation: boot-item-fallback 0.38s ease both;
+}
+
+.boot-lines p:nth-child(1) {
+  animation-delay: 0.42s;
+}
+
+.boot-lines p:nth-child(2) {
+  animation-delay: 0.5s;
+}
+
+.boot-lines p:nth-child(3) {
+  animation-delay: 0.58s;
+}
+
+.boot-lines p:nth-child(4) {
+  animation-delay: 0.66s;
 }
 
 .boot-lines p span {
@@ -346,17 +382,27 @@ a {
   height: 100%;
   background: linear-gradient(90deg, var(--acid), var(--blue));
   transform-origin: left center;
-  animation: boot-rule-fallback 1.2s 0.32s ease both;
+  animation: boot-rule-fallback 1.32s 0.74s ease both;
 }
 
-.motion-root.motion-enhanced .boot-screen,
+.motion-root.motion-enhanced.motion-ready .boot-screen,
-.motion-root.motion-enhanced .boot-rule,
+.motion-root.motion-enhanced.motion-ready .boot-frame,
-.motion-root.motion-enhanced .boot-progress span {
+.motion-root.motion-enhanced.motion-ready .boot-brand,
+.motion-root.motion-enhanced.motion-ready .boot-lines p,
+.motion-root.motion-enhanced.motion-ready .boot-rule,
+.motion-root.motion-enhanced.motion-ready .boot-progress span {
   animation: none;
 }
 
-.motion-root.motion-enhanced .boot-rule,
+.motion-root.motion-enhanced.motion-ready .boot-frame,
-.motion-root.motion-enhanced .boot-progress span {
+.motion-root.motion-enhanced.motion-ready .boot-brand,
+.motion-root.motion-enhanced.motion-ready .boot-lines p {
+  opacity: 1;
+  transform: none;
+}
+
+.motion-root.motion-enhanced.motion-ready .boot-rule,
+.motion-root.motion-enhanced.motion-ready .boot-progress span {
   transform: scaleX(0);
 }
 
@@ -2236,6 +2282,28 @@ a {
   }
 }
 
+@keyframes boot-frame-fallback {
+  from {
+    opacity: 0;
+    transform: translateY(14px) scale(0.985);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes boot-item-fallback {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 @keyframes boot-rule-fallback {
   from {
     transform: scaleX(0);