perf(movimento): uma transição, 3D leve e vídeo certo por aparelho

Passagens com fade e 32 px, cena anterior termina em opacidade 0, sem visibility nem clip-path. 3D do hero como fundo ambiente, sob demanda e desligado em toque, aparelho fraco, saveData e movimento reduzido. Lenis fora do toque e salto direto em âncoras distantes. Vitrine só de clientes, até 3 capítulos, fixa só no desktop e carrossel no celular; vídeo só do projeto em cena com preload metadata. Rótulos mono a partir de 12 px e limão só no contato.

lib/project-showcase.ts

@@ -2,6 +2,7 @@
  * Vitrine dos projetos: tudo o que os cards, a vitrine animada e a janela ampliada sabem sobre os vídeos.
  *
  * Arquivos em public/videos/<id>/ (gravados com scripts/record-project-videos.mjs):
+ * - desktop.webp e mobile.webp: pôsteres; a versão de celular vale abaixo de 768 px (lib/device.ts);
  * - desktop.{webm,mp4,webp} e mobile.{webm,mp4,webp}: reprodução normal, até 3 MB cada vídeo;
  * - scrub-desktop.mp4 e scrub-mobile.mp4: mesmos vídeos com um quadro-chave a cada 6 quadros, para a imagem
  *   acompanhar a rolagem sem travar quando o tempo é mudado a cada quadro;
@@ -27,18 +28,24 @@ export interface ShowcaseConfig {
   chapters: readonly ShowcaseChapter[];
 }
 
-/** Ordem da vitrine = ordem dos cards na home. Capítulos marcados nos quadros dos próprios vídeos. */
+/** Máximo de capítulos por projeto na vitrine: três marcas bastam para situar o visitante sem virar índice. */
+export const MAX_CHAPTERS = 3;
+
+/**
+ * Ordem da vitrine = ordem do SHOWCASE para os projetos que o provedor recebe. Capítulos marcados nos quadros
+ * dos próprios vídeos, no máximo MAX_CHAPTERS por projeto (os mais representativos, com os tempos originais).
+ * O peso soma cerca de 3,5 alturas de tela para os quatro projetos de cliente da home (sev-modaintima,
+ * lavacao-047, sc-plus e as-servicos): a vitrine inteira prende pouco a rolagem.
+ */
 export const SHOWCASE: readonly ShowcaseConfig[] = [
   {
     id: "sev-modaintima",
     accent: "#c2303a",
     durations: { desktop: 17.9, mobile: 30.1 },
-    weight: 1,
+    weight: 0.95,
     chapters: [
       { label: "Abertura", desktop: 0, mobile: 0 },
-      { label: "Categorias", desktop: 2.7, mobile: 1.9 },
       { label: "As favoritas", desktop: 7.2, mobile: 5.6 },
-      { label: "Nossa essência", desktop: 10.7, mobile: 8.6 },
       { label: "Coleção completa", desktop: 13.4, mobile: 11 },
     ],
   },
@@ -46,24 +53,21 @@ export const SHOWCASE: readonly ShowcaseConfig[] = [
     id: "lavacao-047",
     accent: "#4aa3ff",
     durations: { desktop: 30.07, mobile: 30.1 },
-    weight: 1.4,
+    weight: 1.1,
     chapters: [
       { label: "Abertura", desktop: 0, mobile: 0 },
-      { label: "Tabela de preços", desktop: 1.5, mobile: 1.9 },
       { label: "Do sujo ao brilho", desktop: 5.5, mobile: 5.6 },
-      { label: "Como funciona", desktop: 13.5, mobile: 13.2 },
-      { label: "Galeria e mapa", desktop: 18.5, mobile: 17.5 },
       { label: "Perguntas e contato", desktop: 24, mobile: 22 },
     ],
   },
   {
+    // fora da home atual, mas usado em /cases (og-card): a configuração fica
     id: "nutriscan",
     accent: "#2f9e5f",
     durations: { desktop: 15.67, mobile: 26.4 },
-    weight: 0.9,
+    weight: 0.8,
     chapters: [
       { label: "Busca", desktop: 0, mobile: 0 },
-      { label: "Por que confiar", desktop: 2.3, mobile: 3 },
       { label: "Quatro etapas", desktop: 7, mobile: 8 },
       { label: "Apoio ao projeto", desktop: 10.9, mobile: 16.3 },
     ],
@@ -72,12 +76,10 @@ export const SHOWCASE: readonly ShowcaseConfig[] = [
     id: "sc-plus",
     accent: "#22c55e",
     durations: { desktop: 13, mobile: 19.67 },
-    weight: 0.85,
+    weight: 0.8,
     chapters: [
       { label: "Abertura", desktop: 0, mobile: 0 },
-      { label: "Sobre", desktop: 1.5, mobile: 2.2 },
       { label: "Áreas e projetos", desktop: 3.8, mobile: 4.6 },
-      { label: "Apoiadores e participação", desktop: 7.5, mobile: 12.8 },
       { label: "Contato", desktop: 10.4, mobile: 16.9 },
     ],
   },
@@ -132,9 +134,12 @@ export function getOgImagePath(id: string) {
   return `/videos/${id}/og.jpg`;
 }
 
-/** Vídeo desktop de um projeto da vitrine: é o que as capas dos cards tocam. */
-export function getProjectVideo(id: string): ShowcaseAssets | undefined {
-  return byId.has(id) ? getShowcaseAssets(id, "desktop") : undefined;
+/** Arquivos de um projeto da vitrine para o aparelho (desktop por padrão): é o que as capas dos cards usam. */
+export function getProjectVideo(
+  id: string,
+  device: Device = "desktop",
+): ShowcaseAssets | undefined {
+  return byId.has(id) ? getShowcaseAssets(id, device) : undefined;
 }
 
 // ---------------------------------------------------------------------------------------------------------