/* Common animation base */
.fade-animate {
  opacity: 0;
  transform: translate3d(0, 0, 0);
  animation-fill-mode: forwards;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
}

/* Fade Up */
.fade-up {
  animation-name: fadeUp;
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade Down */
.fade-down {
  animation-name: fadeDown;
}
@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade Left */
.fade-left {
  animation-name: fadeLeft;
}
@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade Right */
.fade-right {
  animation-name: fadeRight;
}
@keyframes fadeRight {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.delay-1 { animation-delay: 0.3s; }
.delay-2 { animation-delay: 0.6s; }
.delay-3 { animation-delay: 0.9s; }