/* Lancei · as telas encaixadas pelo telas.js atrás dos quadros do Blender (topos 2 e 3 e a vitrine da seção 5).
   Cada tela é um retângulo do tamanho da captura (o monitor 1440 × 900, o celular 780 × 1688) entortado até os
   4 cantos do quadro. Sem "anima" (sem JS ou com "reduzir movimento") elas não aparecem: a imagem parada já traz os sites. */

.tela-js {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  background: #050505;
  overflow: hidden;
  pointer-events: none;
}
.anima .tela-js { display: block; }
.tela-js.tela-3d--monitor { width: 1440px; height: 900px; }
.tela-js.tela-3d--fone { width: 780px; height: 1688px; border-radius: 80px; }
/* a captura cobre a tela sem esticar (o celular pega a parte de cima da página) */
.tela-js > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: 0; }
.tela-js > img.ativo { opacity: 1; }
.tela-js .selo { z-index: 4; left: auto; top: auto; right: 2.5%; bottom: 3.5%; font-size: 30px; }
/* o selo curto da tela estreita do celular: mais baixo, para ficar longe do logo do Desejo (telas.js, seloNaTela) */
.tela-js .selo--curto { padding: 0.2em 0.6em; line-height: 1.2; }
/* o desligar de CRT: a imagem vira uma linha e a linha vira um ponto */
.tela-js .tela__linha {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: 50%;
  height: 6px;
  margin-top: -3px;
  transform-origin: 50% 50%;
  background: var(--papel);
  box-shadow: 0 0 48px 12px rgba(198, 255, 0, 0.7);
  opacity: 0;
}