/* AP Interactive Button — pill CTA with an optional icon badge and a set
   of GPU-friendly hover/click micro interactions. */

.ap-ibtn {
	--ap-ibtn-duration: .35s;
	--ap-ibtn-ripple: rgba(255, 255, 255, .55);
	--ap-ibtn-glow: rgba(124, 108, 247, .75);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	overflow: hidden;
	text-decoration: none;
	line-height: 1;
	cursor: pointer;
	will-change: transform;
	transform: translate3d( var( --ap-ibtn-mx, 0px ), var( --ap-ibtn-my, 0px ), 0 );
	transition: transform var( --ap-ibtn-duration ) cubic-bezier( .34, 1.56, .64, 1 ),
		box-shadow var( --ap-ibtn-duration ) ease,
		background var( --ap-ibtn-duration ) ease,
		filter var( --ap-ibtn-duration ) ease;
}
.ap-ibtn,
.ap-ibtn * {
	box-sizing: border-box;
}
.ap-ibtn-full {
	display: flex;
	width: 100%;
}

.ap-ibtn-text {
	white-space: nowrap;
}

.ap-ibtn-icon-box {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform var( --ap-ibtn-duration ) ease, background var( --ap-ibtn-duration ) ease;
}
.ap-ibtn-icon-plain {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform var( --ap-ibtn-duration ) ease;
}
.ap-ibtn-icon {
	display: inline-flex;
	line-height: 1;
}
.ap-ibtn-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	display: block;
}

/* ---------------- Shine sweep ---------------- */
.ap-ibtn-shine {
	position: absolute;
	top: 0;
	left: -75%;
	width: 45%;
	height: 100%;
	background: linear-gradient( 115deg, transparent, rgba( 255, 255, 255, .35 ), transparent );
	transform: skewX( -20deg );
	pointer-events: none;
}
.ap-ibtn-effect-shine:hover .ap-ibtn-shine {
	animation: ap-ibtn-shine-sweep .85s ease forwards;
}
@keyframes ap-ibtn-shine-sweep {
	to { left: 130%; }
}

/* ---------------- Lift / Scale / Glow / Icon slide ---------------- */
.ap-ibtn-effect-lift:hover {
	transform: translate3d( var( --ap-ibtn-mx, 0px ), calc( var( --ap-ibtn-my, 0px ) - 4px ), 0 );
	box-shadow: 0 14px 28px rgba( 0, 0, 0, .22 );
}
.ap-ibtn-effect-scale:hover {
	transform: translate3d( var( --ap-ibtn-mx, 0px ), var( --ap-ibtn-my, 0px ), 0 ) scale( 1.05 );
}
.ap-ibtn-effect-glow:hover {
	box-shadow: 0 0 0 4px color-mix( in srgb, var( --ap-ibtn-glow ) 35%, transparent ), 0 0 26px var( --ap-ibtn-glow );
}
.ap-ibtn-effect-icon-slide:hover .ap-ibtn-icon-box,
.ap-ibtn-effect-icon-slide:hover .ap-ibtn-icon-plain {
	transform: translateX( 5px );
}

/* Active (mouse-down) squeeze feedback, independent of the chosen hover effect. */
.ap-ibtn:active {
	transform: translate3d( var( --ap-ibtn-mx, 0px ), var( --ap-ibtn-my, 0px ), 0 ) scale( .97 );
}

/* ---------------- Click ripple (span injected by JS on click) ---------------- */
.ap-ibtn-ripple {
	position: absolute;
	border-radius: 50%;
	background: var( --ap-ibtn-ripple );
	transform: scale( 0 );
	opacity: .6;
	pointer-events: none;
	animation: ap-ibtn-ripple-out .6s ease-out forwards;
}
@keyframes ap-ibtn-ripple-out {
	to {
		transform: scale( 2.6 );
		opacity: 0;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.ap-ibtn,
	.ap-ibtn-icon-box,
	.ap-ibtn-icon-plain,
	.ap-ibtn-shine,
	.ap-ibtn-ripple {
		animation: none !important;
		transition: none !important;
	}
}