/* ANIMATION */
.animate-right {
  opacity: 0;
  transform: translateX(150px);
  transition: all 0.8s ease-in-out;
}

.animate-right.animated {
  opacity: 1;
  transform: translateX(0);
}

.animate-left {
  opacity: 0;
  transform: translateX(-150px);
  transition: all 0.8s ease-in-out;
}

.animate-left.animated {
  opacity: 1;
  transform: translateX(0);
}

.scroll-container img {
  animation: scrollImpact 1.2s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

@keyframes scrollImpact {
  0% {
    opacity: 0;
    transform: translateY(-220px);
  }

  45% {
    opacity: 1;
    transform: translateY(0);
  }

  /* veliki bounce */
  60% {
    transform: translateY(-18px);
  }

  /* drugi */
  75% {
    transform: translateY(0);
  }

  85% {
    transform: translateY(-8px);
  }

  /* mali završni */
  100% {
    transform: translateY(0);
  }
}