@media (prefers-reduced-motion: no-preference) {
  :is(a, button, [role="button"]):is(:hover, :focus-visible)
    :is(svg, i, .icon, [class*="icon"]) {
    animation: interactive-icon-bounce 500ms ease-in-out;
    transform-origin: center;
  }

  @keyframes interactive-icon-bounce {
    0%,
    100% {
      transform: translateY(0) rotate(0);
    }

    25% {
      transform: translateY(-4px) rotate(-8deg);
    }

    50% {
      transform: translateY(0) rotate(5deg);
    }

    75% {
      transform: translateY(-2px) rotate(-3deg);
    }
  }
}
