/* Fade-out animation for highlighted items */
@keyframes fadeBackground {
  0% {
    background-color: rgb(229, 231, 235); /* gray-200 */
  }
  100% {
    background-color: transparent;
  }
}

@keyframes fadeBackgroundDark {
  0% {
    background-color: rgb(55, 65, 81); /* gray-700 */
  }
  100% {
    background-color: transparent;
  }
}

.highlighted {
  animation: fadeBackground 1.5s ease-out;
  border-radius: 0.25rem;
}

:where(.dark, .dark *) .highlighted {
  animation: fadeBackgroundDark 1.5s ease-out;
}

/* Rejection feedback on the sign-in and sign-up cards */
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20%,
  60% {
    transform: translateX(-0.5rem);
  }
  40%,
  80% {
    transform: translateX(0.5rem);
  }
}

.animate-shake {
  animation: shake 0.4s ease-in-out;
}

/* A shake is a vestibular trigger, so leave the card still when asked to. */
@media (prefers-reduced-motion: reduce) {
  .animate-shake {
    animation: none;
  }
}