@media (prefers-reduced-motion: no-preference) {
  :root {
    --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --page-enter-duration: 360ms;
    --page-exit-duration: 180ms;
    --page-enter-step: 30ms;
    --page-exit-step: 20ms;
    --page-motion-distance: 24px;
  }

  :where([data-motion-button]) {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: scale 160ms var(--motion-ease);
  }

  [data-motion-button]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(110deg, transparent 20%,
      rgba(var(--accent-rgb), 0.12) 38%, rgba(255, 255, 255, 0.38) 50%,
      rgba(var(--accent-rgb), 0.12) 62%, transparent 80%);
    opacity: 0;
    pointer-events: none;
  }

  [data-motion-button]:active {
    scale: 0.96;
  }

  [data-motion-button]:focus-visible::after {
    animation: motion-button-sheen 500ms ease-in-out;
  }

  @media (hover: hover) and (pointer: fine) {
    [data-motion-button]:hover::after {
      animation: motion-button-sheen 500ms ease-in-out;
    }
  }

  @media (max-width: 959px) {
    :root {
      --page-enter-duration: 280ms;
      --page-exit-duration: 140ms;
      --page-enter-step: 25ms;
      --page-exit-step: 15ms;
      --page-motion-distance: 16px;
    }
  }

  @keyframes motion-button-sheen {
    0% { opacity: 0; translate: -110% 0; }
    20%, 65% { opacity: 1; }
    100% { opacity: 0; translate: 110% 0; }
  }
}