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.paths.test.tsx

@@ -0,0 +1,67 @@
+import { render } from "@testing-library/react";
+import { renderToString } from "react-dom/server";
+import { isLowPowerDevice } from "@/lib/device";
+import HeroBackground from "./HeroBackground";
+
+/**
+ * Testes de caminhos-base de HeroBackground: movimento reduzido (nada), aparelho fraco (só as camadas escuras,
+ * sem baixar a cena 3D), aparelho capaz (cena montada depois do efeito) e o HTML do servidor (sem cena).
+ */
+
+let reducedMotion = false;
+jest.mock("@/app/hooks/useReducedMotion", () => ({
+  useReducedMotion: () => reducedMotion,
+}));
+jest.mock("@/lib/device", () => ({ isLowPowerDevice: jest.fn() }));
+jest.mock("next/dynamic", () => ({
+  __esModule: true,
+  default: () =>
+    function MockScene() {
+      return require("react").createElement("canvas", {
+        "data-testid": "hero-scene",
+      });
+    },
+}));
+
+const lowPower = jest.mocked(isLowPowerDevice);
+
+beforeEach(() => {
+  reducedMotion = false;
+  lowPower.mockReset();
+  lowPower.mockReturnValue(false);
+});
+
+describe("HeroBackground", () => {
+  it("path: reduced motion -> renders nothing, even on a capable device", () => {
+    reducedMotion = true;
+
+    const { container } = render(<HeroBackground />);
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("path: capable device -> the 3D scene plus the three dark layers", () => {
+    const { container, getByTestId } = render(<HeroBackground />);
+
+    expect(getByTestId("hero-scene")).toBeInTheDocument();
+    expect(container.querySelectorAll(".pointer-events-none")).toHaveLength(3);
+  });
+
+  it("path: low-power device -> only the dark layers, the 3D scene is never mounted", () => {
+    lowPower.mockReturnValue(true);
+
+    const { container, queryByTestId } = render(<HeroBackground />);
+
+    expect(queryByTestId("hero-scene")).toBeNull();
+    expect(container.querySelectorAll(".pointer-events-none")).toHaveLength(3);
+    expect(lowPower).toHaveBeenCalledTimes(1);
+  });
+
+  it("path: server HTML -> layers without the scene (capability is only known in the browser)", () => {
+    const html = renderToString(<HeroBackground />);
+
+    expect(html).not.toContain("canvas");
+    expect(html).toContain("pointer-events-none");
+    expect(lowPower).not.toHaveBeenCalled();
+  });
+});