body,
html {
  overflow-x: hidden;
}

[data-animate] {
  will-change: transform, opacity;
}

.slide-up {
  transform: translateY(50px);
}

.slide-left {
  transform: translateX(-50px);
}

.slide-right {
  transform: translateX(50px);
}

.slide-down {
  transform: translateY(-50px);
}

.fade-in {
  opacity: 0;
}

.fade-out {
  opacity: 1;
}

.rotate {
  transform: rotate(-90deg);
}

.zoom-in {
  transform: scale(0.5);
}

.zoom-out {
  transform: scale(1.5);
}

.in-view {
  transform: none !important;
  opacity: 1 !important;
}