/**
 * Анимации и переходы
 * Все анимации проекта
 */

/* ===== АНИМАЦИИ ЗВЕЗД ===== */
.stars-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.star {
  width: 40px;
  position: absolute;
  opacity: 0.8;
  fill: #d0c896;
  width: calc(20px + (var(--star-size, 0) * 10px));
  height: calc(20px + (var(--star-size, 0) * 10px));
  animation: twinkle var(--twinkle-duration, 2s) infinite alternate;
  animation-delay: var(--twinkle-delay, 0s);
  animation-timing-function: ease-in-out;
}

@keyframes twinkle {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

/* ===== АНИМАЦИИ ПЕРСОНАЖЕЙ ===== */
.main-character {
  background-image: url('../assets/images/characters/hero-character.png');
  width: 950px;
  height: 1500px;
  position: absolute;
  right: 5%;
  bottom: 25%;
  z-index: 5;
  transform: scale(0.3);
  transform-origin: right bottom;
  animation: wink 0.6s steps(4, end) infinite;
}

@keyframes wink {
  from {
    background-position: 0px;
  }
  to {
    background-position: -3800px;
  }
}

.character-sprite {
  background-image: url('../assets/images/characters/character-sprite.png');
  width: 636px;
  height: 162px;
  margin: 0 auto;
  position: static;
  animation: character-vertical-animation 0.4s steps(2, end) infinite;
}

@keyframes character-vertical-animation {
  from {
    background-position: 0px;
  }
  to {
    background-position: -1272px;
  }
}

/* ===== АНИМАЦИИ ПЛАНЕТ ===== */
@keyframes rotateReverse {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ===== АНИМАЦИИ ИЗОБРАЖЕНИЙ ===== */
@keyframes last-frame-animation {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -2880px 0;
  }
}

/* ===== ЗВЕЗДНЫЙ ФОН ===== */
.star-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../assets/images/backgrounds/stars-background.png');
  background-repeat: repeat-x;
  background-size: auto 100%;
  animation: move-stars 11s linear infinite alternate;
  pointer-events: none;
  z-index: 1;
}

@keyframes move-stars {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -3000px 0;
  }
}

.ufo {
  background-image: url('../assets/images/characters/ufo.png');
  width: 250px;
  height: 250px;
  position: absolute;
  right: 5%;
  bottom: 25%;
  z-index: 0;
  transform: scale(0.3);
  transform-origin: right bottom;
  animation: ufo 0.6s steps(4, end) infinite;
}

@keyframes ufo {
  from {
    background-position: 0px;
  }
  to {
    background-position: -1000px;
  }
}

.second-char {
  background-image: url('../assets/images/characters/prisel.png');
  width: 1100px;
  height: 1300px;
  position: absolute;
  right: 7%;
  bottom: 10%;
  z-index: 0;
  transform: scale(0.3);
  transform-origin: right bottom;
  animation: wind 1s steps(4, end) infinite;
}

@keyframes wind {
  from {
    background-position: 0px;
  }
  to {
    background-position: -4400px;
  }
}