@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    transform: scale(calc(0.5 * var(--scale-factor)));
    opacity: 0;
  }
}

@keyframes fadein {
  from {
    transform: scale(calc(1.5 * var(--scale-factor)));
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes reversedfadein {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(calc(1.2 * var(--scale-factor)));
    opacity: 0;
  }
}

@keyframes lowfadeinwithdelay {
  0% {
    opacity: 0;
  }
  40% {
    transform: scale(calc(0.7 * var(--scale-factor)));
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes orbit {
  0% {
    opacity: 0;
    transform: translateY($orbit_radius) rotate(0deg) translateY(-$orbit_radius) rotate(0deg) scale(1);
  }
  5% {
    opacity: 0;
    transform: translateY($orbit_radius) rotate(#{-360*0.05}deg) translateY(-$orbit_radius) rotate(#{360*0.05}deg) scale(1);
  }
  20% {
    opacity: 1;
    transform: translateY($orbit_radius) rotate(#{-360*0.2}deg) translateY(-$orbit_radius) rotate(#{360*0.2}deg) scale(1);
  }
  96% {
    opacity: 1;
    transform: translateY($orbit_radius) rotate(-360deg) translateY(-$orbit_radius) rotate(360deg) scale(1);
  }
  100% {
    opacity: 0.5;
    transform: translateY($orbit_radius) rotate(-360deg) translateY(-$orbit_radius) rotate(360deg) scale(0.3);
  }
}

@keyframes mobile-orbit {
  0% {
    transform: translateY($orbit_radius * 0.6) rotate(0deg) translateY(-$orbit_radius * 0.6) rotate(0deg) scale(0.1);
  }
  20% {
    transform: translateY($orbit_radius * 0.6) rotate(-72deg) translateY(-$orbit_radius * 0.6) rotate(72deg) scale(1);
  }
  96% {
    transform: translateY($orbit_radius * 0.6) rotate(-359deg) translateY(-$orbit_radius * 0.6) rotate(359deg) scale(1);
  }
  100% {
    transform: translateY($orbit_radius * 0.6) rotate(-359deg) translateY(-$orbit_radius * 0.6) rotate(359deg) scale(0.3);
  }
}

@keyframes lowbump {
  50% {
    transform: scale(1.1);
  }

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


@keyframes bump {
  50% {
    transform: scale(2);
  }

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

@keyframes selector-bump {
  20% {
    transform: scale(1.2);
  }

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

@keyframes selector-bad {
  0% {
    background-color: rgba(255, 0, 0, 0);
  }
  50% {
    background-color: rgba(255, 0, 0, 0.3);
    transform: scale(0.95);
  }

  100% {
    background-color: rgba(255, 0, 0, 0);
    transform: scale(1);
  }
}

@keyframes mobile-selector-bad {
  0% {
    background-color: rgba(255, 0, 0, 0);
  }

  50% {
    background-color: rgba(255, 0, 0, 0.3);
  }

  100% {
    background-color: rgba(255, 0, 0, 0);
  }
}

@keyframes ding {
  0% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-30px);
  }
}

@keyframes color-arrow {
  0%, 10% {
    color: $up_color;
    transform: rotate(0deg) translateY(-5px);
  }
  15%, 35% {
    color: $right_color;
    transform: rotate(90deg) translateY(-5px);
  }
  40%, 60% {
    color: $down_color;
    transform: rotate(180deg) translateY(-5px);
  }
  65%, 85% {
    color: $left_color;
    transform: rotate(270deg) translateY(-5px);
  }
  90%, 100% {
    color: $up_color;
    transform: rotate(359deg) translateY(-5px);
  }
}