/* Clicked labels rotate upward, letter by letter, without moving their controls. */
.click-roll-run{display:inline;font:inherit;letter-spacing:inherit}
.click-roll-mask{display:inline-block;height:1.15em;line-height:1.15;vertical-align:-.15em;overflow:hidden;perspective:240px;font:inherit;letter-spacing:inherit}
.click-roll-track{position:relative;display:block;line-height:1.15;white-space:pre;transform-style:preserve-3d;animation:click-roll-up 520ms var(--click-roll-delay,0ms) cubic-bezier(.22,.68,.2,1) both}
.click-roll-front{display:block;transform-origin:center top;backface-visibility:hidden;animation:click-roll-out 520ms var(--click-roll-delay,0ms) cubic-bezier(.22,.68,.2,1) both}
.click-roll-track::after{content:attr(data-glyph);display:block;position:absolute;top:100%;left:0;transform-origin:center bottom;backface-visibility:hidden;animation:click-roll-in 520ms var(--click-roll-delay,0ms) cubic-bezier(.22,.68,.2,1) both}
@keyframes click-roll-up{from{transform:translateY(0)}to{transform:translateY(-100%)}}
@keyframes click-roll-out{from{transform:rotateX(0)}to{transform:rotateX(75deg)}}
@keyframes click-roll-in{from{transform:rotateX(-75deg)}to{transform:rotateX(0)}}
@media(prefers-reduced-motion:reduce){.click-roll-track,.click-roll-front,.click-roll-track::after{animation:none}}