/* PENSARE · «Uma compra» (6 nov 2026)
   Tudo o que a figura precisa, sem as regras .em antigas do computador.css: o palco com a imagem parada por baixo do
   canvas, a tarja da legenda, o filete do dinheiro, as janelas e os seus filetes, as etiquetas das frentes, a nota,
   os botões e os estados. Cantos sempre retos.
   Estados (no elemento .em, postos pelo inicio.js):
   - sem classe: a imagem parada e a tarja fixa (sem JavaScript, com movimento reduzido, com ?3d=nao, enquanto o motor
     carrega, em aparelho fraco);
   - .com-3d: a cena está a desenhar; a imagem parada esconde-se e aparece a pausa;
   - .sem-cena (ou html.sem-3d): a cena desistiu ou não arrancou; volta a imagem parada. */

.em { position: relative; margin: clamp(24px, 3.4vw, 48px) 0 0; }

/* ---------- o palco ---------- */
.em-palco { position: relative; width: 100%; height: clamp(460px, 78svh, 820px); overflow: hidden; background: #DFE9F4; touch-action: pan-y; }
/* a imagem parada: tirada à própria cena; a larga para ecrãs largos, a alta para o telemóvel */
.em-parada, .em-parada img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: 50% 50%; }
/* a alta (as oito janelas): a mesma condição do <source> do HTML; corta-se mais em baixo do que em cima */
@media (max-width: 859px) and (max-aspect-ratio: 39/50) { .em-parada img { object-position: 50% 30%; } }
.em-canvas { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; }
/* o canvas só aparece com a primeira imagem desenhada (a cena põe .em-viva no palco); até lá vê-se a imagem parada */
.em-palco:not(.em-viva) .em-canvas { visibility: hidden; }
.em-palco.em-viva .em-parada { visibility: hidden; }
.em.sem-cena .em-canvas, html.sem-3d .em-canvas, html:not(.js) .em-canvas { display: none; }
.em.sem-cena .em-palco .em-parada, html.sem-3d .em-palco .em-parada, html:not(.js) .em-palco .em-parada { visibility: visible; }
/* o que a cena põe por cima do canvas só existe com ela a correr */
.em:not(.com-3d) :is(.em-etqs, .em-jans, .em-veu), .em.sem-cena :is(.em-etqs, .em-jans, .em-veu), html.sem-3d :is(.em-etqs, .em-jans, .em-veu) { display: none; }

/* ---------- a tarja da legenda: em cima à esquerda, dentro do palco ----------
   .em-diz é a legenda viva (só com a cena a correr); .em-tarja é a fixa da imagem parada */
