feat(showcase): moldura de navegador, um video por vez e video ampliado nos cards

- cards com moldura de navegador (endereco real) e brilho na cor do site no card que toca
- um video por vez: o do card sob o mouse/foco, ou o mais perto do centro da tela; nada baixa
  antes de tocar, e um botao pausa os videos que se mexem sozinhos
- janela ampliada em <dialog> nativo: troca computador/celular mantendo o ponto do site,
  capitulos clicaveis, controles proprios, setas entre projetos e foco devolvido ao fechar
- dados e capitulos de cada projeto em lib/project-showcase.ts (substitui project-videos.ts)

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

app/components/ProjectCover.tsx

@@ -1,8 +1,13 @@
 import Image from "next/image";
-import { getProjectVideo } from "@/lib/project-videos";
-import { ProjectVideo } from "./ProjectVideo";
+import { getProjectVideo } from "@/lib/project-showcase";
+import { ProjectMedia } from "./showcase/ProjectMedia";
 
-type CoverProject = { id: string; title: string };
+type CoverProject = {
+  id: string;
+  title: string;
+  demoUrl?: string | null;
+  githubUrl?: string | null;
+};
 
 /** Capturas de tela publicadas dos projetos que têm interface pública. */
 const SCREENSHOTS: Record<string, string | undefined> = {
@@ -36,13 +41,7 @@ export function ProjectCover({
   const video = getProjectVideo(project.id);
   const src = SCREENSHOTS[project.id];
 
-  if (video) {
-    return (
-      <div className="ds-cover">
-        <ProjectVideo video={video} title={project.title} />
-      </div>
-    );
-  }
+  if (video) return <ProjectMedia project={project} />;
 
   if (src) {
     return (