/* Interaction motion is separate from one-time scroll entrances. */
@media (prefers-reduced-motion: no-preference) {
  :where(main a, main button) {
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, translate 180ms ease;
  }
  :where(main a, main button):active { translate: 0 1px; }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :where(main a) svg { transition: translate 220ms cubic-bezier(0.22, 1, 0.36, 1); }
  :where(main a:hover, main a:focus-visible) svg { translate: 2px -2px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}