/* hero.css — capa ao vivo do Gridmapify (globo sem chrome) ----------------- *
 * Fundo TRANSPARENTE de propósito: a home embute esta página num <iframe> com
 * o poster cinematográfico ATRÁS. Enquanto o WebGL não pinta, o poster aparece;
 * quando o <canvas> (opaco, fundo #0A0B0F) pinta, ele cobre o poster e a home
 * faz o cross-fade do iframe → o planeta "ganha vida".                         */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  background: transparent;
  overflow: hidden;
  /* desativa qualquer realce de toque/seleção — é um backdrop ambiente */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

#globo {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
}

#globo canvas {
  display: block;
}

/* Ponto pulsante de carregamento (some quando o globo está pronto). */
.loading {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  transition: opacity 0.6s ease;
  z-index: 2;
}

.loading.oculto {
  opacity: 0;
  pointer-events: none;
}

.loading .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00d4aa;
  box-shadow: 0 0 18px 2px rgba(0, 212, 170, 0.8);
  animation: pulso 1.15s ease-in-out infinite;
}

@keyframes pulso {
  0%, 100% { transform: scale(0.65); opacity: 0.45; }
  50%      { transform: scale(1.35); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .loading .dot { animation: none; }
}