.em-diz, .em-tarja { position: absolute; left: 16px; top: 16px; z-index: 4; margin: 0; padding: .32em .5em .26em; max-width: calc(100% - 32px); background: var(--papel, #F2F4F7);
  font-family: var(--letra-titulos, "PENSARE Display", Georgia, serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 38px); line-height: 1.04; letter-spacing: .02em; text-transform: uppercase; color: var(--tinta, #0E1C2B); pointer-events: none; }
.em-diz[hidden], .em-tarja[hidden] { display: none; }
.em:not(.com-3d) .em-diz, .em-palco:not(.em-viva) ~ .em-diz, .em.sem-cena .em-diz, html.sem-3d .em-diz { display: none; }
.em.com-3d:not(.sem-cena) .em-palco.em-viva ~ .em-tarja { display: none; }
html.sem-3d .em-tarja { display: block; }
/* com as oito janelas, a legenda cabe na primeira, em duas linhas, sem tapar a grelha */
.em-palco.em-estreita ~ .em-diz { font-size: clamp(24px, 1.95vw, 30px); max-width: calc(25% - 32px); }
/* no telemóvel nunca passa de duas linhas: com janelas ocupa a faixa de cima, a toda a largura */
.em-palco.em-alta.em-estreita ~ .em-diz { font-size: 24px; max-width: calc(100% - 20px); }

/* ---------- o filete do dinheiro: ouro, na base do palco, sem rótulo; avança e nunca chega ao fim ---------- */
.em-ouro { position: relative; z-index: 4; display: block; height: 4px; margin-top: -4px; background: transparent; pointer-events: none; }
.em-ouro i { display: block; width: 8%; height: 100%; background: #E0B84F; transition: width 1s var(--curva, ease); }
.em:not(.com-3d) .em-ouro, .em-palco:not(.em-viva) ~ .em-ouro, .em.sem-cena .em-ouro, html.sem-3d .em-ouro { display: none; }

/* ---------- o véu de papel de «Ver outra vez» ---------- */
.em-veu { position: absolute; inset: 0; z-index: 3; background: var(--papel, #F2F4F7); opacity: 0; pointer-events: none; }
.em-veu.sai { animation: emVeu .3s linear both; }
@keyframes emVeu { 0% { opacity: 1; } 50% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- as etiquetas das frentes, no plano geral: acima da parede de trás; acendem quando chega a compra ---------- */
.em-etqs { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .45s; }
.em-etqs.ver { opacity: 1; }
.em-etq { position: absolute; left: 0; top: 0; padding: 4px 7px 3px; background: rgba(255, 255, 255, .9); border: 1px solid rgba(14, 28, 43, .12); white-space: nowrap; will-change: transform;
  font-family: var(--letra-dados, "IBM Plex Mono", monospace); font-size: 11px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta, #0E1C2B); transition: background-color .2s, color .2s, border-color .2s; }
.em-etq.on { background: var(--azul, #285A8E); border-color: var(--azul, #285A8E); color: #FFFFFF; }
/* o visto de cada frente: um quadrado azul com o visto branco, colado à direita da etiqueta; salta ao aparecer */
.em-visto { position: absolute; left: calc(100% + 5px); top: 50%; width: 22px; height: 22px; margin-top: -11px; box-sizing: border-box; background: var(--azul, #285A8E); border: 1.5px solid #FFFFFF; visibility: hidden; transform: scale(0); transform-origin: 50% 50%; }
.em-visto svg { display: block; width: 100%; height: 100%; }

/* ---------- as oito janelas do golpe ----------
   A moldura de cada uma é um filete azul por fora (entre vizinhas dá 2 px) e o nome da frente fica em baixo à esquerda;
   na fusão andam com as janelas e apagam-se. A do cliente fica, fina, no canto */
.em-jans { position: absolute; inset: 0; z-index: 2; display: none; overflow: hidden; pointer-events: none; }
.em-jans.ver { display: block; }
.em-jan { position: absolute; left: 0; top: 0; box-sizing: border-box; box-shadow: 0 0 0 1px var(--azul, #285A8E); will-change: transform; }
.em-jan-n { position: absolute; left: 8px; bottom: 8px; padding: 4px 7px 3px; background: rgba(255, 255, 255, .92); border: 1px solid rgba(14, 28, 43, .12); white-space: nowrap;
  font-family: var(--letra-dados, "IBM Plex Mono", monospace); font-size: 11px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta, #0E1C2B); transition: background-color .2s, color .2s, border-color .2s; }
.em-jan.on .em-jan-n { background: var(--azul, #285A8E); border-color: var(--azul, #285A8E); color: #FFFFFF; }
/* os filetes que abrem o golpe: saem do centro até às margens */
.em-fil { position: absolute; display: block; background: var(--azul, #285A8E); transform-origin: 50% 50%; }

/* ---------- a nota e os botões, por baixo do palco ---------- */
.em-hud { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 10px; }
.em-nota { margin-left: auto; font-family: var(--letra-dados, "IBM Plex Mono", monospace); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2, #44536A); }
.em-hud button { margin: 0; padding: 6px 10px; border: 1px solid var(--filete-2, #AEB9C7); border-radius: 0; background: transparent; cursor: pointer;
  font-family: var(--letra-dados, "IBM Plex Mono", monospace); font-size: 11.5px; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--azul, #285A8E); transition: background-color .2s; }
.em-hud button:hover { background: #DFE9F4; }
.em-hud button:focus-visible { outline: 2px solid var(--azul, #285A8E); outline-offset: 2px; }
.em-hud button[hidden] { display: none; }
/* a pausa só existe com a cena a correr; «Ver a animação» só com movimento reduzido (o inicio.js tira-lhe o hidden) */
.em:not(.com-3d) .em-pausa, .em:not(.com-3d) .em-outra, .em.sem-cena .em-pausa, .em.sem-cena .em-outra, html.sem-3d .em-pausa, html.sem-3d .em-outra { display: none; }
.em.com-3d .em-ver { display: none; }

/* ---------- no telemóvel: o palco de ponta a ponta, a 78 % da altura ---------- */
@media (max-width: 859px) {
  .em { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
  .em-palco { height: 78svh; min-height: 0; }
  .em-hud { padding: 0 16px; }
  .em-diz, .em-tarja { left: 10px; top: 10px; max-width: calc(100% - 20px); font-size: 24px; }
  .em-palco.em-estreita ~ .em-diz { max-width: calc(50% - 20px); }
  .em-etq { padding: 3px 5px 2px; font-size: 9.5px; }
  .em-visto { left: calc(100% + 4px); width: 18px; height: 18px; margin-top: -9px; }
  .em-jan-n { left: 6px; bottom: 6px; padding: 3px 5px 2px; font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) { .em-ouro i { transition: none; } .em-etqs { transition: none; } }