perf(movimento): sem tempo morto, vídeos regravados e 3D sem React Three Fiber

Legenda do mergulho até Projetos cobrir a cena; transição de página sem blur e com fundo escuro; foco no conteúdo ao trocar de página; listas com marcador e dois pesos de título; vídeos da SEV e da SC Plus regravados sem quadros brancos; scrub a 12-15 fps (-30%); vitrine com uma parada de Tab e setas, contador no celular e CSS sob demanda; âncoras num módulo só (fragment-nav); FramePulse com setInterval; CSS morto removido.

app/components/showcase/ProjectReel.paths.test.tsx

@@ -8,6 +8,14 @@ import { ShowcaseProvider } from "./ShowcaseProvider";
 import { reelOffset } from "./showcase-math";
 import { PINNED_QUERY } from "./useShowcaseMedia";
 
+// o pacote da vitrine fixa e o da janela ampliada chegam sob demanda (React.lazy): aqui entram já, para o teste não esperar
+jest.mock("./PinnedReelLazy", () => ({
+  PinnedReelLazy: jest.requireActual("./PinnedReel").default,
+}));
+jest.mock("./ProjectLightboxLazy", () => ({
+  ProjectLightboxLazy: jest.requireActual("./ProjectLightbox").ProjectLightbox,
+}));
+
 /**
  * Testes de caminhos-base de ProjectReel (complemento de ProjectReel.test.tsx):
  * - qual versão da vitrine entra (fixa só com largura e altura de desktop e sem movimento reduzido; lista em
@@ -741,3 +749,46 @@ describe("ProjectReel: rolagem suave até um projeto", () => {
     return reelOffset(WEIGHTS, index, 0) * scrollable;
   }
 });
+
+describe("ProjectReel: altura do cabeçalho descontada na rolagem até um projeto", () => {
+  function pressAndLand(name: string) {
+    (window.scrollTo as jest.Mock).mockClear();
+    const view = renderReel();
+    fireEvent.click(
+      within(
+        screen.getByRole("navigation", { name: "Projetos da vitrine" }),
+      ).getByRole("button", { name }),
+    );
+    act(() => {
+      jest.advanceTimersByTime(2000);
+    });
+    const calls = (window.scrollTo as jest.Mock).mock.calls;
+    view.unmount();
+    return calls[calls.length - 1][0].top as number;
+  }
+
+  function setWidth(width: number) {
+    Object.defineProperty(window, "innerWidth", {
+      configurable: true,
+      value: width,
+    });
+  }
+
+  afterEach(() => {
+    document.documentElement.style.removeProperty("--site-header-height");
+  });
+
+  it("path: no --site-header-height -> 60 px; set later at the same window width -> still the cached value; a new width -> read again", () => {
+    setWidth(1111);
+    const withoutVariable = pressAndLand("SC Plus Aquicultura");
+
+    document.documentElement.style.setProperty("--site-header-height", "80px");
+    const sameWidth = pressAndLand("SC Plus Aquicultura");
+    expect(sameWidth).toBe(withoutVariable);
+
+    setWidth(1112);
+    const newWidth = pressAndLand("SC Plus Aquicultura");
+    // o cabeçalho de 80 px deixa 20 px a menos de rolagem do que o de 60 px
+    expect(newWidth).toBe(withoutVariable - 20);
+  });
+});