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

@@ -0,0 +1,109 @@
+import { act, render, screen } from "@testing-library/react";
+import CinematicOverlays from "./CinematicOverlays";
+
+/**
+ * Testes de caminhos-base de CinematicOverlays (complemento de CinematicOverlays.test.tsx): a troca de página
+ * com a página montada (de fora da home para a home e de volta) e as duas condições do grão juntas.
+ */
+
+let mockPathname = "/";
+jest.mock("next/navigation", () => ({ usePathname: () => mockPathname }));
+
+const mockLoaded = jest.fn();
+jest.mock("./FilmGrain", () => {
+  mockLoaded();
+  return {
+    __esModule: true,
+    default: function MockGrain() {
+      return <div data-testid="grain" />;
+    },
+  };
+});
+
+/** O import dinâmico do grão resolve em microtarefas. */
+const loaded = () =>
+  act(async () => {
+    for (let i = 0; i < 5; i++) await Promise.resolve();
+  });
+
+const original = window.matchMedia;
+
+function mockMedia(active: string[] = []) {
+  window.matchMedia = jest.fn().mockImplementation((query: string) => ({
+    matches: active.includes(query),
+    media: query,
+    addEventListener() {},
+    removeEventListener() {},
+  }));
+}
+
+beforeEach(() => {
+  mockPathname = "/";
+  mockLoaded.mockClear();
+  mockMedia();
+});
+
+afterEach(() => {
+  window.matchMedia = original;
+});
+
+describe("CinematicOverlays: troca de página", () => {
+  it("path: arriving on the home from another page with a mouse -> the grain and the progress bar appear", async () => {
+    mockPathname = "/cases";
+    const { container, rerender } = render(<CinematicOverlays />);
+    await loaded();
+    expect(container).toBeEmptyDOMElement();
+
+    mockPathname = "/";
+    rerender(<CinematicOverlays />);
+    await loaded();
+
+    expect(screen.getByTestId("grain")).toBeInTheDocument();
+    expect(container.querySelector(".ds-scroll-bar")).toBeInTheDocument();
+  });
+
+  it("path: leaving the home after the grain loaded -> everything goes away, and comes back on return", async () => {
+    const { container, rerender } = render(<CinematicOverlays />);
+    await loaded();
+    expect(screen.getByTestId("grain")).toBeInTheDocument();
+
+    mockPathname = "/servicos";
+    rerender(<CinematicOverlays />);
+    expect(screen.queryByTestId("grain")).toBeNull();
+    expect(container).toBeEmptyDOMElement();
+
+    mockPathname = "/";
+    rerender(<CinematicOverlays />);
+    await loaded();
+    expect(screen.getByTestId("grain")).toBeInTheDocument();
+    expect(container.querySelector(".ds-scroll-bar")).toBeInTheDocument();
+  });
+
+  it("path: a sub-route that merely starts like the home path -> not the home", async () => {
+    mockPathname = "/cases/sev-modaintima";
+    const { container } = render(<CinematicOverlays />);
+    await loaded();
+
+    expect(container).toBeEmptyDOMElement();
+    expect(screen.queryByTestId("grain")).toBeNull();
+  });
+});
+
+describe("CinematicOverlays: condições do grão juntas", () => {
+  it("path: touch screen and reduced motion together -> no grain, the progress bar stays", async () => {
+    mockMedia(["(pointer: coarse)", "(prefers-reduced-motion: reduce)"]);
+    const { container } = render(<CinematicOverlays />);
+    await loaded();
+
+    expect(screen.queryByTestId("grain")).toBeNull();
+    expect(container.querySelector(".ds-scroll-bar")).toBeInTheDocument();
+  });
+
+  it("path: no matchMedia in the browser -> counts as mouse with motion allowed: the grain loads", async () => {
+    window.matchMedia = undefined as unknown as typeof window.matchMedia;
+    render(<CinematicOverlays />);
+    await loaded();
+
+    expect(screen.getByTestId("grain")).toBeInTheDocument();
+  });
+});