@media (prefers-reduced-motion: no-preference) {
  .button,
  .card,
  .artifact-card {
    transition: transform 140ms ease, border-color 140ms ease, filter 140ms ease;
  }

  .button:active,
  .card:active,
  .artifact-card:active {
    transform: translateY(4px) scale(0.98);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.34), 0 10px 20px rgba(0, 0, 0, 0.2);
  }

  .button:hover,
  .card:hover {
    filter: brightness(1.08);
  }

  @keyframes floatBubble {
    50% {
      transform: translateY(-13px) scale(1.04);
    }
  }

  .game-logo {
    animation: logoPop 520ms ease both;
  }

  @keyframes logoPop {
    from {
      opacity: 0;
      transform: translateY(16px) scale(0.94);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}