feat: update overlay positioning and styles for improved CTA visibility

src/app/configure/page.tsx

@@ -12,7 +12,7 @@ export default function ConfigurePage() {
         style={{
           position: 'fixed',
           top: '1rem',
-          left: '1rem',
+          right: '1rem',
           zIndex: 100,
           display: 'inline-flex',
           alignItems: 'center',

src/app/globals.css

@@ -468,6 +468,16 @@ html {
   .overlay-scroll-hint {
     bottom: 1.5rem !important;
   }
+
+  .overlay-cta-section {
+    bottom: 3vh !important;
+    top: auto !important;
+  }
+
+  .overlay-cta-btn {
+    padding: 0.85rem 2rem !important;
+    font-size: 0.85rem !important;
+  }
 }
 
 /* Small phones */

src/components/ScrollOverlays.tsx

@@ -126,7 +126,7 @@ const SECTION_CONFIGS = [
   { id: 'hero', startAt: 0.10, peakAt: 0.22, endAt: 0.35, align: 'left' as const, verticalAlign: 'center' as const },
   { id: 'headReveal', startAt: 0.35, peakAt: 0.46, endAt: 0.53, align: 'right' as const, verticalAlign: 'center' as const },
   { id: 'customization', startAt: 0.55, peakAt: 0.66, endAt: 0.77, align: 'left' as const, verticalAlign: 'center' as const },
-  { id: 'mobility', startAt: 0.80, peakAt: 0.90, endAt: 1.0, align: 'right' as const, verticalAlign: 'center' as const },
+  { id: 'mobility', startAt: 0.75, peakAt: 0.82, endAt: 0.90, align: 'right' as const, verticalAlign: 'center' as const },
 ];
 
 export function ScrollOverlays() {
@@ -255,23 +255,19 @@ export function ScrollOverlays() {
       </OverlaySection>
 
       {/* Configure CTA — appears at the very end of scroll */}
-      <motion.div
-        style={{
-          position: 'absolute',
-          bottom: '8vh',
-          left: '50%',
-          transform: 'translateX(-50%)',
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          gap: '1rem',
-          opacity: useTransform(scrollYProgress, [0.88, 0.95], [0, 1]),
-          pointerEvents: 'auto',
-          zIndex: 20,
-        }}
+      <OverlaySection
+        progress={scrollYProgress}
+        startAt={0.90}
+        peakAt={0.95}
+        endAt={1.0}
+        align="center"
+        verticalAlign="center"
+        className="overlay-cta-section"
       >
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.75rem', pointerEvents: 'auto' }}>
           <Link
             href="/configure/"
+            className="overlay-cta-btn"
             style={{
               display: 'inline-flex',
               alignItems: 'center',
@@ -297,7 +293,8 @@ export function ScrollOverlays() {
           <span style={{ fontSize: '0.7rem', color: '#94a3b8', letterSpacing: '0.15em', textTransform: 'uppercase' }}>
             Build &amp; Order Your Robot
           </span>
-      </motion.div>
+        </div>
+      </OverlaySection>
 
       {/* Scroll indicator mapped to vanish rapidly when scrolled */}
       <motion.div