/* hero-visor.css — usado SÓ na página Sobre.
   Coloca a cena 3D no lugar do fundo do hero e apaga a foto/blur
   originais. O conteúdo do site continua por cima, intocado. */

.hv-palco{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  transition:opacity .12s linear;
}
.hv-palco canvas{ display:block; width:100%; height:100%; }

.hv-riscos{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  width:100vw; height:100svh; mix-blend-mode:screen;
}

/* Camada do LCD: tamanho intrínseco = proporção do próprio LCD, definida
   pelo JS. A homografia mapeia esse retângulo no quadrilátero da tela.
   Não usa o tamanho da janela — era isso que esmagava a imagem no celular. */
.hv-visor{
  position:fixed; left:0; top:0; z-index:0; opacity:0;
  transform-origin:0 0; overflow:hidden; background:#070807;
  pointer-events:none; will-change:transform;
}
/* Camada de tela cheia: assume no fim, já na proporção da janela. */
.hv-cheio{
  position:fixed; inset:0; z-index:0; opacity:0;
  overflow:hidden; background:#070807; pointer-events:none;
}
.hv-visor .hv-foto,
.hv-cheio .hv-foto{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:saturate(.72) brightness(.72) contrast(1.06);
}

/* ---------- leitura da FX3, sobre a imagem ----------
   Tudo em `em`, a partir de um tamanho-base único por camada. As DUAS
   camadas (a do LCD e a de tela cheia) precisam da mesma tipografia durante
   o crossfade — se uma usasse % da própria caixa, o texto pularia na troca.
   Com um knob só dá também para abrir o HUD isolado e conferir. */
/* tamanho-base da leitura: é DAQUI que sai todo o resto, em em.
   ~1.15vmin num monitor de 900 dá 10px — o tamanho que a FX3 tem de verdade. */
.hv-visor, .hv-cheio{ font-size:clamp(8.5px, 1.15vmin, 17px) }

.hv-visor .hv-topo, .hv-cheio .hv-topo,
.hv-visor .hv-base, .hv-cheio .hv-base,
.hv-visor .hv-tcbar, .hv-cheio .hv-tcbar,
.hv-visor .hv-canto, .hv-cheio .hv-canto{
  position:absolute; z-index:2;
  font:400 1em/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.06em; color:rgba(242,241,236,.92);
  text-shadow:0 1px 3px rgba(0,0,0,.85);
  pointer-events:none;
}

/* grade de terços */
.hv-visor .hv-grade, .hv-cheio .hv-grade{ position:absolute; inset:0; z-index:1 }
.hv-grade i{ position:absolute; background:rgba(255,255,255,.16) }
.hv-grade i:nth-child(1){ left:33.333%; top:0; bottom:0; width:1px }
.hv-grade i:nth-child(2){ left:66.666%; top:0; bottom:0; width:1px }
.hv-grade i:nth-child(3){ top:33.333%; left:0; right:0; height:1px }
.hv-grade i:nth-child(4){ top:66.666%; left:0; right:0; height:1px }

/* cantos de enquadramento */
.hv-visor .hv-marcas, .hv-cheio .hv-marcas{ position:absolute; inset:0; z-index:1 }
.hv-visor .hv-marcas span, .hv-cheio .hv-marcas span{
  position:absolute; width:1.913em; height:1.913em;
  border:1.5px solid rgba(242,241,236,.5);
}
.hv-marcas span:nth-child(1){ top:1.739em; left:1.739em; border-right:0; border-bottom:0 }
.hv-marcas span:nth-child(2){ top:1.739em; right:1.739em; border-left:0; border-bottom:0 }
.hv-marcas span:nth-child(3){ bottom:1.739em; left:1.739em; border-right:0; border-top:0 }
.hv-marcas span:nth-child(4){ bottom:1.739em; right:1.739em; border-left:0; border-top:0 }

/* ---------- barra de cima ---------- */
.hv-visor .hv-topo, .hv-cheio .hv-topo{
  top:1.739em; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 2.261em;
}
.hv-topo .hv-g, .hv-base .hv-g{ display:flex; align-items:center; gap:1.304em }

/* indicadores de mídia: os dois quadradinhos verdes do canto */
.hv-mid{ display:inline-flex; flex-direction:column; gap:0.217em; line-height:1 }
.hv-mid b{
  display:flex; align-items:center; gap:0.348em;
  font-weight:400; font-size:.92em; color:rgba(242,241,236,.75);
}
.hv-mid b::after{
  content:""; width:0.652em; height:0.652em; background:#46C46A;
}
.hv-mid b:nth-child(2)::after{ background:rgba(70,196,106,.45) }

.hv-visor .hv-rec, .hv-cheio .hv-rec{
  position:static; transform:none;
  display:flex; align-items:center; gap:0.609em;
  letter-spacing:.18em; color:#F2F1EC;
}
.hv-visor .hv-rec i, .hv-cheio .hv-rec i{
  width:0.783em; height:0.783em; border-radius:50%; background:#E4574B;
  animation:hv-pisca 1.6s steps(1,end) infinite;
}
@keyframes hv-pisca{ 0%,60%{opacity:1} 61%,100%{opacity:.15} }

