🎨 House style dark premium

El house style no es una lista de colores bonitos: es un sistema con un rol definido para cada tono. Fondo nocturno (#0D1321), paneles un poco más claros, borde sutil, texto color crema cálido, muted para la jerarquía, y ámbar como único acento dominante. El cian (#2EC4B6) está reservado exclusivamente para código y valores técnicos.

:root {
  --bg:      #0D1321;   /* azul-noite – NUNCA preto puro */
  --bg2:     #1D2D44;   /* painéis e cards */
  --bg3:     #3E5C76;   /* bordas e divisores */
  --fg:      #F0EBD8;   /* texto creme quente */
  --muted:   #748CAB;   /* secundário / hierarquia */
  --accent:  #FFC300;   /* âmbar — destaque ÚNICO */
  --accent2: #FCA311;   /* âmbar quente p/ gradientes */
  --code:    #2EC4B6;   /* verde-água — só código/valores */
}

El sistema usa Sora para titulares (peso 700–800, escala de video de 72–172px en 16:9), Inter para el cuerpo y la interfaz (28–42px), y JetBrains Mono para código, URLs y etiquetas técnicas. Las tres fuentes tienen .woff2 locales: el generador nunca hace solicitudes a una CDN durante la ejecución.

@font-face{font-family:'Sora';font-style:normal;font-weight:700;
  font-display:block;src:url('./fonts/Sora-700.woff2') format('woff2');}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;
  font-display:block;src:url('./fonts/Sora-800.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;
  font-display:block;src:url('./fonts/Inter-400.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;
  font-display:block;src:url('./fonts/JetBrainsMono-400.woff2') format('woff2');}
/* subset: latin — cobre PT-BR: á à â ã é ê í ó ô õ ú ç */

Cada escena tiene una capa de fondo persistente marcada con data-layout-ignore. El motor de layout nunca la reubica. Contiene cuatro elementos: un glow radial ámbar que respira, un ghost text gigante que flota, una cuadrícula hairline y grano (ruido SVG). Juntos crean profundidad sin distraer.

<!-- FUNDO PERSISTENTE — data-layout-ignore -->
<div data-layout-ignore class="bg-layer">
  <!-- glow radial âmbar respirando -->
  <div class="glow-amber"></div>
  <!-- ghost text gigante driftando -->
  <div class="ghost-text">DARK</div>
  <!-- grid hairline -->
  <svg class="grid-lines" ...></svg>
  <!-- grão (SVG feTurbulence) -->
  <canvas class="grain"></canvas>
</div>

.bg-layer {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
}
.glow-amber {
  position: absolute; top: 40%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60%; height: 40%;
  background: radial-gradient(ellipse, #FFC300 0%, transparent 70%);
  opacity: 0.06;
  animation: breathe 4s ease-in-out infinite;
}
.ghost-text {
  position: absolute; font-family: 'Sora', sans-serif;
  font-size: 172px; font-weight: 800;
  color: #F0EBD8; opacity: 0.035;
  animation: drift 8s ease-in-out infinite;
}
@keyframes breathe {
  0%,100% { opacity:.04; transform: translate(-50%,-50%) scale(1); }
  50%     { opacity:.08; transform: translate(-50%,-50%) scale(1.08); }
}
@keyframes drift {
  0%   { transform: translateX(0px) translateY(0px); }
  33%  { transform: translateX(12px) translateY(-6px); }
  66%  { transform: translateX(-8px) translateY(4px); }
  100% { transform: translateX(0px) translateY(0px); }
}

El script fetch-fonts.mjs usa el User-Agent de Chrome 131 para simular el navegador, hace una solicitud a la API de Google Fonts, filtra solo el subset latin (unicode-range U+0000-00FF cubre todo PT-BR: á à â ã é ê í ó ô õ ú ç), descarga los .woff2 y genera assets/fonts/fonts.css.

El mayor error al crear videos con HTML es usar la escala web. En 1920×1080 con zoom 1:1, el texto de 16px desaparece. El house style define headline mínima de 64px, cuerpo de 28–42px, y elementos decorativos con 12–25% de opacidad para crear capas sin recargar. 8–10 elementos por escena es el límite: más que eso crea caos visual en la compresión.

La scene9 (última escena de todos los videos de HyperFrames) es la CTA INEMA.CLUB: texto "CONTINÚA EN" en muted, INEMA en crema (--fg), .CLUB en ámbar con drop-shadow glow, y 🌐 inema.club en JetBrains Mono. Es la firma del canal: todos los videos terminan igual.

function scene9() {
  return `
    <div class="cta-wrap">
      <div class="cta-pre">CONTINUA EM</div>
      <div class="cta-brand">
        <span class="cta-inema">INEMA</span>
        <span class="cta-club">.CLUB</span>
      </div>
      <div class="cta-url">🌐 inema.club</div>
    </div>`;
}

/* CSS correspondente */
.cta-pre  { font-family:'Inter'; color:var(--muted); letter-spacing:.2em; }
.cta-brand{ font-family:'Sora'; font-weight:800; font-size:clamp(72px,8vw,120px); }
.cta-inema{ color:var(--fg); }                /* INEMA — creme */
.cta-club { color:var(--accent);              /* .CLUB — âmbar */
             filter:drop-shadow(0 0 16px #FFC300aa); }
.cta-url  { font-family:'JetBrains Mono'; color:var(--code); } /* 🌐 inema.club */