/* Modo imersivo do olho 3D (olho3d.js). Só vale com a classe .olho3d no <html>:
   sem WebGL ou com ?modo=leve a página fica como era, com o símbolo 2D.
   Em repouso, só o olho; os controles somem com opacidade, mas continuam no
   leitor de tela e no Tab (o foco num deles traz todos de volta). */
#olho3d { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
#olho3d canvas { display: block; width: 100%; height: 100%; }
.olho3d, .olho3d body { background: #050409; }
.olho3d .tela { position: relative; z-index: 1; min-height: 100dvh; }
.olho3d .simbolo { flex: 1 1 auto; min-height: 28vh; width: auto; aspect-ratio: auto; }
.olho3d .simbolo svg { display: none; }
.olho3d .cartao {
  background: rgba(20, 16, 24, .72); border-color: rgba(145, 100, 55, .45);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.olho3d .tela > :not(.simbolo), .olho3d .cartao > * {
  transition: opacity .45s ease, background-color .45s ease, border-color .45s ease;
}
.olho3d:not(.controles) .tela > :not(.simbolo):not(.cartao),
.olho3d:not(.controles) .cartao > * { opacity: 0; pointer-events: none; }
.olho3d:not(.controles) .cartao {
  background: transparent; border-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* na ligação: o tempo de conversa e o "segure para falar" ficam sempre à vista */
.olho3d.em-ligacao:not(.controles) .cartao > .tempo,
.olho3d.em-ligacao:not(.controles) .tela > .falar { opacity: 1; pointer-events: auto; }
.olho3d .tempo { text-shadow: 0 0 18px rgba(0, 0, 0, .8); }
@media (prefers-reduced-motion: reduce) {
  .olho3d .tela > :not(.simbolo), .olho3d .cartao > * { transition: none; }
}