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

@@ -239,6 +239,7 @@ const listEl = () =>
   screen.queryByRole("region", { name: "Projetos de clientes" });
 const activeLayer = () =>
   document.querySelector('.ds-reel-layer[data-state="active"]') as HTMLElement;
+const caption = () => document.querySelector(".ds-reel-caption") as HTMLElement;
 
 describe("ProjectReel: qual versão entra", () => {
   it("path: no projects in the showcase -> renders nothing at all", () => {
@@ -354,7 +355,10 @@ describe("ProjectReel: measure()", () => {
 
     scrollTo(0.9);
 
-    expect(activeLayer()).toHaveTextContent("SEV Moda Íntima");
+    expect(activeLayer().querySelector(".ds-bframe-url")).toHaveTextContent(
+      "sevmodaintima.com.br",
+    );
+    expect(caption()).toHaveTextContent("SEV Moda Íntima");
   });
 
   it("path: scrolled to a later project -> that project becomes the active layer", () => {
@@ -586,6 +590,70 @@ describe("ProjectReel: vídeos", () => {
   });
 });
 
+describe("ProjectReel: estado das camadas, traços de capítulo e legenda", () => {
+  const states = (selector: string, attribute = "data-state") =>
+    [...document.querySelectorAll(selector)].map((element) =>
+      element.getAttribute(attribute),
+    );
+
+  it("path: a middle project in scene -> layers before it are 'before', the ones after are 'after'", () => {
+    renderReel();
+
+    scrollTo(reelOffset(WEIGHTS, 2, 0.5));
+
+    const layers = states(".ds-reel-layer");
+    expect(layers.length).toBeGreaterThan(3);
+    expect(layers).toEqual(
+      layers.map((_, i) => (i < 2 ? "before" : i === 2 ? "active" : "after")),
+    );
+  });
+
+  it("path: first project, first chapter -> the ticks read now, todo, todo", () => {
+    renderReel();
+
+    scrollTo(0);
+
+    expect(states(".ds-reel-ticks li")).toEqual(["now", "todo", "todo"]);
+    expect(caption().querySelector(".ds-reel-chapter-count")).toHaveTextContent(
+      "01/03",
+    );
+  });
+
+  it("path: end of the project -> the chapter ticks before the current one are 'done', the ones after 'todo'", () => {
+    renderReel();
+
+    scrollTo(reelOffset(WEIGHTS, 0, 0.95));
+
+    const ticks = states(".ds-reel-ticks li");
+    const current = ticks.indexOf("now");
+    expect(current).toBeGreaterThan(0);
+    expect(ticks).toEqual(
+      ticks.map((_, i) =>
+        i < current ? "done" : i === current ? "now" : "todo",
+      ),
+    );
+    expect(ticks.filter((state) => state === "done")).toHaveLength(current);
+  });
+
+  it("path: project with a subtitle -> shown under the title", () => {
+    expect(projects[0].subtitle).toBeTruthy();
+    renderReel();
+
+    expect(caption().querySelector(".ds-reel-sub")).toHaveTextContent(
+      projects[0].subtitle,
+    );
+  });
+
+  it("path: project without a subtitle -> no empty subtitle line in the caption", () => {
+    renderReel([{ ...projects[0], subtitle: "" }, ...projects.slice(1)]);
+
+    expect(caption().querySelector(".ds-reel-sub")).toBeNull();
+    expect(caption().querySelector(".ds-reel-title")).toHaveTextContent(
+      projects[0].title,
+    );
+  });
+});
+
 describe("ProjectReel: rolagem suave até um projeto", () => {
   function pressProject(name: string) {
     fireEvent.click(