@keyframes login-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-login-in {
  animation: login-in 0.45s ease-out forwards;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20%,
  60% {
    transform: translateX(-6px);
  }
  40%,
  80% {
    transform: translateX(6px);
  }
}

.form-error-shake {
  animation: shake 0.45s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .animate-login-in,
  .form-error-shake {
    animation: none !important;
  }
}