/* ============================================================
   ASTRON — MUNDO 3D
   O contêiner de perspectiva e as camadas de conteúdo.
   ============================================================ */

.world{
  position:fixed;
  inset:0;
  z-index:2;
  overflow:hidden;

  /* Trocado por JS a cada resize: precisa valer a altura do
     viewport para casar com o campo de visão do palco. */
  perspective:100vh;
  perspective-origin:50% 50%;

  /* Deixa a roda do mouse passar para o scroll. Onde houver algo
     clicável, a camada devolve o ponteiro. */
  pointer-events:none;
}

.world__cam{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  will-change:transform;
}

.layer{
  position:absolute;
  left:50%;
  top:50%;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  will-change:transform;
}

/* O filtro e a opacidade moram aqui dentro. Aplicados no .layer,
   criariam contexto de composição e achatariam o 3D. */
.layer__in{
  will-change:filter, opacity;
}

.layer a,
.layer button{
  pointer-events:auto;
}

/* Largura de autoria: o bloco é escrito neste tamanho e a
   perspectiva cuida da escala conforme a distância. */
.layer--sm{ width:420px }
.layer--md{ width:640px }
.layer--lg{ width:860px }

@media (max-width: 768px){
  .layer--sm{ width:280px }
  .layer--md{ width:320px }
  .layer--lg{ width:340px }
}