/* slots de cartão: o número vem dentro de uma caixinha, como na câmera */
.hv-slot{ display:inline-flex; align-items:center; gap:0.478em }
.hv-slot u{
  text-decoration:none; font-size:.86em; line-height:1;
  padding:0.217em 0.435em; border-radius:0.217em;
  background:rgba(242,241,236,.88); color:#0B0C0B;
}
.hv-bat{ display:inline-flex; align-items:center; gap:0.522em }
.hv-bat s{
  text-decoration:none; position:relative; margin-right:.4em;
  width:2.261em; height:1.043em; padding:0.174em;
  border:1px solid rgba(242,241,236,.85); border-radius:0.174em;
  display:inline-block;
}
.hv-bat s::after{                       /* o bico do desenho da bateria */
  content:""; position:absolute; right:-0.391em; top:50%; transform:translateY(-50%);
  width:0.261em; height:0.478em; background:rgba(242,241,236,.85);
}
.hv-bat em{ display:block; width:31%; height:100%; background:rgba(242,241,236,.85) }

/* timecode: linha própria, centralizada, logo abaixo da barra */
.hv-visor .hv-tcbar, .hv-cheio .hv-tcbar{
  top:4em; left:0; right:0; text-align:center;
  font-size:1.13em; letter-spacing:.1em;
}

/* ---------- canto de baixo: nome do clipe + histograma ---------- */
.hv-visor .hv-canto, .hv-cheio .hv-canto{
  right:2.261em; bottom:4.522em;
  display:flex; align-items:flex-end; gap:1.043em;
}
.hv-clipe{ letter-spacing:.08em; padding-bottom:0.261em }
.hv-histo{
  display:flex; align-items:flex-end; gap:1px;
  width:11.304em; height:3.826em; padding:0.348em;
  background:rgba(10,11,10,.62); border:1px solid rgba(242,241,236,.28);
}
.hv-histo i{ flex:1; background:rgba(242,241,236,.72); min-height:1px }

/* ---------- barra de baixo ---------- */
.hv-visor .hv-base, .hv-cheio .hv-base{
  bottom:1.739em; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 2.261em;
}
.hv-ang{ display:inline-flex; align-items:center; gap:0.478em }
.hv-tri{ width:1em; height:1em; display:block }
.hv-wb{ display:inline-flex; align-items:center; gap:0.478em }
.hv-wb u{
  text-decoration:none; font-size:.82em; line-height:1;
  padding:0.217em 0.391em; border:1px solid rgba(242,241,236,.8); border-radius:0.174em;
}
.hv-k{ letter-spacing:.08em }

/* apaga o fundo original do hero enquanto a cena 3D está no ar */
/* ---------- o pôster ----------
   A foto que segura o lugar É o personagem, renderizado da própria cena no
   primeiro quadro. Então ela não pode receber o tratamento de fundo do
   site: `.hero-slide` vem com grade de cinema, ken-burns de 1.04 e uma
   camada `.hero-blur` de ~13px por cima. Com isso a troca era visível.
   Aqui tudo sai — a imagem tem de ser IGUAL ao que o WebGL desenha.

   O enquadramento casa porque a abertura vertical da câmera é fixa e o
   pôster é mais panorâmico (2,2:1) que qualquer janela: `object-fit:cover`
   então também ajusta pela ALTURA, a mesma regra da perspectiva. */
.hero-slide.hv-poster{
  filter:none;
  transform:none;
  object-position:50% 50%;
}
.hv-poster ~ .hero-blur{ display:none }

/* O hero original só sai quando a cena JÁ DESENHOU o primeiro quadro
   (`hv-visivel`), não quando o script roda (`hv-on`). O GLB tem 1,7 MB:
   apagando a foto cedo, o F5 dava foto -> buraco -> personagem de estalo.
   Agora a foto segura o lugar e sai por fusão. */
.hv-visivel .hero-slide,
.hv-visivel .hero-blur,
.hv-visivel .hero-webgl{ opacity:0 !important; transition:opacity .8s linear; }
/* `linear` de propósito: o palco sobe por rampa linear no JS, então as
   duas curvas somam 1 o tempo todo. Com `ease` de um lado e rampa do
   outro sobrava um vale no meio da fusão (medido: 0,82 de soma). */

@media (prefers-reduced-motion: reduce){
  .hv-palco,.hv-riscos,.hv-visor{ display:none }
  .hv-visivel .hero-slide{ opacity:1 !important }
}

/* No celular o LCD é pequeno na tela: os rótulos da FX3 precisam de um piso
   em px, senão viram poeira. */
@media (max-width: 780px){
  /* no celular o LCD fica pequeno na tela: um piso em px para os rótulos
     não virarem poeira. Um valor só, porque tudo o mais é em em. */
  .hv-visor, .hv-cheio{ font-size:max(8.5px, 1.35vmin) }
}