/* Spotlight follows cursor (after Magic UI "magic-card" / Aceternity "card-spotlight"): a soft radial glow in
 * --kfx-c tracks the pointer inside the card, and the border lights up near the pointer.
 * view.js adds one layer span and sets --kfx-x / --kfx-y on it. Behind content on cards, above the overlay on
 * covers, and screen-blended over photos on images. */
.kfx-spotlight-hover { position: relative; isolation: isolate; }
.kfx-spotlight-hover > .kfx-spot {
	position: absolute;
	inset: 0;
	z-index: -1;
	margin: 0 !important;
	max-width: none !important;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transition: opacity calc(0.45s * var(--kfx-s)) ease;
	background: radial-gradient(
		var(--kfx-spot-r, 340px) circle at var(--kfx-x, 50%) var(--kfx-y, 50%),
		color-mix(in oklab, var(--kfx-c) 22%, transparent),
		color-mix(in oklab, var(--kfx-c) 8%, transparent) 40%,
		transparent 72%
	);
}
/* Border glow near the pointer. */
.kfx-spotlight-hover > .kfx-spot::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: radial-gradient(
		220px circle at var(--kfx-x, 50%) var(--kfx-y, 50%),
		color-mix(in oklab, var(--kfx-c) 80%, transparent),
		transparent 70%
	);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.kfx-spotlight-hover.is-spot > .kfx-spot { opacity: 1; }
.kfx-spotlight-hover > .kfx-spot.is-over { z-index: 1; }
.kfx-spotlight-hover > .kfx-spot.is-media { z-index: 1; mix-blend-mode: screen; }