.button-roll { position: relative; display: inline-grid; vertical-align: middle; overflow: hidden; max-width: 100%; }
.button-roll__line { display: inline-flex; align-items: baseline; padding: 2px 0; white-space: nowrap; transform: translateY(0); transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1); }
.button-roll__copy { position: absolute; inset: 0; transform: translateY(100%); pointer-events: none; }
.has-text-roll:focus-visible .button-roll__line:not(.button-roll__copy) { transform: translateY(-100%); }
.has-text-roll:focus-visible .button-roll__copy { transform: translateY(0); }
@media (hover: hover) and (pointer: fine) {
  .has-text-roll:hover .button-roll__line:not(.button-roll__copy) { transform: translateY(-100%); }
  .has-text-roll:hover .button-roll__copy { transform: translateY(0); }
  .has-text-roll:hover > .order-arrow { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .button-roll__line { transition: none; }
  .has-text-roll:is(:hover, :focus-visible) .button-roll__line:not(.button-roll__copy) { transform: none; }
  .button-roll__copy { visibility: hidden; }
  .has-text-roll:is(:hover, :focus-visible) > .order-arrow { transform: none; }
}