/* =============================================================================
   Глобус как CodePen jeffballweg/pen/yyJLjz: spin на #land, orbit на .vehicles use.

   В Chrome CSS @keyframes с transform на узлах внутри SVG часто не применяются
   (композиция/слои). Вращение земли и орбиты техники заданы напрямую
   в SVG через animateTransform; JS в app.js нужен только как fallback.

   Парение: .ac-hero-world-bob (animation по top).

   prefers-reduced-motion: отключение анимаций ниже.
   ============================================================================= */

.ac-hero-viz {
  position: relative;
}

.ac-hero-world-wrap {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, 2vw, 16px);
}

/* Тень под шаром */
.ac-hero-world-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: min(240px, 78%);
  height: 18%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 50% 38%,
    rgba(175, 205, 255, 0.45) 0%,
    rgba(90, 130, 200, 0.22) 45%,
    rgba(0, 0, 0, 0) 70%
  );
  opacity: 0.95;
  pointer-events: none;
  z-index: 0;
}

.ac-hero-world-floater {
  position: relative;
  z-index: 1;
  width: min(100%, 320px);
  height: min(100%, 360px);
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ac-hero-world-bob {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ac-hero-globe-float 5.5s ease-in-out infinite;
}

.ac-hero-world-bob > .ac-hero-world-obj {
  position: relative;
  flex: 1 1 auto;
  align-self: stretch;
  min-height: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
}

.ac-hero-world-obj {
  --acw-water: #9bc4eb;
  --acw-land: #8b9c52;
  --acw-vehicles: #f0fbfc;
  --acw-hilight: rgba(255, 255, 255, 0.2);
  --acw-shadow: rgba(0, 0, 0, 0.05);
  --acw-speed: 10s;
  border: 0;
  display: block;
  pointer-events: none;
}

.ac-hero-world-obj #sea {
  fill: var(--acw-water);
}

.ac-hero-world-obj #hi {
  fill: var(--acw-hilight);
}

.ac-hero-world-obj mask#light use {
  fill: #fff;
}

.ac-hero-world-obj #shad {
  fill: var(--acw-shadow);
}

.ac-hero-world-obj #land {
  fill: var(--acw-land);
}

.ac-hero-world-obj #map {
  fill: var(--acw-land);
}

.ac-hero-world-obj .vehicles use,
.ac-hero-world-obj #boat1 use {
  fill: var(--acw-vehicles);
}

@keyframes ac-hero-globe-float {
  0%,
  100% {
    top: 0;
  }

  50% {
    top: -7px;
  }
}

.ac-hero-viz::after {
  background: radial-gradient(ellipse 88% 72% at 50% 42%, transparent 32%, rgba(5, 8, 16, 0.32) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .ac-hero-world-bob {
    animation: none !important;
  }

  svg.ac-hero-world-obj animateTransform {
    display: none;
  }
}

@media screen and (max-width: 480px) {
  .ac-hero-world-floater {
    width: 100%;
    height: min(280px, 52vw);
  }
}