/*
 * Fundos cósmicos (degradês/ruído/estrelas em SVG) desligados — teste: cor vem do background do slide (.hero-stage).
 * Mantidos: canvas Via Láctea + cosmos, malha SVG, meteoros.
 */
.hero-bg-globe::before,
.hero-bg-globe::after,
.canvas-globe-wire::before,
.canvas-globe-wire::after {
  display: none;
}

.hero-bg-globe,
.canvas-globe-wire {
  background: transparent;
}

/* Perspectiva: rotação lenta 3D da Via Láctea (filho .hero-bg-globe__milky-scene) */
.hero-bg-globe {
  perspective: min(2000px, 150vw);
  perspective-origin: 42% 48%;
}

@media (max-width: 640px) {
  .hero-bg-globe {
    perspective: min(920px, 110vw);
    perspective-origin: 50% 44%;
    animation: none !important;
    overflow: hidden;
  }

  .hero-bg-globe__milky-scene {
    transform-origin: 50% 48%;
    overflow: hidden;
  }
}

.hero-bg-globe__milky-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: visible;
  transform-style: preserve-3d;
  transform-origin: 90% 47%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-bg-globe__milky-scene {
    animation: milkySceneDrift3d 260s ease-in-out infinite;
  }
}

@keyframes milkySceneDrift3d {
  0% {
    transform: rotateY(-8deg) rotateX(3deg);
  }

  33% {
    transform: rotateY(6deg) rotateX(-2deg);
  }

  66% {
    transform: rotateY(-4deg) rotateX(5deg);
  }

  100% {
    transform: rotateY(-8deg) rotateX(3deg);
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  .hero-bg-globe__milky-scene {
    animation: none;
    transform: rotateY(-2deg) rotateX(2deg);
    will-change: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg-globe__milky-scene {
    animation: none;
    transform: none;
    will-change: auto;
  }
}

/*
 * Globo terrestre Universe (logistics-globe-universe): mesma malha SVG; cenário cósmico leve — sem Via Láctea em canvas.
 */
.hero-bg-globe--universe .hero-bg-globe__milky-scene,
.canvas-globe-wire--universe .hero-bg-globe__milky-scene {
  animation: none !important;
  transform: rotateY(-4deg) rotateX(2deg);
  will-change: auto;
}

.hero-bg-globe--universe .hero-globe-milky-canvas,
.canvas-globe-wire--universe .hero-globe-milky-canvas,
.hero-bg-globe--universe .hero-globe-approach-canvas,
.canvas-globe-wire--universe .hero-globe-approach-canvas {
  display: none;
}

/* Preview admin: #cnvGlobeWire usa .canvas-globe-wire (sem .hero-bg-globe no pai) */
.canvas-globe-wire {
  perspective: min(2000px, 150vw);
  perspective-origin: 42% 48%;
}

/*
 * Via Láctea: só no canvas (hero-globe-cosmos.js) — este DIV não pinta máscara nem névoa CSS.
 */
.hero-bg-globe__milky-way {
  display: none;
}

/* Canvas Via Láctea (pontos brilhantes — hero-globe-cosmos.js) */
.hero-globe-milky-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  pointer-events: none;
}

/* Canvas: twinkle global + meteoros — acima do degradê, abaixo da malha do globo */
.hero-globe-cosmos-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

.hero-bg-globe .globe-wire-3d,
.canvas-globe-wire .globe-wire-3d {
  z-index: 1;
}

/* Meteoro “em sua direção” (Via Láctea) — acima do fio do globo; meteoros pequenos ficam só no cosmos (atrás) */
.hero-globe-approach-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 2;
  pointer-events: none;
}

@media (max-width: 1024px) {
  .hero-bg-globe__milky-scene,
  .hero-globe-milky-canvas {
    display: none !important;
    visibility: hidden;
  }

  .hero-bg-globe .globe-wire-3d__ring:not(.globe-wire-3d__ring--prime):not(.globe-wire-3d__ring--eq),
  .canvas-globe-wire .globe-wire-3d__ring:not(.globe-wire-3d__ring--prime):not(.globe-wire-3d__ring--eq) {
    border-color: rgba(118, 132, 152, 0.26);
  }

  .hero-bg-globe .globe-wire-3d__ring--prime,
  .canvas-globe-wire .globe-wire-3d__ring--prime {
    border-color: rgba(168, 180, 198, 0.42);
  }

  .hero-bg-globe .globe-wire-3d__ring--eq,
  .canvas-globe-wire .globe-wire-3d__ring--eq {
    border-color: rgba(155, 165, 182, 0.38);
    border-width: 1px;
    box-shadow:
      inset 0 0 1px rgba(255, 255, 255, 0.09),
      0 0 9px rgba(72, 80, 92, 0.1);
  }
}

@media (max-width: 640px) {
  .hero-globe-approach-canvas {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
  }

  .hero-bg-globe__spin {
    animation-duration: 160s !important;
  }

  .hero-bg-globe .globe-wire-3d__ring:nth-child(odd):not(.globe-wire-3d__ring--prime):not(.globe-wire-3d__ring--eq),
  .canvas-globe-wire .globe-wire-3d__ring:nth-child(odd):not(.globe-wire-3d__ring--prime):not(.globe-wire-3d__ring--eq) {
    display: none;
  }
}

.globe-wire-3d__face {
  width: 100%;
  height: 100%;
  perspective: min(1400px, 130vw);
  perspective-origin: 42% 42%;
}

.globe-wire-3d__spin {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.hero-bg-globe__spin,
.canvas-globe-wire__spin {
  animation: globeWire3dYaw var(--hero-globe-spin, 78s) linear infinite;
}

@keyframes globeWire3dYaw {
  from {
    transform: rotateY(0deg);
  }

  to {
    transform: rotateY(360deg);
  }
}

.globe-wire-3d__tilt {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(22deg) rotateZ(9deg);
}

/*
 * Glow + shade desligados: eram radial-gradients (disco cinza) visível em fundo branco.
 * Mantém só `.globe-wire-3d__sphere` / anéis.
 */
.globe-wire-3d__sphere-shade,
.globe-wire-3d__glow {
  display: none !important;
}

.globe-wire-3d__sphere {
  position: relative;
  width: 86%;
  height: 86%;
  left: 7%;
  top: 7%;
  transform-style: preserve-3d;
  z-index: 1;
}

.globe-wire-3d__ring {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(148, 154, 168, 0.38);
  box-sizing: border-box;
  transform-style: preserve-3d;
  backface-visibility: visible;
  pointer-events: none;
}

.globe-wire-3d__ring--mer {
  transform: rotateY(var(--gl-ry, 0deg));
}

.globe-wire-3d__ring--par {
  transform: rotateX(var(--gl-rx, 0deg));
}

.globe-wire-3d__ring--prime {
  border-color: rgba(210, 215, 225, 0.58);
}

.globe-wire-3d__ring--eq {
  border-color: rgba(188, 194, 206, 0.52);
  border-width: 1.5px;
  box-shadow:
    inset 0 0 1px rgba(255, 255, 255, 0.12),
    0 0 10px rgba(80, 88, 100, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg-globe__spin,
  .canvas-globe-wire__spin {
    animation: none;
  }
}