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/Section.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-import { motion, type Variants } from "motion/react";
-import type React from "react";
-import { useReducedMotion } from "@/app/hooks/useReducedMotion";
+import { type CSSProperties, type ReactNode, useRef } from "react";
+import { useInView } from "@/app/hooks/useInView";
 import { DrawLine } from "./animations/DrawLine";
 import { TextDiffuseReveal } from "./animations/TextDiffuseReveal";
 import { Reveal } from "./Reveal";
@@ -13,11 +12,15 @@ interface SectionProps {
   title: string;
   description?: string;
   dark?: boolean;
-  aside?: React.ReactNode;
-  children: React.ReactNode;
+  aside?: ReactNode;
+  children: ReactNode;
   disableChildrenAnimation?: boolean;
 }
 
+/** Atraso (s) de cada item do cabeçalho: entram em escada, como a linha que se desenha logo depois. */
+const stagger = (seconds: number) =>
+  ({ "--reveal-delay": `${seconds}s` }) as CSSProperties;
+
 export const Section = ({
   id,
   eyebrow,
@@ -28,50 +31,23 @@ export const Section = ({
   children,
   disableChildrenAnimation = false,
 }: SectionProps) => {
-  const shouldReduceMotion = useReducedMotion();
+  const headerRef = useRef<HTMLDivElement>(null);
+  const headerShown = useInView(headerRef);
   const baseClass = dark ? "ds-section ds-section-dark" : "ds-section";
 
-  const containerVariants: Variants = {
-    hidden: {},
-    visible: {
-      transition: {
-        delayChildren: 0.02,
-        staggerChildren: 0.08,
-      },
-    },
-  };
-
-  const itemVariants: Variants = {
-    hidden: shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: 18 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: shouldReduceMotion
-        ? { duration: 0.25, ease: [0.16, 1, 0.3, 1] }
-        : {
-            type: "spring",
-            stiffness: 60,
-            damping: 20,
-            mass: 0.85,
-          },
-    },
-  };
-
   return (
     <section id={id} className={baseClass}>
       <div className="ds-section-shell">
-        <motion.div
+        <div
+          ref={headerRef}
           className="ds-section-header"
-          initial="hidden"
-          whileInView="visible"
-          viewport={{ once: true, amount: 0.2 }}
-          variants={containerVariants}
+          data-shown={headerShown ? "" : undefined}
         >
           <div className="ds-section-meta">
             {eyebrow && (
-              <motion.p className="ds-eyebrow" variants={itemVariants}>
+              <p className="ds-eyebrow ds-reveal" style={stagger(0.02)}>
                 {eyebrow}
-              </motion.p>
+              </p>
             )}
 
             <h2 className="ds-section-title">
@@ -79,21 +55,23 @@ export const Section = ({
             </h2>
 
             {description && (
-              <motion.p
-                className="ds-section-description"
-                variants={itemVariants}
+              <p
+                className="ds-section-description ds-reveal"
+                style={stagger(0.1)}
               >
                 {description}
-              </motion.p>
+              </p>
             )}
 
             <DrawLine delay={0.16} />
           </div>
 
           {aside && (
-            <motion.aside variants={itemVariants}>{aside}</motion.aside>
+            <aside className="ds-reveal" style={stagger(0.18)}>
+              {aside}
+            </aside>
           )}
-        </motion.div>
+        </div>
 
         {!disableChildrenAnimation ? (
           <Reveal y={40} duration={0.9} delay={0.12}>