.ag-shockwave-layer {
	position: fixed;
	inset: 0;
	z-index: 999999;
	pointer-events: none;
	overflow: hidden;
}

.ag-shockwave-ring {
	position: fixed;
	left: var(--ag-ring-left);
	top: var(--ag-ring-top);
	width: var(--ag-ring-size);
	height: var(--ag-ring-size);
	border-radius: 50%;
	border-style: solid;
	border-width: var(--ag-ring-thickness);
	border-color: var(--ag-ring-color);
	box-shadow:
		0 0 var(--ag-ring-glow-size) var(--ag-ring-color),
		inset 0 0 calc(var(--ag-ring-glow-size) * 0.55) var(--ag-ring-color);
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.02);
	will-change: transform, opacity;
	animation:
		ag-shockwave-ring-expand var(--ag-ring-duration) cubic-bezier(0.16, 1, 0.3, 1) forwards,
		ag-shockwave-ring-pulse 420ms ease-in-out infinite alternate;
	animation-delay: var(--ag-ring-delay), var(--ag-ring-delay);
}

@keyframes ag-shockwave-ring-expand {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.02);
	}

	10% {
		opacity: 1;
	}

	65% {
		opacity: 0.9;
	}

	100% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(var(--ag-ring-end-scale));
	}
}

@keyframes ag-shockwave-ring-pulse {
	from {
		filter: brightness(0.85);
	}

	to {
		filter: brightness(1.45);
	}
}