/* Systical — button label roll
   The label is duplicated and stacked, and the wrapper is masked to exactly
   one line so only one copy is ever visible. Hovering slides the stack up by
   one line so the copy takes the original's place; leaving slides it back, so
   the effect plays in both directions. */

.sys-roll {
	/* --sys-roll-line is the mask height. It must match the height of a single
	   label exactly, or both copies show at once (the wrapper would grow to
	   fit them) or the text gets clipped mid-glyph. */
	--sys-roll-line: 1.2em;
	display: inline-block;
	height: var(--sys-roll-line);
	overflow: hidden;
	vertical-align: middle;
}

.sys-roll__inner {
	display: block;
	transition: transform var(--sys-roll-speed, 0.42s)
		var(--sys-roll-ease, cubic-bezier(0.65, 0, 0.35, 1));
	will-change: transform;
}

.sys-roll__t {
	display: block;
	height: var(--sys-roll-line);
	line-height: var(--sys-roll-line);
	white-space: nowrap;
}

/* The stack is two labels tall, so -50% swaps one for the other exactly,
   whatever the font size. */
.sys-roll-host:hover .sys-roll__inner,
.sys-roll-host:focus-visible .sys-roll__inner {
	transform: translateY(-50%);
}

@media (prefers-reduced-motion: reduce) {
	.sys-roll__inner {
		transition: none;
	}

	.sys-roll-host:hover .sys-roll__inner,
	.sys-roll-host:focus-visible .sys-roll__inner {
		transform: none;
	}
}