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

.animate-fade-slide-down {
  animation: fade-slide-down 0.35s ease-out;
}

@keyframes step-enter-forward {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes step-enter-backward {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-step-forward {
  animation: step-enter-forward 0.3s ease-out;
}

.animate-step-backward {
  animation: step-enter-backward 0.3s ease-out;
}