/*
 * файл: landing-planet.css
 * назначение: круглая планета с бесшовным вращением
 */

.landing-planet {
  position: absolute;
  right: 58px;
  top: 70px;
  z-index: 8;
  width: min(640px, 38vw);
  aspect-ratio: 1 / 1;
  pointer-events: none;
}

.landing-planet-sphere {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  background: #12345d;
  box-shadow:
    inset -80px -38px 120px rgba(0, 0, 0, 0.64),
    inset 40px 20px 74px rgba(116, 215, 255, 0.18),
    0 0 90px rgba(42, 167, 255, 0.36);
  animation: planetFloat 18s ease-in-out infinite;
}

.landing-planet-map {
  position: absolute;
  inset: 0;
  background-image: url("/assets/landing/home/planets/planet_surface_loop_2365x665.webp");
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: 0 50%;
  animation: planetRotate 140s linear infinite;
}

.landing-planet-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.18), transparent 22%),
    radial-gradient(circle at 68% 50%, transparent 28%, rgba(0, 0, 0, 0.62) 74%),
    linear-gradient(100deg, rgba(115, 214, 255, 0.2), transparent 45%, rgba(0, 0, 0, 0.54));
}

.landing-planet-glow {
  position: absolute;
  inset: -5%;
  border-radius: 50%;
  box-shadow:
    inset 0 0 28px rgba(178, 237, 255, 0.42),
    0 0 55px rgba(61, 177, 255, 0.34);
}

@keyframes planetRotate {
  from {
    background-position-x: 0;
  }

  to {
    background-position-x: calc(var(--planet-loop-width, 2365px) * -1);
  }
}

@keyframes planetFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(-8px, -10px, 0) scale(1.01);
  }
}