/**
 * CTA Extensions – crossfade layers.
 * The gradients themselves are written by Elementor's controls into the post CSS.
 * This file only adds the ::before layers that fade the hover gradients in,
 * and only when a hover gradient is set (via the prefix classes on the widget).
 */

/* ---------------------------------------------------------------------
 * Button: hover gradient on ::before, behind the text
 * ------------------------------------------------------------------- */
.ctax-btn-hover-gradient-gradient .elementor-cta__button {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.ctax-btn-hover-gradient-gradient .elementor-cta__button::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
	transition-property: opacity;
	transition-duration: 300ms;
	transition-timing-function: ease;
}

.ctax-btn-hover-gradient-gradient .elementor-cta__button:hover::before,
.ctax-btn-hover-gradient-gradient .elementor-cta__button:focus-visible::before {
	opacity: 1;
}

/* ---------------------------------------------------------------------
 * Overlay: hover gradient on ::before, crossfading with the
 * widget's own Effect Duration (inherited from the overlay element)
 * ------------------------------------------------------------------- */
.ctax-overlay-hover-gradient-gradient .elementor-cta__bg-overlay::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	transition-property: opacity;
	transition-duration: inherit;
	transition-timing-function: inherit;
}

.ctax-overlay-hover-gradient-gradient .elementor-cta:hover .elementor-cta__bg-overlay::before {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.ctax-btn-hover-gradient-gradient .elementor-cta__button::before,
	.ctax-overlay-hover-gradient-gradient .elementor-cta__bg-overlay::before {
		transition: none;
	}
}