.motion-word-mask{display:inline-block;overflow:clip;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em}
.motion-word{display:inline-block;transform-origin:left bottom}
.motion-depth-photo{transition:none!important}
.motion-drag{cursor:grab}
.motion-drag.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.motion-button-label{position:relative;overflow:clip}
.motion-button-echo{position:absolute;inset:0;translate:0 250%;pointer-events:none}
@media(prefers-reduced-motion:no-preference){
 .motion-button-text{display:block}
 .motion-button-text,.motion-button-echo{transition:translate 450ms cubic-bezier(.22,1,.36,1)}
 @media(hover:hover) and (pointer:fine){
  .button:hover .motion-button-text,.small-button:hover .motion-button-text{translate:0 -250%}
  .button:hover .motion-button-echo,.small-button:hover .motion-button-echo{translate:0 0}
 }
}
@media(prefers-reduced-motion:reduce){.motion-depth-photo{transform:none!important}}
/* Keep a full font line box inside the rolling mask (Onest's cap trim clips nested labels). */
.motion-button-label{text-box-trim:none;line-height:1.25;height:1.25em}
.motion-button-text,.motion-button-echo{line-height:inherit}

/* Center both rolling labels by the same cap-height, without baseline nudges. */
.motion-button-label{display:flex;flex-direction:column;justify-content:center;text-align:center}
.motion-button-text,.motion-button-echo{display:block;text-box-trim:trim-both;text-box-edge:cap alphabetic;line-height:1.25}
.motion-button-echo{top:50%;bottom:auto;transform:translateY(-50%)}