html {
  scroll-behavior: smooth;
}

.motion-card {
  opacity: 1;
  transform: translateY(0);
  animation: motion-card-enter 700ms ease-out both;
  transition: transform 240ms ease;
}

.motion-card:hover,
.motion-card:focus-visible {
  transform: translateY(-0.4rem);
  box-shadow: 0 18px 36px rgb(56 45 27 / 18%);
}

.motion-card:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 4px;
}

@keyframes motion-card-enter {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}