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

@@ -1,25 +1,35 @@
 "use client";
 
-import dynamic from "next/dynamic";
 import { usePathname } from "next/navigation";
+import { type ComponentType, useEffect, useState } from "react";
+import { isCoarsePointer, prefersReducedMotion } from "@/lib/device";
+import ScrollProgress from "./ScrollProgress";
 
-const FilmGrain = dynamic(() => import("./FilmGrain"), { ssr: false });
-const ScrollProgress = dynamic(() => import("./ScrollProgress"), {
-  ssr: false,
-});
-
+/**
+ * Efeitos por cima da home: a barra de progresso (CSS puro) e o grão de filme. O grão só existe com mouse e sem
+ * movimento reduzido, e é importado só nesse caso: no toque o pacote dele nem é baixado, e nada fica montado,
+ * invisível, medindo a tela.
+ */
 export default function CinematicOverlays() {
-  const pathname = usePathname();
-  const isHome = pathname === "/";
+  const isHome = usePathname() === "/";
+  const [Grain, setGrain] = useState<ComponentType | null>(null);
 
+  useEffect(() => {
+    if (!isHome || isCoarsePointer() || prefersReducedMotion()) return;
+    let alive = true;
+    import("./FilmGrain").then((module) => {
+      if (alive) setGrain(() => module.default);
+    });
+    return () => {
+      alive = false;
+    };
+  }, [isHome]);
+
+  if (!isHome) return null;
   return (
     <>
-      {isHome ? (
-        <>
-          <FilmGrain />
-          <ScrollProgress />
-        </>
-      ) : null}
+      {Grain && <Grain />}
+      <ScrollProgress />
     </>
   );
 }