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/template.test.tsx

@@ -0,0 +1,88 @@
+import { render, screen } from "@testing-library/react";
+import { useEffect, useState } from "react";
+import Template from "./template";
+
+let mockPathname = "/cases";
+jest.mock("next/navigation", () => ({ usePathname: () => mockPathname }));
+
+const mockMounts = jest.fn();
+const mockProps: Array<Record<string, unknown>> = [];
+
+// o React estável do Jest não exporta <ViewTransition> (só o canary do Next); este dublê conta as montagens
+jest.mock("react", () => {
+  const actual = jest.requireActual("react");
+  function ViewTransition({
+    children,
+    ...props
+  }: { children?: React.ReactNode } & Record<string, unknown>) {
+    mockProps.push(props);
+    actual.useEffect(() => {
+      mockMounts();
+    }, []);
+    return actual.createElement("div", { "data-testid": "vt" }, children);
+  }
+  return { ...actual, ViewTransition };
+});
+
+function Counter() {
+  const [count, setCount] = useState(0);
+  useEffect(() => {
+    setCount(1);
+  }, []);
+  return <p data-testid="state">{count}</p>;
+}
+
+beforeEach(() => {
+  mockPathname = "/cases";
+  mockMounts.mockClear();
+  mockProps.length = 0;
+});
+
+describe("app/template", () => {
+  it("wraps the page in a ViewTransition named page that does not animate in-place updates", () => {
+    render(
+      <Template>
+        <main>Conteúdo</main>
+      </Template>,
+    );
+
+    expect(screen.getByTestId("vt")).toContainElement(screen.getByRole("main"));
+    expect(mockProps[0]).toMatchObject({ name: "page", update: "none" });
+  });
+
+  it("makes the page leaving and the page entering a pair when only the second segment changes (/cases -> /cases/um-projeto)", () => {
+    const { rerender } = render(
+      <Template>
+        <Counter />
+      </Template>,
+    );
+    expect(mockMounts).toHaveBeenCalledTimes(1);
+    expect(screen.getByTestId("state")).toHaveTextContent("1");
+
+    mockPathname = "/cases/sev-modaintima";
+    rerender(
+      <Template>
+        <Counter />
+      </Template>,
+    );
+
+    // a chave é o caminho: a transição desmonta a página que sai e monta a que entra (e o estado dela recomeça)
+    expect(mockMounts).toHaveBeenCalledTimes(2);
+  });
+
+  it("does not remount when the path stays the same (only a re-render, or a #fragment change)", () => {
+    const { rerender } = render(
+      <Template>
+        <Counter />
+      </Template>,
+    );
+
+    rerender(
+      <Template>
+        <Counter />
+      </Template>,
+    );
+
+    expect(mockMounts).toHaveBeenCalledTimes(1);
+  });
+});