/* ============================================================
   Hero scene — Terra à noite (Américas), estática.
   Imagem: assets/earth-globe.webp — projeção ortográfica do mapa
   NASA "Black Marble" (domínio público) centrada nas Américas.
   Planeta FIXO + ícones pequenos das plataformas SOBRE o globo.
   Sem WebGL e sem animação contínua: leve e rápido.
   ============================================================ */
.hero-scene {
  position: relative;
  width: 100%;
  max-width: 470px;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  justify-self: end;
  isolation: isolate;
}

/* halo dourado + azul atrás do planeta (atmosfera) */
.hero-scene::before {
  content: "";
  position: absolute;
  inset: -9%;
  z-index: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 43% 38%, rgba(201, 162, 75, 0.30), rgba(11, 26, 53, 0) 58%),
    radial-gradient(circle at 62% 66%, rgba(74, 143, 231, 0.18), rgba(11, 26, 53, 0) 60%);
  filter: blur(8px);
}

/* o planeta */
.globe-img {
  position: absolute;
  inset: 4%;
  width: 92%;
  height: 92%;
  z-index: 1;
  border-radius: 50%;
  filter:
    drop-shadow(0 16px 36px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 24px rgba(74, 143, 231, 0.20));
}

/* ícones pequenos das plataformas, DENTRO do globo (lado direito, sobre o oceano) */
.orbit-icon {
  position: absolute;
  z-index: 2;
  width: 15%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);   /* left/top = centro do ícone */
  background: #fff;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.45), 0 0 0 1.5px rgba(255, 255, 255, 0.55);
}
.orbit-icon svg { width: 58%; height: 58%; display: block; }

.orbit-ig     { left: 69%; top: 32%; background: linear-gradient(135deg, #FEDA75 0%, #D62976 48%, #962FBF 100%); }
.orbit-google { left: 75%; top: 50%; }
.orbit-tiktok { left: 69%; top: 68%; background: #0B0B0F; }

@media (max-width: 900px) {
  .hero-scene { max-width: 410px; justify-self: center; }
}
@media (max-width: 520px) {
  .hero-scene { max-width: 300px; }
  .orbit-icon { width: 16%; }   /* mantém legível no celular */
}