/* Button text/icon roll — the structural half of the GSAP hover animation.
   assets/js/button-roll.js builds two copies of each button's contents at
   runtime and translates them behind this clipping wrapper; this file only
   supplies the clip and the copies' resting offset. The tween itself lives
   in JS because GSAP needs to read and set inline transforms per frame — see
   AGENTS.md §11.1 for why a roll is stacked on the house radius hover here
   (owner-approved waiver) and nowhere else.

   Applies to every button using the shared arrow-and-roll system: the hero's
   two buttons, both header CTA variants, and the footer CTA. One mechanism,
   scoped by .idia-btn-roll rather than four separate per-instance rules. */

.idia-btn-roll {
	position: relative;
	display: inline-flex;
	overflow: hidden;
}

.idia-btn-inner {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
	will-change: transform;
}

/* The clone sits absolutely, one line-height below the visible copy, so
   normal flow still sizes .idia-btn-roll off the first copy alone. JS sets
   the actual offset from the rendered line-height; this is only the
   positioning context. */
.idia-btn-inner--clone {
	position: absolute;
	top: 0;
	left: 0;
}

/* The arrow, now a real element instead of a ::after, so button-roll.js can
   clone it. Same glyph, same mechanism (mask-image, currentColor) as before
   — moving it off the pseudo-element changes nothing visually. Decorative,
   so JS marks the wrapping link's own accessible name unaffected and the
   icon itself carries no text alternative. */
.idia-btn-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M200%2C64V168a8%2C8%2C0%2C0%2C1-16%2C0V83.31L69.66%2C197.66a8%2C8%2C0%2C0%2C1-11.32-11.32L172.69%2C72H88a8%2C8%2C0%2C0%2C1%2C0-16H192A8%2C8%2C0%2C0%2C1%2C200%2C64Z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M200%2C64V168a8%2C8%2C0%2C0%2C1-16%2C0V83.31L69.66%2C197.66a8%2C8%2C0%2C0%2C1-11.32-11.32L172.69%2C72H88a8%2C8%2C0%2C0%2C1%2C0-16H192A8%2C8%2C0%2C0%2C1%2C200%2C64Z%22%2F%3E%3C%2Fsvg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	flex-shrink: 0;
}