feat: polish BossAI website motion

website/app/globals.css

@@ -63,6 +63,7 @@ a {
 
 .motion-root {
   min-height: 100dvh;
+  perspective: 1400px;
 }
 
 [data-motion],
@@ -165,12 +166,14 @@ a {
 }
 
 .nav-links a:hover,
-.nav-links a:focus-visible {
+.nav-links a:focus-visible,
+.nav-links a.is-active {
   color: var(--text);
 }
 
 .nav-links a:hover::after,
-.nav-links a:focus-visible::after {
+.nav-links a:focus-visible::after,
+.nav-links a.is-active::after {
   opacity: 0.8;
   transform: scaleX(1);
 }
@@ -183,6 +186,8 @@ a {
 .solid-link,
 .primary-cta,
 .secondary-cta {
+  position: relative;
+  overflow: hidden;
   min-height: 42px;
   display: inline-flex;
   align-items: center;
@@ -196,6 +201,17 @@ a {
   transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, color 180ms ease;
 }
 
+.solid-link::before,
+.primary-cta::before {
+  position: absolute;
+  inset: -1px auto -1px -42%;
+  width: 38%;
+  content: "";
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.46), transparent);
+  transform: skewX(-18deg);
+  transition: left 560ms ease;
+}
+
 .ghost-link,
 .secondary-cta {
   border-color: var(--line);
@@ -221,6 +237,13 @@ a {
   transform: translateY(-2px);
 }
 
+.solid-link:hover::before,
+.primary-cta:hover::before,
+.solid-link:focus-visible::before,
+.primary-cta:focus-visible::before {
+  left: 108%;
+}
+
 .ghost-link:hover,
 .secondary-cta:hover,
 .ghost-link:focus-visible,
@@ -274,6 +297,7 @@ a {
   line-height: 0.9;
   letter-spacing: -0.07em;
   text-wrap: balance;
+  transform-style: preserve-3d;
 }
 
 .hero-copy h1 span {
@@ -281,6 +305,11 @@ a {
   color: var(--acid);
 }
 
+.hero-word {
+  display: inline-block;
+  will-change: transform, opacity;
+}
+
 .hero-copy p {
   max-width: 60ch;
   margin: 0;
@@ -385,17 +414,32 @@ a {
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
 }
 
+.route-row::before,
+.console-bar::before {
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  content: "";
+  background: var(--acid);
+  box-shadow: 0 0 20px rgba(215, 255, 77, 0.55);
+}
+
 .console-bar {
   position: relative;
   z-index: 2;
   min-height: 54px;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  gap: 10px;
+  justify-content: flex-start;
   border-radius: 18px;
   padding: 0 16px;
 }
 
+.console-bar strong {
+  margin-left: auto;
+}
+
 .console-bar span,
 .route-row em,
 .console-metrics span,
@@ -418,13 +462,21 @@ a {
 }
 
 .route-row {
+  position: relative;
   min-height: 58px;
   display: grid;
   grid-template-columns: 78px 1fr auto;
   align-items: center;
   gap: 14px;
   border-radius: 18px;
-  padding: 0 14px;
+  padding: 0 14px 0 32px;
+}
+
+.route-row::before {
+  position: absolute;
+  top: 50%;
+  left: 14px;
+  transform: translateY(-50%);
 }
 
 .route-row span {
@@ -437,6 +489,11 @@ a {
   color: #ffec99;
 }
 
+.route-row[data-tone="hot"]::before {
+  background: #ffec99;
+  box-shadow: 0 0 20px rgba(255, 236, 153, 0.5);
+}
+
 .route-row[data-tone="lime"] span {
   color: var(--acid);
 }
@@ -445,6 +502,11 @@ a {
   color: var(--blue);
 }
 
+.route-row[data-tone="blue"]::before {
+  background: var(--blue);
+  box-shadow: 0 0 20px rgba(139, 246, 255, 0.5);
+}
+
 .route-row strong,
 .console-metrics strong,
 .mini-grid strong,
@@ -542,6 +604,7 @@ a {
 .deploy-section,
 .final-section {
   padding-block: 72px;
+  scroll-margin-top: 22px;
 }
 
 .section-heading {
@@ -644,7 +707,8 @@ a {
 .endpoint-card,
 .ops-card,
 .module-strip span {
-  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
+  transform-style: preserve-3d;
+  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
 }
 
 .capability-card:hover,
@@ -654,6 +718,9 @@ a {
   transform: translateY(-3px);
   border-color: var(--line-strong);
   background-color: rgba(255, 255, 255, 0.045);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    0 22px 54px rgba(0, 0, 0, 0.2);
 }
 
 .api-section {