perf(home): transicoes de Qualidade so com translate/opacity e titulos por palavra em CSS

Medido com trace do Chromium (rasterizacao no mesmo trecho de rolagem):
IA->Qualidade 840->558 ms, dentro de Qualidade 34->18 ms, Qualidade->Sobre
819->643 ms. Recorte animado, escala de camadas grandes e o desenho do diagrama
a cada quadro saem; o diagrama se desenha uma vez em CSS. TextDiffuseReveal
deixa de animar cada letra com desfoque.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

app/components/animations/TextDiffuseReveal.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from "@testing-library/react";
+
+import { TextDiffuseReveal } from "./TextDiffuseReveal";
+
+let mockInView = false;
+jest.mock("motion/react", () => ({ useInView: () => mockInView }));
+
+describe("TextDiffuseReveal", () => {
+  beforeEach(() => {
+    mockInView = false;
+  });
+
+  it("keeps the whole sentence readable once for assistive technology", () => {
+    const { container } = render(<TextDiffuseReveal text="Software feito a partir do seu negócio" />);
+
+    expect(screen.getByText("Software feito a partir do seu negócio")).toHaveClass("sr-only");
+    const words = container.querySelectorAll(".text-reveal-word");
+    expect(words).toHaveLength(7);
+    expect(words[0].closest("[aria-hidden='true']")).not.toBeNull();
+  });
+
+  it("marks the title as shown only after it enters the viewport", () => {
+    const { container, rerender } = render(<TextDiffuseReveal text="Reveal me" />);
+    expect(container.querySelector(".text-reveal")).not.toHaveAttribute("data-shown");
+
+    mockInView = true;
+    rerender(<TextDiffuseReveal text="Reveal me" />);
+    expect(container.querySelector(".text-reveal")).toHaveAttribute("data-shown");
+  });
+});