.interactive {
  transition:
    transform var(--motion-fast) var(--motion-ease),
    background-color var(--motion-base) var(--motion-ease),
    color var(--motion-base) var(--motion-ease),
    border-color var(--motion-base) var(--motion-ease),
    box-shadow var(--motion-base) var(--motion-ease),
    opacity var(--motion-base) var(--motion-ease);
}

@media (hover: hover) {
  .interactive:hover {
    transform: translateY(-1px);
  }
}

.interactive:active {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .interactive {
    transition: none;
  }

  .interactive:hover,
  .interactive:active {
    transform: none;
  }
}