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/animations/DrawLine.tsx

@@ -1,40 +1,27 @@
 "use client";
 
-import { motion } from "motion/react";
-import { useState } from "react";
-import { useReducedMotion } from "@/app/hooks/useReducedMotion";
+import { type CSSProperties, useRef } from "react";
+import { useInView } from "@/app/hooks/useInView";
 
 interface DrawLineProps {
   className?: string;
   delay?: number;
 }
 
+/** Linha fina que se desenha da esquerda para a direita quando chega à janela (CSS em globals.css, .ds-draw-line). */
 export function DrawLine({
   className = "",
   delay = 0,
 }: Readonly<DrawLineProps>) {
-  const shouldReduceMotion = useReducedMotion();
-  const [animating, setAnimating] = useState(!shouldReduceMotion);
+  const ref = useRef<HTMLSpanElement>(null);
+  const shown = useInView(ref, { amount: 0.7 });
 
   return (
-    <motion.span
+    <span
+      ref={ref}
       className={`ds-draw-line ${className}`.trim()}
-      initial={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, scaleX: 0 }}
-      whileInView={
-        shouldReduceMotion ? { opacity: 1 } : { opacity: 1, scaleX: 1 }
-      }
-      viewport={{ once: true, amount: 0.7 }}
-      transition={{
-        duration: shouldReduceMotion ? 0.25 : 0.6,
-        delay,
-        ease: [0.16, 1, 0.3, 1],
-      }}
-      style={{
-        transformOrigin: "left",
-        willChange:
-          animating && !shouldReduceMotion ? "transform, opacity" : undefined,
-      }}
-      onAnimationComplete={() => setAnimating(false)}
+      data-shown={shown ? "" : undefined}
+      style={{ "--reveal-delay": `${delay}s` } as CSSProperties}
     />
   );
 }