perf(movimento): uma transição, 3D leve e vídeo certo por aparelho

Passagens com fade e 32 px, cena anterior termina em opacidade 0, sem visibility nem clip-path. 3D do hero como fundo ambiente, sob demanda e desligado em toque, aparelho fraco, saveData e movimento reduzido. Lenis fora do toque e salto direto em âncoras distantes. Vitrine só de clientes, até 3 capítulos, fixa só no desktop e carrossel no celular; vídeo só do projeto em cena com preload metadata. Rótulos mono a partir de 12 px e limão só no contato.

app/components/cinematic/HeroBackground.tsx

@@ -1,23 +1,32 @@
 "use client";
 
 import dynamic from "next/dynamic";
+import { useEffect, useState } from "react";
 import { useReducedMotion } from "@/app/hooks/useReducedMotion";
+import { isLowPowerDevice } from "@/lib/device";
 
 const HeroScene = dynamic(() => import("./HeroScene"), { ssr: false });
 
 /**
  * Reusable 3D animated background for internal hero sections.
  * Drop this inside any `relative overflow-hidden` dark section.
+ * A cena WebGL só monta em aparelho que aguenta (sem toque, sem pouca CPU/memória, sem "economizar dados"):
+ * nos outros fica o fundo escuro, sem baixar o Three.js.
  */
 export default function HeroBackground() {
   const shouldReduceMotion = useReducedMotion();
+  const [capable, setCapable] = useState(false);
+
+  useEffect(() => {
+    setCapable(!isLowPowerDevice());
+  }, []);
 
   if (shouldReduceMotion) return null;
 
   return (
     <>
       {/* 3D particle scene */}
-      <HeroScene />
+      {capable && <HeroScene />}
 
       {/* Cinematic radial vignette */}
       <div className="pointer-events-none absolute inset-0 z-[1] bg-[radial-gradient(ellipse_80%_60%_at_50%_40%,transparent_0%,rgba(10,10,10,0.5)_55%,var(--ink)_100%)]" />