// animation keyframes

@keyframes scale-out-tl {
  0% {
    transform: scale(1);
    transform-origin: 0 0;
    opacity: 1;
  }

  100% {
    transform: scale(0);
    transform-origin: 0 0;
    opacity: 1;
  }
}

@keyframes scale-in-center {
  0% {
    transform: scale(0);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes dash {
  0% {
    stroke-dashoffset: 50;
  }

  50% {
    stroke-dashoffset: 70;
  }

  80% {
    stroke-dashoffset: 60;
  }

  100% {
    stroke-dashoffset: 50;
  }
}

@keyframes dash2 {
  0% {
    stroke-dashoffset: 100;
  }

  50% {
    stroke-dashoffset: 120;
  }

  80% {
    stroke-dashoffset: 110;
  }

  100% {
    stroke-dashoffset: 100;
  }
}

@keyframes vibrate {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-1px, 1px);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes twinkle_one {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
    transform: scale(1.5);
  }
}

@keyframes twinkle_two {
  0% {
    opacity: 1;
    transform: scale(0.8);
  }

  20% {
    opacity: 0.4;
  }

  60% {
    opacity: 0.7;
  }

  100% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@keyframes twinkle_three {
  0% {
    opacity: 1;
    transform: scale(0.8);
  }

  20% {
    opacity: 0.4;
  }

  80% {
    opacity: 0.7;
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes satellite_move {
 0% {
    transform: translate(0, 0);
    opacity: 0.95;
  }

  80% {
    transform: translate(-300px, 300px);
    opacity: 0;
  }

  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}

@keyframes star-fall {
  0% {
      opacity: 0;
      transform: scale(0.5) translate3d(0, 0, 0);
  }

  50% {
    opacity: 1;
    transform: translate3d(-200px, 200px, 0);
  }

  100% {
      opacity: 0;
      transform: scale(1.2) translate3d(-300px, 300px, 0);
  }
}

@keyframes rocks_move {
  0% {
    transform: translate(0, 0);
    opacity: 0.8;
  }

  50% {
    transform: translate(-300px, 300px);
    opacity: 0;
  }

  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}

@keyframes forward_arrow {
  0% {
    transform: translateX(0);
    opacity: 0.2;
  }
  50% {
    transform: translateX(8px);
    opacity: 0.8;
  }
  100% {
    transform: translateX(0);
    opacity: 0.2;
  }
}

@keyframes back_arrow {
  0% {
    transform: translateX(0);
    opacity: 0.2;
  }
  50% {
    transform: translateX(-8px);
    opacity: 0.8;
  }
  100% {
    transform: translateX(0);
    opacity: 0.2;
  }
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(0.5em);
  }

  100% {
    transform: translateY(0);
  }
}