/* ═══════════════════════════════════════════════════════════════════════════
   O ROSTO DA VIA — a folha do `static/js/vectra_face.js`, nas DUAS camadas.

   ⚠️⚠️ SAIU DO `app.css` EM 18/09/2026, e o motivo é medido: o console do hub
   (`hub/_layout.html`) não carrega o `app.css`, e ali a cabeça da Via era
   desenhada com os 1024 px da arte dentro de um círculo de 22 px — o avatar das
   bolhas era um recorte claro, sem rosto nenhum, sem erro nenhum. Mesma família
   de "componente é JS, CSS e markup" e do "hub é a terceira camada".
   ═══════════════════════════════════════════════════════════════════════════ */

/* O ROSTO DA VIA — moldura da cabeça + rosto vetorial por cima.
   Companheiro de `static/js/vectra_face.js`. Componente é JS + CSS + markup:
   levar só o JS deixa o rosto desalinhado e sem brilho. */

.vface {
    position: relative;
    display: block;
    width: 100%;
    /* ⚠️ A PROPORÇÃO É O ALINHAMENTO. A imagem e o <svg> ocupam o mesmo
       retângulo; se a razão do container não for a da arte, o viewBox e o PNG
       deixam de casar e o rosto sai do lugar — em toda tela, sem erro nenhum. */
    aspect-ratio: var(--vface-ratio, 1278 / 1230);
    /* respiração: o `--vface-bob` é escrito pelo JS a cada quadro */
    transform: translate3d(0, var(--vface-bob, 0%), 0);
    will-change: transform;
}

.vface-cabeca,
.vface-rosto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.vface-cabeca {
    object-fit: contain;
    /* a arte já tem sombra própria; nada de drop-shadow por cima */
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.vface-rosto {
    pointer-events: none;
    overflow: visible;
}

/* ## ⚠️⚠️ AS FEIÇÕES ESPERAM A CABEÇA — CHAMADO #29 (15/09/2026)
   *"em vários lugares os olhos e boca da Via aparecem primeiro que o ícone SVG,
   dando um aspecto [assustador]. Eles devem sempre aparecer ao mesmo tempo"*
   (Marcos).
   A cabeça é uma IMAGEM que vem pela rede; as feições são vetor desenhado na
   hora. Apensados juntos, o SVG pinta no primeiro quadro e a imagem chega
   depois — e no meio há olhos e boca flutuando no vazio. Aqui eles ficam
   invisíveis até o JS dizer que a arte está pronta.
   ⚠️ `visibility`, não `display`: o `display:none` tiraria o SVG do layout e as
   feições seriam posicionadas contra uma caixa de tamanho zero — quando
   voltassem, apareceriam fora de lugar por um quadro.
   ⚠️ E é o ESTADO DE ESPERA que esconde, nunca o padrão: se o JS não rodar (ou
   falhar antes de marcar), o rosto aparece — rosto sem cabeça é estranho, mas
   cabeça sem rosto é a Via morta. */
.vface.vface-esperando .vface-rosto { visibility: hidden; }

/* ⚠️ Sem movimento pra quem pediu sem movimento. O JS já desliga a piscada e a
   respiração; isto trava o que for CSS. */
@media (prefers-reduced-motion: reduce) {
    .vface {
        transform: none;
        will-change: auto;
    }
}