/* 1B.7L: hero box-shadow wave. Same keyframes as admin/front slider.css. */

.yepx-hero .yepx-slider__actions,
.yepx-hero .yepx-ripple,
.yepx-hero .yepx-waves,
.yepx-hero .yepx-btn.yepx-ripple,
.yepx-hero .yepx-btn.yepx-waves,
.yepx-hero .yepx-float-card.yepx-ripple,
.yepx-hero .yepx-float-card.yepx-waves {
	overflow: visible;
}

.yepx-hero .yepx-btn.yepx-ripple,
.yepx-hero .yepx-ripple:not(.yepx-float-card) {
	--yepx-ripple: 11, 44, 61;
	--yepx-ripple-a: 0.7;
	position: relative;
	animation-name: yepx-animated-btn;
	animation-duration: 2s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
}

.yepx-hero .yepx-float-card.yepx-ripple {
	--yepx-ripple: 11, 44, 61;
	--yepx-ripple-a: 0.7;
	z-index: 5;
	animation-name: yepx-float-soft, yepx-animated-btn !important;
	animation-duration: var(--yepx-float-dur, 6.2s), 2s !important;
	animation-timing-function: ease-in-out, ease-out !important;
	animation-iteration-count: infinite, infinite !important;
	animation-delay: var(--yepx-float-delay, 0s), 0s !important;
	animation-direction: var(--yepx-float-dir, alternate), normal !important;
}

@keyframes yepx-animated-btn {
	0% {
		box-shadow: 0 0 0 0 rgb(var(--yepx-ripple), var(--yepx-ripple-a, 0.7)), 0 0 0 0 rgb(var(--yepx-ripple), var(--yepx-ripple-a, 0.7));
	}
	40% {
		box-shadow: 0 0 0 50px rgb(var(--yepx-ripple), 0), 0 0 0 0 rgb(var(--yepx-ripple), var(--yepx-ripple-a, 0.7));
	}
	80% {
		box-shadow: 0 0 0 50px rgb(var(--yepx-ripple), 0), 0 0 0 30px rgb(var(--yepx-ripple), 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgb(var(--yepx-ripple), 0), 0 0 0 30px rgb(var(--yepx-ripple), 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.yepx-hero .yepx-ripple,
	.yepx-hero .yepx-waves {
		animation: none !important;
	}
}

html[data-yepx-motion="off"] .yepx-hero .yepx-ripple,
html[data-yepx-motion="off"] .yepx-hero .yepx-waves {
	animation: none !important;
}