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

@@ -0,0 +1,86 @@
+import { render, screen } from "@testing-library/react";
+import { Section } from "./Section";
+
+/**
+ * Testes de caminhos-base de Section (complemento de Reveal.test.tsx): cada parte opcional do cabeçalho
+ * (eyebrow, descrição, aside) aparece só quando é dada, a casca clara é a padrão e o id é opcional.
+ */
+
+describe("Section", () => {
+  it("path: only the title and the body -> no eyebrow, no description, no aside", () => {
+    const { container } = render(
+      <Section title="Quem faz">
+        <p>Corpo</p>
+      </Section>,
+    );
+
+    expect(
+      screen.getByRole("heading", { level: 2, name: "Quem faz" }),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Corpo")).toBeInTheDocument();
+    expect(container.querySelector(".ds-eyebrow")).toBeNull();
+    expect(container.querySelector(".ds-section-description")).toBeNull();
+    expect(container.querySelector("aside")).toBeNull();
+    // a linha que se desenha embaixo do título é sempre desenhada
+    expect(container.querySelector(".ds-draw-line")).toBeInTheDocument();
+  });
+
+  it("path: light skin by default -> no dark class, and no id attribute without one", () => {
+    const { container } = render(<Section title="Titulo">x</Section>);
+
+    const section = container.querySelector("section");
+    expect(section).toHaveClass("ds-section");
+    expect(section).not.toHaveClass("ds-section-dark");
+    expect(section).not.toHaveAttribute("id");
+  });
+
+  it("path: only the eyebrow -> the eyebrow shows, the description and the aside stay out", () => {
+    const { container } = render(
+      <Section title="Titulo" eyebrow="Sobre">
+        x
+      </Section>,
+    );
+
+    expect(screen.getByText("Sobre")).toHaveClass("ds-eyebrow");
+    expect(container.querySelector(".ds-section-description")).toBeNull();
+    expect(container.querySelector("aside")).toBeNull();
+  });
+
+  it("path: only the description -> the description shows, the eyebrow and the aside stay out", () => {
+    const { container } = render(
+      <Section title="Titulo" description="Texto de apoio">
+        x
+      </Section>,
+    );
+
+    expect(screen.getByText("Texto de apoio")).toHaveClass(
+      "ds-section-description",
+    );
+    expect(container.querySelector(".ds-eyebrow")).toBeNull();
+    expect(container.querySelector("aside")).toBeNull();
+  });
+
+  it("path: only the aside -> the aside shows next to the title, the eyebrow and the description stay out", () => {
+    const { container } = render(
+      <Section title="Titulo" aside={<span>lateral</span>}>
+        x
+      </Section>,
+    );
+
+    expect(screen.getByText("lateral").closest("aside")).toBeInTheDocument();
+    expect(container.querySelector(".ds-eyebrow")).toBeNull();
+    expect(container.querySelector(".ds-section-description")).toBeNull();
+  });
+
+  it("path: children animation disabled -> the body is a plain block, not inside a reveal", () => {
+    const { container } = render(
+      <Section title="Titulo" disableChildrenAnimation>
+        <p>Corpo</p>
+      </Section>,
+    );
+
+    const body = screen.getByText("Corpo").parentElement;
+    expect(body?.parentElement).toHaveClass("ds-section-shell");
+    expect(container.querySelectorAll(".ds-reveal")).toHaveLength(0);
+  });
+});