/* Vector pointer burst: no bitmap assets, so every stage stays crisp at any scale. */
:root {
	--click-fx-white: rgba(255, 255, 255, 0.98);
}

.click-fx {
	position: fixed;
	left: var(--click-x);
	top: var(--click-y);
	width: 0;
	height: 0;
	pointer-events: none;
	z-index: 2147483647;
	isolation: isolate;
	mix-blend-mode: screen;
}

.click-fx__triangle {
	position: absolute;
	left: 0;
	top: 0;
	color: var(--click-fx-white);
	filter:
		drop-shadow(0 0 2px rgba(255, 255, 255, 1))
		drop-shadow(0 0 7px rgba(225, 238, 255, 0.9))
		drop-shadow(0 0 16px rgba(168, 204, 255, 0.55));
	will-change: transform, opacity;
}

.click-fx__ring {
	position: absolute;
	left: 0;
	top: 0;
	color: var(--click-fx-white);
	will-change: transform, opacity;
}

.click-fx__triangle {
	width: 22px;
	height: 20px;
	overflow: visible;
	transform: translate(-50%, -52%);
	animation: click-fx-triangle 430ms cubic-bezier(0.72, 0, 1, 0.55) forwards;
}

.click-fx__triangle polygon {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.35;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	stroke-dasharray: 31 2;
	animation: click-fx-triangle-stroke 430ms ease-in forwards;
}

.click-fx__ring {
	width: var(--click-ring-size);
	height: var(--click-ring-size);
	overflow: visible;
	opacity: 0;
	transform: translate(-50%, -50%);
	animation: click-fx-ring-fade 480ms linear 300ms forwards;
	filter: brightness(1.15);
}

.click-fx__ring circle {
	fill: none;
	stroke: currentColor;
	stroke-width: 0.8;
	vector-effect: non-scaling-stroke;
	shape-rendering: geometricPrecision;
}

@keyframes click-fx-triangle {
	0% {
		opacity: 0;
		transform: translate(-50%, -52%) scale(0.9);
	}
	14% {
		opacity: 1;
	}
	70% {
		opacity: 1;
		transform: translate(-50%, -52%) scale(1.5);
	}
	100% {
		opacity: 0;
		transform: translate(-50%, -52%) scale(1.78);
	}
}

@keyframes click-fx-triangle-stroke {
	0%, 68% {
		stroke-dashoffset: 0;
	}
	100% {
		stroke-dashoffset: -38;
	}
}

@keyframes click-fx-ring-fade {
	0% {
		opacity: 0;
	}
	7% {
		opacity: 1;
	}
	72% {
		opacity: 0.78;
	}
	100% {
		opacity: 0;
	}
}

@supports (color: color(display-p3 1 1 1)) {
	:root {
		--click-fx-white: color(display-p3 1 1 1 / 1);
	}
}

@media (dynamic-range: high) {
	.click-fx__triangle {
		filter:
			brightness(1.55)
			drop-shadow(0 0 2px color(display-p3 1 1 1 / 1))
			drop-shadow(0 0 10px color(display-p3 0.78 0.9 1 / 0.95))
			drop-shadow(0 0 24px color(display-p3 0.55 0.72 1 / 0.7));
	}

	.click-fx__ring {
		filter: brightness(1.45);
	}
}

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