/* =========================================================
   AURIFEX STUDIO :: capas vivas (13/11/2026, chave CAPAS_VIVAS_13_11 em gerador/montar.py)

   Pedido dele, com um vídeo da Galeria, de Como trabalhamos, de Recursos e de Projetos: "arrume esse erro
   que dá na imagem do hambúrguer" e "não podemos aceitar esse movimento travado das imagens da capa de cada
   página [...] precisa ser extremamente fluido, ter um movimento que atraia o espectador".

   Medido antes (Chrome de verdade, sem janela): a peça da capa entrava com uma animação de CSS que começava
   junto com a montagem da página, quando o navegador ainda calculava a página, decodificava as fotos e rodava
   os códigos; quadros parados de 100 a 200 ms e fotos que pipocavam depois (janela e celular vazios).
   Agora a peça espera ficar pronta (fotos decodificadas, letras carregadas, troca de página terminada, tela
   calma) e só então entra, com movimento que a placa de vídeo faz sozinha (deslocamento, giro e opacidade).
   Depois de entrar, a peça fica viva: cada parte flutua no seu ritmo e, no computador, acompanha o mouse com
   profundidade, sem brilho (regras 3.12 e 6.4). O hambúrguer, foto de produto, não inclina: ele respira.

   O chão do hambúrguer era o reflexo recortado da foto original (torto para a esquerda, com listras e um
   bloco escuro): sai e entra uma sombra de contato desenhada, centrada no pão, que acompanha a respiração.

   Parado só no ?captura (sem a classe "mov"), como sempre. Desligar a chave devolve as páginas do cofre 5f8c305.
   ========================================================= */

/* ---------- as entradas antigas saem: quem anima agora é js/capas-vivas.js ---------- */
html.mov .pilha-janelas.capa-viva.cv-pronta .pj,
html.mov .leque.capa-viva.cv-pronta .cel-mini,
html.mov .folha-pilha.capa-viva.cv-pronta .folha{animation:none}   /* mais forte que a "pousa" de css/paginas.css */

/* ---------- enquanto a peça não está pronta, ela espera escondida ----------
   0,001 e não 0: com opacidade zero o navegador pode deixar de pintar a peça, e ela pipocaria no 1º quadro.
   Socorro: se o código não rodar, tudo aparece sozinho em 2,4 s. */
html.mov .capa-viva:not(.cv-pronta) :is(.folha,.pj,.cel-mini,.lanche-pilha,.lanche-sombra,.lanche-dica,.folha-l em,.folha-ass){opacity:.001;animation:cv-socorro .7s ease 2.4s both}
html.mov .capa-viva:not(.cv-pronta) .folha-l i{scale:0 1;animation:cv-socorro-traco .7s ease 2.4s both}
@keyframes cv-socorro{to{opacity:1}}
@keyframes cv-socorro-traco{to{scale:1 1}}
html.mov .capa-viva .folha-l i{transform-origin:0 50%}

/* fotos e telas viram camada própria da placa de vídeo desde o começo, para não serem pintadas no meio do
   movimento. A folha da proposta não: ela é texto girado, e camada própria deixaria a letra menos nítida; quem
   flutua é a pilha inteira, que só anda (sem girar), e a folha continua pintada nítida lá dentro. */
html.mov .capa-viva :is(.pj,.cel-mini),
html.mov .capa-viva.folha-pilha{will-change:transform,opacity}

/* ---------- o mouse dá profundidade (computador): as partes da frente andam mais que as de trás ----------
   O código escreve --cv-x e --cv-y (de -1 a 1, já amortecidos) na peça; a transformação de cada parte é a de
   sempre (as mesmas medidas de css/paginas.css), mais o deslocamento da sua profundidade (--cv-p). */
.capa-viva{--cv-x:0;--cv-y:0}
html.mov .capa-viva .folha:not(.atras){--cv-p:8;transform:translate(calc(var(--cv-x) * var(--cv-p) * 1px),calc(var(--cv-y) * var(--cv-p) * .7px)) rotate(-1.4deg)}
html.mov .capa-viva .folha.atras{--cv-p:2.5;transform:translate(calc(var(--cv-x) * var(--cv-p) * 1px),calc(var(--cv-y) * var(--cv-p) * .7px)) rotate(2.4deg) translate(12px,8px)}
html.mov .capa-viva .pj{transform:translate(calc(var(--cv-x) * var(--cv-p) * 1px),calc(var(--cv-y) * var(--cv-p) * .7px))}
html.mov .capa-viva .pj.j1{--cv-p:5}
html.mov .capa-viva .pj.j2{--cv-p:9}
html.mov .capa-viva .pj.j3{--cv-p:14}
html.mov .capa-viva .cel-mini{--cv-p:8;--cv-b:0px;transform:translate(calc(var(--cv-x) * var(--cv-p) * 1px),calc(var(--cv-y) * var(--cv-p) * .7px + var(--cv-b)))}
html.mov .capa-viva .cel-mini:nth-child(odd){--cv-b:-22px}
html.mov .capa-viva .cel-mini:nth-child(1){--cv-p:5}
html.mov .capa-viva .cel-mini:nth-child(2){--cv-p:11}
html.mov .capa-viva .cel-mini:nth-child(3){--cv-p:7}
html.mov .capa-viva .cel-mini:nth-child(4){--cv-p:13}

/* ---------- o hambúrguer: sombra de contato no lugar do reflexo recortado ---------- */
.lanche-chao-novo{top:auto;bottom:6.5%;height:9.5%;left:14%;right:14%;overflow:visible}
.lanche-sombra{position:absolute;inset:0;display:block;border-radius:50%;transform-origin:50% 30%;
  background:
    radial-gradient(closest-side,rgba(1,2,6,.95),rgba(1,2,6,.7) 38%,rgba(1,2,6,.3) 70%,rgba(1,2,6,0)),
    radial-gradient(closest-side,rgba(110,58,22,.22),rgba(110,58,22,0) 80%)}
.lanche-sombra::after{content:"";position:absolute;left:20%;right:20%;top:12%;height:34%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.92),rgba(0,0,0,0))}
html.mov .lanche .lanche-sombra{will-change:transform,opacity}