/* Motion-only hooks. Content is never hidden while waiting for JavaScript. */
.motion-detail-animating {
  overflow: clip;
  will-change: height;
  overflow-anchor: none;
}

.motion-arrow {
  display: inline-block;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :is(a, button):hover > .motion-arrow {
    transform: translate(3px, -3px);
  }
}

:is(a, button):focus-visible > .motion-arrow {
  transform: translate(3px, -3px);
}

.motion-paused .motion-arrow {
  transition: none;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .motion-arrow {
    transition: none;
    transform: none !important;
  }
}