.animation-wait {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Animacija se aktivira tek kada element dobije .in-view */

.fade-in.animation-wait,
.slide-up.animation-wait,
.slide-down.animation-wait,
.slide-left.animation-wait,
.slide-right.animation-wait,
.zoom-in.animation-wait,
.zoom-out.animation-wait,
.rotate-in.animation-wait,
.flip-in.animation-wait {
  animation: none !important;
}

.fade-in.in-view {
  animation: fadeIn 1s ease forwards !important;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.slide-up.in-view {
  animation: slideUp 1s ease forwards !important;
}
@keyframes slideUp {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.slide-down.in-view {
  animation: slideDown 1s ease forwards !important;
}
@keyframes slideDown {
  from { transform: translateY(-40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.slide-left.in-view {
  animation: slideLeft 1s ease forwards !important;
}
@keyframes slideLeft {
  from { transform: translateX(40px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.slide-right.in-view {
  animation: slideRight 1s ease forwards !important;
}
@keyframes slideRight {
  from { transform: translateX(-40px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.zoom-in.in-view {
  animation: zoomIn 1s ease forwards !important;
}
@keyframes zoomIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.zoom-out.in-view {
  animation: zoomOut 1s ease forwards !important;
}
@keyframes zoomOut {
  from { transform: scale(1.2); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.rotate-in.in-view {
  animation: rotateIn 1s ease forwards !important;
}
@keyframes rotateIn {
  from { transform: rotate(-30deg); opacity: 0; }
  to { transform: rotate(0); opacity: 1; }
}

.flip-in.in-view {
  animation: flipIn 1s ease forwards !important;
}
@keyframes flipIn {
  from { transform: rotateY(90deg); opacity: 0; }
  to { transform: rotateY(0); opacity: 1; }
}