.obj.animateBall {
  animation: slideToRight 1.5s forwards linear;
}

@keyframes slideToRight {
  0% {
    left: -50%;
    transform: translateX(-50%);
  }
}

.scroll-up {
  opacity: 0;
  transform: translateY(50px);
  animation: scrollUpAnimation 1s ease-out forwards;
}

@keyframes scrollUpAnimation {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.obj.animateBall img {
  animation: rainbow1 forwards 1.5s cubic-bezier(0.39, 0.575, 0.565, 1);
}

@keyframes rainbow1 {
  0% {
    top: 60%;
    transform: translateY(-60%);
  }
  50% {
    top: 80%;
    transform: translateY(-80%);
  }
  75% {
    top: 60%;
    transform: translateY(-60%);
  }
}

.obj.animateBall img:nth-child(2) {
  animation: rainbow2 forwards 1.5s cubic-bezier(0.39, 0.575, 0.565, 1);
}

@keyframes rainbow2 {
  0% {
    top: -25%;
    transform: translateY(-25%);
  }
  50% {
    top: -50%;
    transform: translateY(-50%);
  }
  75% {
    top: -25%;
    transform: translateY(-25%);
  }
}

.hero-eye {
  animation: eyeBlink 8s infinite ease-in-out;
  opacity: 1;
}

@keyframes eyeBlink {
  0% {
    opacity: 0.24;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.24;
  }
}

.a3logics-button:hover::after,
.a3logics-button:hover::before {
  animation: glowMove 2.5s forwards ease-in-out;
  animation-delay: 0.5s;
}

@keyframes glowMove {
  0% {
    width: 60%;
  }
  100% {
    width: 100%;
  }
}

.rotateAnimation {
  animation: rotate 5s infinite linear;
  transform: rotate(360deg) translateX(-50%);
}

@keyframes rotate {
  from {
    transform: rotate(0deg) translateX(-50%);
  }
}