/*
 * файл: landing-effects.css
 * путь: c:\openserver\domains\start.voiceofgalaxies.ru\css\landing\landing-effects.css
 * назначение: canvas-звёзды, корабли и станция landing
 */

.landing-stars {
  position: fixed;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.landing-fleet,
.landing-station {
  position: absolute;
  z-index: 12;
  pointer-events: none;
  filter: drop-shadow(0 0 20px rgba(67, 188, 255, 0.22));
}

.landing-fleet-left {
  left: 330px;
  bottom: 250px;
  width: min(570px, 38vw);
  animation: shipFloatLeft 14s ease-in-out infinite;
}

.landing-fleet-right {
  right: 28vw;
  top: 52vh;
  width: clamp(180px, 16vw, 320px);
  opacity: 0.9;
  animation: shipFloatRight 19s ease-in-out infinite;
}

.landing-station {
  right: 74px;
  top: 22px;
  width: min(360px, 24vw);
  opacity: 0.88;
  animation: stationPulse 12s ease-in-out infinite;
}

@media (min-width: 1600px) {
  .landing-fleet-right {
    right: 31vw;
    top: 57vh;
    width: clamp(170px, 15vw, 320px);
  }
}

@keyframes shipFloatLeft {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
    filter: drop-shadow(0 0 18px rgba(61, 184, 255, 0.22));
  }

  50% {
    transform: translate3d(12px, -10px, 0);
    filter: drop-shadow(0 0 34px rgba(61, 184, 255, 0.38));
  }
}

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

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

@keyframes stationPulse {
  0%,
  100% {
    filter: drop-shadow(0 0 18px rgba(61, 184, 255, 0.22));
  }

  50% {
    filter: drop-shadow(0 0 42px rgba(61, 184, 255, 0.42));
  }
}