perf(movimento): vitrine e 3D mais leves, WebGL por software lembrado na sessão e suporte ao WebKit

app/components/showcase/ProjectLightbox.tsx

@@ -33,6 +33,15 @@ const formatTime = (seconds: number) => {
   return `${Math.floor(whole / 60)}:${String(whole % 60).padStart(2, "0")}`;
 };
 
+/** A duração do vídeo já chegou? Antes dos metadados ela é 0 (ou NaN), e "0:00 / 0:00" parece um vídeo vazio. */
+const isKnown = (duration: number) => Number.isFinite(duration) && duration > 0;
+
+/** "0:07 / 0:30"; "–:– / –:–" enquanto a duração não carrega. */
+const clock = (elapsed: number, duration: number) =>
+  isKnown(duration)
+    ? `${formatTime(elapsed)} / ${formatTime(duration)}`
+    : "–:– / –:–";
+
 /**
  * Vídeo ampliado: janela modal nativa (<dialog>: foco preso, Esc fecha, foco volta ao botão que abriu),
  * com troca desktop/celular que mantém o ponto do site, capítulos clicáveis e controles próprios.
@@ -353,7 +362,7 @@ export function ProjectLightbox({
             </svg>
           </button>
           <span className="ds-lb-time" aria-hidden="true">
-            {formatTime(fraction * duration)} / {formatTime(duration)}
+            {clock(fraction * duration, duration)}
           </span>
           <input
             type="range"
@@ -366,7 +375,11 @@ export function ProjectLightbox({
               seekTo(Number(event.target.value) / 1000)
             }
             aria-label="Posição do vídeo"
-            aria-valuetext={`${formatTime(fraction * duration)} de ${formatTime(duration)}`}
+            aria-valuetext={
+              isKnown(duration)
+                ? `${formatTime(fraction * duration)} de ${formatTime(duration)}`
+                : "duração ainda não carregada"
+            }
           />
         </div>