/* Globo da LEGACY — a Terra em pontos, fixa na margem direita.

   Fica preso à viewport durante a carta inteira e passa à frente das
   seções, mas nunca à frente do cabeçalho nem do menu: z-index 900, contra
   1200 do cabeçalho e 1000/1100 do menu aberto. Um globo por cima do menu
   seria um bug, não uma decisão.

   `pointer-events: none` é obrigatório e não é detalhe: o bloco cobre uma
   faixa da coluna de leitura, e sem isso ele engoliria cliques em links e
   a seleção de texto embaixo dele.

   Ele não existe no hero. Quem controla a entrada e a saída é o
   `legacy-globo.js`, comparando o retângulo do hero e o do rodapé — aqui
   só mora a transição. */

.legacy-globo {
  /* O bloco é o dobro do que se vê: metade dele fica para fora da direita,
     e o globo entra na página cortado pelo próprio limite da tela. É por
     isso que `right` é a metade negativa do tamanho — o valor não é um
     recuo, é o corte.

     Um elemento `fixed` não entra no overflow rolável do documento, então
     essa metade de fora não cria barra horizontal. Ainda assim a largura
     medida está no teste de navegador: se um dia alguém trocar o `fixed`
     por `absolute`, a página ganha rolagem lateral em silêncio. */
  --globo-tamanho: clamp(440px, 46vw, 760px);

  position: fixed;
  top: 50%;
  right: calc(var(--globo-tamanho) / -2);
  z-index: 900;
  width: var(--globo-tamanho);
  height: var(--globo-tamanho);
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--motion-cinematic) var(--ease-calone);
}

.legacy-globo.is-visivel { opacity: 1; }

.legacy-globo canvas { display: block; width: 100%; height: 100%; }

/* Abaixo de 1100 não sobra margem: o globo cairia sobre a coluna de texto,
   e a carta é para ler. O JS aplica o mesmo corte e nem monta o WebGL. */
@media (max-width: 1100px) {
  .legacy-globo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .legacy-globo { display: none; }
}

@media print {
  .legacy-globo { display: none !important; }
}