/* ================= SCROLL ANIMATION BASE ================= */
.fade-in,
.fade-left,
.fade-right,
.zoom-in,
.zoom-out{
  opacity: 0;
  transition: 
    opacity 0.9s cubic-bezier(.22,.61,.36,1),
    transform 0.9s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}

/* ================= DIRECTIONS ================= */

/* Fade Up */
.fade-in{
  transform: translateY(40px);
}

/* Fade Left */
.fade-left{
  transform: translateX(-40px);
}

/* Fade Right */
.fade-right{
  transform: translateX(40px);
}

/* Zoom In */
.zoom-in{
  transform: scale(0.85);
}

/* Zoom Out */
.zoom-out{
  transform: scale(1.15);
}

/* ================= ACTIVE STATE ================= */
.fade-in.show,
.fade-left.show,
.fade-right.show,
.zoom-in.show,
.zoom-out.show{
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* ================= DELAYS ================= */
.delay-1{ transition-delay: 0.2s; }
.delay-2{ transition-delay: 0.4s; }
.delay-3{ transition-delay: 0.6s; }
.delay-4{ transition-delay: 0.8s; }