.click-spark {
	position: fixed;
	left: var(--click-x);
	top: var(--click-y);
	z-index: 2147483647;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.62);
	background:
		radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.54) 20%, rgba(255, 255, 255, 0.18) 58%, rgba(255, 255, 255, 0) 76%),
		radial-gradient(circle at 64% 72%, rgba(106, 176, 255, 0.24), rgba(255, 255, 255, 0.04) 60%, rgba(255, 255, 255, 0) 78%);
	backdrop-filter: blur(18px) saturate(1.9) brightness(1.1);
	-webkit-backdrop-filter: blur(18px) saturate(1.9) brightness(1.1);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.18),
		inset 0 1px 3px rgba(255, 255, 255, 0.92),
		inset 0 -6px 12px rgba(104, 153, 211, 0.14),
		0 10px 26px rgba(44, 68, 102, 0.2),
		0 0 28px rgba(255, 255, 255, 0.52);
	opacity: 0.96;
	pointer-events: none;
	transform: translate3d(-50%, -50%, 0) scale(0.5);
	animation: clickDroplet 780ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
	overflow: visible;
	will-change: transform, opacity, filter;
}

.click-spark::before,
.click-spark::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	border-radius: inherit;
	pointer-events: none;
	transform: translate3d(-50%, -50%, 0) scale(0.18);
	will-change: transform, opacity, filter;
}

.click-spark::before {
	width: 78px;
	height: 78px;
	border: 1px solid rgba(255, 255, 255, 0.42);
	background:
		radial-gradient(circle, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, 0.38) 39%, rgba(128, 190, 255, 0.14) 48%, rgba(255, 255, 255, 0) 66%),
		radial-gradient(circle, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 62%);
	backdrop-filter: blur(10px) saturate(1.7);
	-webkit-backdrop-filter: blur(10px) saturate(1.7);
	box-shadow:
		0 0 24px rgba(255, 255, 255, 0.32),
		inset 0 0 18px rgba(255, 255, 255, 0.22);
	animation: clickWaterRingOuter 860ms cubic-bezier(0.18, 0.8, 0.22, 1) forwards;
}

.click-spark::after {
	width: 42px;
	height: 42px;
	border: 1px solid rgba(255, 255, 255, 0.58);
	background:
		radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.42), transparent 18%),
		radial-gradient(circle, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0.36) 42%, rgba(104, 170, 255, 0.16) 55%, rgba(255, 255, 255, 0) 72%);
	backdrop-filter: blur(14px) saturate(1.85);
	-webkit-backdrop-filter: blur(14px) saturate(1.85);
	box-shadow:
		0 0 18px rgba(255, 255, 255, 0.38),
		inset 0 0 14px rgba(255, 255, 255, 0.28);
	animation: clickWaterRingInner 720ms cubic-bezier(0.16, 1, 0.3, 1) 70ms forwards;
}

@keyframes clickDroplet {
	0% {
		opacity: 0.98;
		transform: translate3d(-50%, -50%, 0) scale(0.36);
		filter: blur(0) saturate(1.2);
	}

	26% {
		opacity: 0.96;
		transform: translate3d(-50%, -50%, 0) scale(1.22);
		filter: blur(0.2px) saturate(1.55);
	}

	56% {
		opacity: 0.62;
		transform: translate3d(-50%, -50%, 0) scale(0.92);
		filter: blur(0.7px) saturate(1.2);
	}

	to {
		opacity: 0;
		transform: translate3d(-50%, -50%, 0) scale(0.52);
		filter: blur(2px) saturate(0.9);
		box-shadow:
			0 0 0 1px transparent,
			inset 0 0 0 transparent,
			inset 0 0 0 transparent,
			0 0 0 transparent,
			0 0 0 transparent;
	}
}

@keyframes clickWaterRingOuter {
	0% {
		opacity: 0;
		transform: translate3d(-50%, -50%, 0) scale(0.12);
		filter: blur(0) saturate(1.3);
	}

	22% {
		opacity: 0.72;
	}

	72% {
		opacity: 0.36;
		transform: translate3d(-50%, -50%, 0) scale(1.08);
		filter: blur(0.6px) saturate(1.08);
	}

	to {
		opacity: 0;
		transform: translate3d(-50%, -50%, 0) scale(1.42);
		filter: blur(2.6px) saturate(0.9);
	}
}

@keyframes clickWaterRingInner {
	0% {
		opacity: 0;
		transform: translate3d(-50%, -50%, 0) scale(0.18);
		filter: blur(0) saturate(1.4);
	}

	18% {
		opacity: 0.82;
	}

	68% {
		opacity: 0.42;
		transform: translate3d(-50%, -50%, 0) scale(1.06);
		filter: blur(0.4px) saturate(1.16);
	}

	to {
		opacity: 0;
		transform: translate3d(-50%, -50%, 0) scale(1.32);
		filter: blur(2px) saturate(0.92);
	}
}

@media (prefers-reduced-motion: reduce) {
	.click-spark {
		display: none;
	}
}