/* Two copies of each letter share one clipped line; only transforms animate. */
.button-roll-label {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: inherit;
}

.button-roll-word { display: inline-block; white-space: nowrap; }
.button-roll-letter {
  display: inline-block;
  position: relative;
  transform: translateY(0);
  transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--letter-index) * 18ms);
}
.button-roll-letter::after {
  content: attr(data-letter);
  position: absolute;
  top: 100%;
  left: 0;
  color: inherit;
}

@media (hover: hover) and (pointer: fine) {
  .button-roll:hover:not(:disabled):not([aria-disabled="true"]) .button-roll-letter {
    transform: translateY(-100%);
  }
}
.button-roll:focus-visible:not(:disabled):not([aria-disabled="true"]) .button-roll-letter {
  transform: translateY(-100%);
}

/* Touch interactions play once, without retaining a sticky hover state. */
.button-roll.is-tap-rolling .button-roll-letter {
  animation: button-letter-roll 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--letter-index) * 12ms);
}
@media (hover: none), (pointer: coarse) {
  .button-roll-letter { transition: none; }
}
@keyframes button-letter-roll {
  to { transform: translateY(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .button-roll .button-roll-letter {
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .button-roll-letter::after { display: none; }
}