/* Fade In */
.fade-in {
  opacity: 0;
  animation: fade-in 0.8s ease-in-out forwards;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Slide In — Up */
.slide-in-up {
  opacity: 0;
  transform: translateY(60px);
  animation: slide-in-up 0.8s ease-in-out forwards;
}

@keyframes slide-in-up {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide In — Down */
.slide-in-down {
  opacity: 0;
  transform: translateY(-60px);
  animation: slide-in-down 0.8s ease-in-out forwards;
}

@keyframes slide-in-down {
  from {
    opacity: 0;
    transform: translateY(-60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide In — Left */
.slide-in-left,
.slide-in-left {
  opacity: 0;
  transform: translateX(-60px);
  animation: slide-in-left 0.8s ease-in-out forwards;
}

@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide In — Right */
.slide-in-right {
  opacity: 0;
  transform: translateX(60px);
  animation: slide-in-right 0.8s ease-in-out forwards;
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}