perf(movimento): sem tela vazia, passagens em CSS e vitrine leve

Projetos sobem sobre o palco do hero e o celular tem hero de uma tela sem mergulho; passagens com animation-timeline em CSS, sem GSAP nem motion; troca da vitrine sem texto duplicado; moldura de celular só com pôster e scrub reencodado em 960 px (9,4 para 5,2 MB); 3D monta na primeira interação e para quando parado; transição entre páginas do mesmo segmento; foco em anel duplo; texto de 15 px no celular; código morto removido.

app/components/cinematic/ScrollProgress.tsx

@@ -1,53 +1,25 @@
-"use client";
-
-import { motion, useScroll, useSpring, useTransform } from "motion/react";
-
+/**
+ * Barra de progresso no topo e trilho lateral da rolagem da página. Sem JavaScript de rolagem: o CSS liga a
+ * animação à posição da rolagem (`animation-timeline: scroll()`, em globals.css). Onde o navegador não
+ * suporta, os dois somem.
+ */
 export default function ScrollProgress() {
-  const { scrollYProgress } = useScroll();
-  const scaleX = useSpring(scrollYProgress, {
-    stiffness: 100,
-    damping: 30,
-    restDelta: 0.001,
-  });
-
-  const opacity = useTransform(
-    scrollYProgress,
-    [0, 0.02, 0.98, 1],
-    [0, 1, 1, 0],
-  );
-
   return (
     <>
-      {/* Top progress bar */}
-      <motion.div
-        className="fixed left-0 right-0 top-0 z-[9995] h-[2px] origin-left bg-[var(--slash)]"
-        style={{ scaleX, opacity }}
+      <div
+        aria-hidden="true"
+        className="ds-scroll-progress ds-scroll-bar fixed left-0 right-0 top-0 z-[9995] h-[2px] origin-left bg-[var(--slash)]"
       />
 
-      {/* Side scroll indicator */}
-      <motion.div
-        className="fixed right-6 top-1/2 z-[9994] hidden -translate-y-1/2 lg:block"
-        style={{ opacity }}
+      <div
+        aria-hidden="true"
+        className="ds-scroll-progress ds-scroll-rail fixed right-6 top-1/2 z-[9994] hidden -translate-y-1/2 lg:block"
       >
         <div className="relative h-[120px] w-px bg-[rgba(255,255,255,0.08)]">
-          <motion.div
-            className="absolute left-0 top-0 w-full origin-top bg-[var(--slash)]"
-            style={{
-              scaleY: scrollYProgress,
-              height: "100%",
-            }}
-          />
-          <motion.div
-            className="absolute left-1/2 -translate-x-1/2 rounded-full bg-[var(--slash)]"
-            style={{
-              width: 6,
-              height: 6,
-              top: useTransform(scrollYProgress, [0, 1], ["0%", "100%"]),
-              boxShadow: "0 0 10px rgba(204, 255, 0, 0.5)",
-            }}
-          />
+          <div className="ds-scroll-fill absolute left-0 top-0 h-full w-full origin-top bg-[var(--slash)]" />
+          <div className="ds-scroll-dot absolute left-1/2 top-0 h-[6px] w-[6px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-[var(--slash)] shadow-[0_0_10px_rgba(204,255,0,0.5)]" />
         </div>
-      </motion.div>
+      </div>
     </>
   );
 }