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/globals.css

@@ -1481,6 +1481,39 @@ html.lenis {
   }
 }
 
+/* Entrada do diagrama (classe is-drawing posta por useCinematicScroll): linhas se desenham e rótulos
+   aparecem uma única vez, sem acompanhar cada quadro da rolagem */
+@media (prefers-reduced-motion: no-preference) {
+  /* só com as transições ativas (html.lenis): sem o script, o diagrama aparece normalmente */
+  html.lenis .quality-lab:not(.is-drawing) :is(.quality-blueprint, .quality-visual-label, .quality-visual figcaption) {
+    opacity: 0;
+  }
+
+  .quality-lab.is-drawing .quality-blueprint :is(.quality-dimensions path, .quality-browser-frame, .quality-wire, .quality-browser-button) {
+    stroke-dasharray: 1800; /* maior que o maior contorno (moldura: ~1600) */
+    animation: quality-draw 1.1s var(--ease-out) both;
+  }
+
+  .quality-lab.is-drawing :is(.quality-blueprint, .quality-visual-label, .quality-visual figcaption) {
+    animation: quality-fade 0.6s var(--ease-out) both;
+  }
+}
+
+@keyframes quality-draw {
+  from {
+    stroke-dashoffset: 1800;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes quality-fade {
+  from {
+    opacity: 0;
+  }
+}
+
 @keyframes quality-trace {
   from {
     stroke-dashoffset: 1;
@@ -1786,3 +1819,23 @@ html.lenis {
     animation: none;
   }
 }
+
+/* Títulos de seção (TextDiffuseReveal): entram palavra por palavra só com transparência e deslocamento,
+   que a placa de vídeo compõe sem redesenhar */
+.text-reveal-word {
+  display: inline-block;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .text-reveal-word {
+    transition:
+      opacity 0.7s var(--ease-out),
+      transform 0.9s var(--ease-out);
+    transition-delay: calc(var(--d, 0s) + var(--i, 0) * 55ms);
+  }
+
+  .text-reveal:not([data-shown]) .text-reveal-word {
+    opacity: 0;
+    transform: translateY(0.35em);
+  }
+}