/* Performa Button */
.pf-button { margin-bottom: 1.25em; }
.pf-button--inline { display: inline-block; margin-right: 12px; vertical-align: top; }
.pf-button--center { text-align: center; }
.pf-button--right { text-align: right; }
.pf-button--block .pf-btn { display: flex; width: 100%; }
.pf-button .pf-btn { position: relative; overflow: hidden; isolation: isolate; }

.pf-btn--gradient { --_bg: transparent; background-image: var(--pf-gradient); border-color: transparent; }
.pf-btn--gradient:hover { --_bg: transparent; filter: saturate(1.15) brightness(1.05); }

/* Icon slide */
.pf-btn--icon-slide .pf-icon { transition: transform .35s var(--pf-ease); }
.pf-btn--icon-slide:hover .pf-btn__label + .pf-icon { transform: translateX(4px); }
.pf-btn--icon-slide:hover .pf-icon:first-child { transform: translateX(-3px); }

/* Lift */
.pf-hover-lift:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--_bg) 70%, transparent); }

/* Fill sweep: a layer slides in from the left. */
.pf-hover-sweep::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--_bg) 78%, #000);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .5s var(--pf-ease);
}
.pf-hover-sweep:hover::before { transform: scaleX(1); transform-origin: left; }
.pf-hover-sweep.pf-btn--outline::before, .pf-hover-sweep.pf-btn--ghost::before { background: var(--_bg); }
.pf-btn.pf-hover-sweep:hover { background-color: var(--_bg); border-color: var(--_bg); }
.pf-btn.pf-hover-sweep.pf-btn--outline:hover,
.pf-btn.pf-hover-sweep.pf-btn--ghost:hover { background: transparent; color: var(--_fg); }

/* Shine: a light streak passes across. */
.pf-hover-shine::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 40%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
	transform: skewX(-20deg);
	transition: left .7s var(--pf-ease);
	pointer-events: none;
}
.pf-hover-shine:hover::after { left: 130%; }

/* Magnetic: GSAP moves the button; keep the label from jittering. */
.pf-hover-magnetic { will-change: transform; }