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

@@ -1,5 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import { useEffect, useState } from "react";
+import { resetFocusOnNavigation } from "./hooks/useFocusOnNavigation";
 import Template from "./template";
 
 let mockPathname = "/cases";
@@ -36,8 +37,18 @@ beforeEach(() => {
   mockPathname = "/cases";
   mockMounts.mockClear();
   mockProps.length = 0;
+  resetFocusOnNavigation();
 });
 
+/** O contêiner que o layout põe em volta da página: o destino do foco depois da troca. */
+function Shell({ children }: { children: React.ReactNode }) {
+  return (
+    <div id="main-content" tabIndex={-1} data-testid="main">
+      <Template>{children}</Template>
+    </div>
+  );
+}
+
 describe("app/template", () => {
   it("wraps the page in a ViewTransition named page that does not animate in-place updates", () => {
     render(
@@ -85,4 +96,64 @@ describe("app/template", () => {
 
     expect(mockMounts).toHaveBeenCalledTimes(1);
   });
+
+  it("leaves the focus alone on the first load and moves it to #main-content, without scrolling, when the path changes", () => {
+    const scrollTo = jest.spyOn(window, "scrollTo");
+    const focus = jest.spyOn(HTMLElement.prototype, "focus");
+    const { rerender } = render(
+      <Shell>
+        <button type="button">Dentro da página</button>
+      </Shell>,
+    );
+    expect(focus).not.toHaveBeenCalled();
+    expect(screen.getByTestId("main")).not.toHaveFocus();
+
+    mockPathname = "/cases/sev-modaintima";
+    rerender(
+      <Shell>
+        <button type="button">Dentro da página</button>
+      </Shell>,
+    );
+
+    expect(screen.getByTestId("main")).toHaveFocus();
+    expect(focus).toHaveBeenCalledWith({ preventScroll: true });
+    expect(scrollTo).not.toHaveBeenCalled();
+    focus.mockRestore();
+    scrollTo.mockRestore();
+  });
+
+  it("does not take the focus on a re-render of the same path", () => {
+    const { rerender } = render(
+      <Shell>
+        <p>Página</p>
+      </Shell>,
+    );
+    rerender(
+      <Shell>
+        <p>Página de novo</p>
+      </Shell>,
+    );
+    expect(screen.getByTestId("main")).not.toHaveFocus();
+  });
+
+  it("never starts a view transition by itself, on the first load or on the focus move", () => {
+    const start = jest.fn();
+    Object.defineProperty(document, "startViewTransition", {
+      configurable: true,
+      value: start,
+    });
+    const { rerender } = render(
+      <Shell>
+        <p>Página</p>
+      </Shell>,
+    );
+    mockPathname = "/servicos";
+    rerender(
+      <Shell>
+        <p>Página</p>
+      </Shell>,
+    );
+    expect(start).not.toHaveBeenCalled();
+    Reflect.deleteProperty(document, "startViewTransition");
+  });
 });