/**
 * Reusable surface wave. Class name: yepx-waves
 * Color: --yepx-ripple (r,g,b) if already set (slider); else waves.js
 * reads computed background-color / first gradient stop / currentColor.
 * Shares @keyframes yepx-animated-btn with slider .yepx-ripple.
 */
.yepx-waves {
	position: relative;
	overflow: visible;
	animation-name: yepx-animated-btn;
	animation-duration: 2s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
}

@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-waves {
		animation: none !important;
	}
}

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