🎨 House style dark premium

O house style não é uma lista de cores bonitas — é um sistema com papel definido para cada tom. Fundo de noite (#0D1321), painéis ligeiramente mais claros, borda sutil, texto creme quente, muted para hierarquia, e âmbar como accent único dominante. O ciano (#2EC4B6) é reservado exclusivamente para código e 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 */
}

O sistema usa Sora para headlines (peso 700–800, escala vídeo 72–172px em 16:9), Inter para corpo e interface (28–42px), e JetBrains Mono para código, URLs e labels técnicos. As três fontes têm .woff2 locais — o gerador nunca faz request para CDN em runtime.

@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 cena tem uma camada de fundo persistente marcada com data-layout-ignore. Ela nunca é reposicionada pelo layout engine. Contém quatro elementos: glow radial âmbar respirando, ghost text gigante driftando, grid hairline e grão (ruído SVG). Juntos criam profundidade sem distrair.

<!-- 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); }
}

O script fetch-fonts.mjs usa o User-Agent do Chrome 131 para simular browser, faz request à API do Google Fonts, filtra apenas o subset latin (unicode-range U+0000-00FF cobre todo PT-BR: á à â ã é ê í ó ô õ ú ç), baixa os .woff2 e gera assets/fonts/fonts.css.

O maior erro ao criar vídeos com HTML é usar escala web. Em 1920×1080 com zoom 1:1, texto de 16px some. O house style define headline mínima de 64px, corpo 28–42px, e decorativos com 12–25% de opacidade para criar camadas sem poluir. 8–10 elementos por cena é o limite — mais que isso cria caos visual na compressão.

A scene9 (última cena de todo vídeo HyperFrames) é a CTA INEMA.CLUB: texto "CONTINUA EM" em muted, INEMA em creme (--fg), .CLUB em âmbar com drop-shadow glow, e 🌐 inema.club em JetBrains Mono. É a assinatura do canal — todos os vídeos terminam 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 */