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.

lib/project-showcase.test.ts

@@ -127,8 +127,7 @@ describe("showcase assets", () => {
           const assets = getShowcaseAssets(id, device);
           return [assets.poster, ...assets.sources.map((s) => s.src)];
         }),
-        getScrubSource(id, "desktop"),
-        getScrubSource(id, "mobile"),
+        getScrubSource(id),
         getOgImagePath(id),
       ];
       for (const file of files) {
@@ -137,4 +136,13 @@ describe("showcase assets", () => {
       }
     },
   );
+
+  it.each(PROJECT_VIDEO_IDS)(
+    "does not keep a scrub video for the phone frame of %s (it only shows the poster)",
+    (id) => {
+      expect(existsSync(publicFile(`/videos/${id}/scrub-mobile.mp4`))).toBe(
+        false,
+      );
+    },
+  );
 });

lib/project-showcase.ts

@@ -4,8 +4,9 @@
  * 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;
+ * - scrub-desktop.mp4 (960x600, H.264 sem áudio, ~0,4 a 1,9 MB): o mesmo vídeo com um quadro-chave a cada 6
+ *   quadros, para a imagem acompanhar a rolagem sem travar quando o tempo é mudado a cada quadro. É o único
+ *   vídeo da vitrine fixa: o celular da moldura mostra só o pôster, então não existe scrub-mobile.mp4;
  * - og.jpg: capa 1200x630 das imagens de compartilhamento.
  */
 
@@ -126,8 +127,9 @@ export function getShowcaseAssets(id: string, device: Device) {
   } satisfies ShowcaseAssets;
 }
 
-export function getScrubSource(id: string, device: Device) {
-  return `/videos/${id}/scrub-${device}.mp4`;
+/** Vídeo da vitrine fixa (só o do computador: o celular da moldura mostra o pôster). */
+export function getScrubSource(id: string) {
+  return `/videos/${id}/scrub-desktop.mp4`;
 }
 
 export function getOgImagePath(id: string) {

lib/utils.ts

@@ -1,6 +0,0 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}