.small-star {
  animation: roll-in-bottom 2.5s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes roll-in-bottom {
  0% {
      transform: translateY(800px) rotate(540deg);
      opacity: 0;
  }
  100% {
      transform: translateY(0) rotate(0deg);
      opacity: 1;
  }
}

.star-enter {
  animation: spin 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) both;
  transform-origin: center;
}

@keyframes spin {
  0% {
      opacity: 0;
      transform: translateY(45px) rotate(220deg);
  }
  100% {
      opacity: 1;
      transform: translateY(0) rotate(0deg);
  }
}

.star-spin {
  animation: starSpin 3s linear infinite;
  transform-origin: center;
}

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

.arrow-up:hover {
  animation: bounceUp 1.5s ease-in-out;
}

@keyframes bounceUp {
  0%, 100% { transform: translateY(0); }
  20% { transform: translateY(-25px); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

.small-star-spin {
  animation: rotate-scale-up 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes rotate-scale-up {
  0% {
      transform: scale(1) rotateZ(0);
  }
  50% {
      transform: scale(1.5) rotateZ(180deg);
  }
  100% {
      transform: scale(1) rotateZ(360deg);
  }
}