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/cinematic/fragment-nav.paths.test.tsx

@@ -0,0 +1,50 @@
+import { elementForHash, samePageHashTarget } from "./fragment-nav";
+
+/**
+ * Testes de caminhos-base de elementForHash e de samePageHashTarget (complemento de fragment-nav.test.tsx):
+ * hash vazio, só "#", id com percent-encoding, hash malformado, id que não existe, e o clique que o `<a>` de um
+ * SVG recebe (não é um HTMLAnchorElement, então não é âncora de página).
+ */
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+describe("elementForHash", () => {
+  it.each([
+    ["an empty hash", ""],
+    ["a lone #", "#"],
+    ["an id that does not exist", "#nada"],
+    ["a malformed percent-encoding", "#%E0%A4%A"],
+  ])("path: %s -> null", (_label, hash) => {
+    document.body.innerHTML = `<section id="alvo"></section>`;
+
+    expect(elementForHash(hash)).toBeNull();
+  });
+
+  it("path: an id that exists -> that element", () => {
+    document.body.innerHTML = `<section id="alvo"></section>`;
+
+    expect(elementForHash("#alvo")?.id).toBe("alvo");
+  });
+
+  it("path: an id written with percent-encoding -> decoded before the lookup", () => {
+    document.body.innerHTML = `<section id="seção"></section>`;
+
+    expect(elementForHash("#se%C3%A7%C3%A3o")?.id).toBe("seção");
+  });
+});
+
+describe("samePageHashTarget: o que não é âncora de página", () => {
+  it("path: the closest link is an SVG <a> -> null, even with an href to this page", () => {
+    document.body.innerHTML = `
+      <svg><a href="/#alvo"><text id="rotulo">ir</text></a></svg>
+      <section id="alvo"></section>`;
+    const event = new MouseEvent("click", { bubbles: true });
+    Object.defineProperty(event, "target", {
+      value: document.getElementById("rotulo"),
+    });
+
+    expect(samePageHashTarget(event)).toBeNull();
+  });
+});