update miletruth page and remove unwanted files

src/components/optimization/OptimizationSection.tsx

@@ -5,7 +5,6 @@ import dynamic from "next/dynamic";
 import { motion, AnimatePresence, useMotionValue, useTransform } from "framer-motion";
 import gsap from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
-import Lenis from "lenis";
 import {
   COLORS,
   PHASE_LABELS,
@@ -130,7 +129,7 @@ export default function OptimizationSection() {
           mountIo.disconnect();
         }
       },
-      { rootMargin: "120% 0px" },
+      { rootMargin: "70% 0px" },
     );
     const activeIo = new IntersectionObserver(
       (entries) => setSceneActive(entries.some((e) => e.isIntersecting)),
@@ -155,23 +154,11 @@ export default function OptimizationSection() {
     if (!el) return;
     gsap.registerPlugin(ScrollTrigger);
 
-    // Smooth scroll (Lenis), driven by a SINGLE rAF source — GSAP's ticker.
-    // Previously lenis.raf() was called from both a manual requestAnimationFrame
-    // loop AND gsap.ticker, double-stepping the integrator every frame, which is
-    // what made scrolling stutter. One source keeps Lenis + ScrollTrigger locked.
-    const lenis = new Lenis({
-      duration: 1.05,
-      easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
-      orientation: "vertical",
-      gestureOrientation: "vertical",
-      smoothWheel: true,
-    });
-
-    lenis.on("scroll", ScrollTrigger.update);
-    const tickerCb = (time: number) => lenis.raf(time * 1000); // ticker is in seconds, Lenis wants ms
-    gsap.ticker.add(tickerCb);
-    gsap.ticker.lagSmoothing(0);
-
+    // NOTE: /miletruth runs on native scroll (no Lenis). Smooth-scrolling this
+    // page fought the three stacked pinned WebGL sections and caused scroll lag;
+    // global Lenis (src/animations/SmoothScroll.tsx) is intentionally disabled on
+    // this route. ScrollTrigger's scrub + self-managed fixed pin work as-is on
+    // native scroll.
     let lastPhase: PhaseKey = "chaos";
     let lastPin: "before" | "pinned" | "after" = "before";
     const st = ScrollTrigger.create({
@@ -201,8 +188,6 @@ export default function OptimizationSection() {
     return () => {
       clearTimeout(refresh);
       st.kill();
-      gsap.ticker.remove(tickerCb);
-      lenis.destroy();
     };
   }, [scroll]);
 
@@ -211,7 +196,8 @@ export default function OptimizationSection() {
   const leftBlur = useTransform(scroll, [0.3, 0.55], [0, 3]);
   const leftFilter = useTransform(leftBlur, (b) => `blur(${b}px)`);
   const rightOpacity = useTransform(scroll, [0.42, 0.66], [0.36, 1]);
-  const scanWidth = useTransform(scroll, [0, 1], ["0%", "100%"]);
+  // GPU transform (scaleX) instead of animating width, which forces layout each frame.
+  const scanScaleX = useTransform(scroll, [0, 1], [0, 1]);
   const scanLineY = useTransform(scroll, [0.2, 0.42], ["8%", "92%"]);
   const scanLineOpacity = useTransform(scroll, [0.18, 0.22, 0.42, 0.46], [0, 1, 1, 0]);
   const dividerOpacity = useTransform(scroll, [0.45, 0.6], [0.15, 0.75]);
@@ -350,7 +336,7 @@ export default function OptimizationSection() {
               {/* Scan progress bar */}
               <div className="dm-opt-progress">
                 <div className="dm-opt-progress__track">
-                  <motion.div className="dm-opt-progress__fill" style={{ width: scanWidth }} />
+                  <motion.div className="dm-opt-progress__fill" style={{ scaleX: scanScaleX }} />
                 </div>
               </div>
             </header>
@@ -470,17 +456,20 @@ const styles = `
 }
 /* Animated subtle grid pattern */
 .dm-opt-card::before {
-  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
+  /* Expanded one tile beyond the (clipped) card so we can drift it via a GPU
+     transform instead of animating background-position (which repaints each frame). */
+  content: ""; position: absolute; inset: -60px; z-index: 0; pointer-events: none;
   opacity: 0.035;
   background-image:
     linear-gradient(${rgba(COLORS.cyan, 0.5)} 1px, transparent 1px),
     linear-gradient(90deg, ${rgba(COLORS.cyan, 0.5)} 1px, transparent 1px);
   background-size: 60px 60px;
   animation: dmOptGridDrift 25s linear infinite;
+  will-change: transform;
 }
 @keyframes dmOptGridDrift {
-  0% { background-position: 0 0; }
-  100% { background-position: 60px 60px; }
+  0% { transform: translate3d(0, 0, 0); }
+  100% { transform: translate3d(60px, 60px, 0); }
 }
 /* Radial center glow behind 3D scene */
 .dm-opt-card::after {
@@ -669,7 +658,7 @@ const styles = `
   background: ${rgba(COLORS.cyan, 0.10)}; max-width: 420px; margin: 0 auto;
 }
 .dm-opt-progress__fill {
-  height: 100%; border-radius: 999px;
+  height: 100%; width: 100%; transform-origin: left center; border-radius: 999px;
   background: linear-gradient(90deg, ${COLORS.cyan}, ${COLORS.green});
   box-shadow: 0 0 12px ${rgba(COLORS.cyan, 0.6)};
 }
@@ -697,9 +686,10 @@ const styles = `
 .dm-opt-panel {
   pointer-events: auto; width: clamp(230px, 26vw, 340px);
   padding: 18px 20px; border-radius: 20px;
-  background: ${rgba(COLORS.ink, 0.72)};
+  background: ${rgba(COLORS.ink, 0.92)};
   border: 1px solid ${rgba(COLORS.slate, 0.22)};
-  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
+  /* backdrop blur removed — panel opacity is scroll-driven, so the blur was
+     recomputed every scroll frame; a near-opaque fill reads the same and is free. */
 }
 .dm-opt-panel--bad {
   border-color: ${rgba(COLORS.red, 0.45)};
@@ -772,9 +762,9 @@ const styles = `
 }
 .dm-opt-metric {
   position: relative; padding: 14px 14px 12px; border-radius: 16px;
-  background: ${rgba(COLORS.ink, 0.72)};
+  background: ${rgba(COLORS.ink, 0.92)};
   border: 1px solid ${rgba(COLORS.slate, 0.25)};
-  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
+  /* backdrop blur removed — 5 metric cards animate on scroll; per-frame blur recompute was a hotspot. */
   overflow: hidden;
   opacity: 0; transform: translateY(22px);
   animation: dmOptCardIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;