/* Custom Header Anywhere — Spotlight card effect ("cursor-follow glow")
 * Cards get .kms-spot from cha-effects.js. --mx / --my hold the cursor position inside the card.
 * Only active for mouse users (hover + fine pointer) who have not asked for reduced motion.
 */
@media (hover: hover) and (pointer: fine) {

	.kms-spot {
		--mx: 50%;
		--my: 50%;
		position: relative;
		isolation: isolate;               /* keeps the glow behind the card's own content */
		transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
	}

	/* The glow: sits above the card background, below its text/icons (z-index:-1 inside the isolated card). */
	.kms-spot::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		border-radius: inherit;
		pointer-events: none;
		background: radial-gradient(
			var(--kms-spot-size, 420px) circle at var(--mx) var(--my),
			rgba(var(--kms-spot-rgb, 217,25,45), var(--kms-spot-alpha, .18)),
			transparent 65%
		);
		opacity: 0;
		transition: opacity .35s ease;
	}

	.kms-spot:hover {
		transform: translateY(calc(var(--kms-spot-lift, 5px) * -1));
		box-shadow:
			inset 0 0 0 1px rgba(var(--kms-spot-rgb, 217,25,45), .38),
			0 18px 40px rgba(var(--kms-spot-navy-rgb, 11,31,92), .12);
	}
	.kms-spot:hover::before { opacity: 1; }

	/* Optional: give the icon tile inside a card a tiny extra nudge (add class kms-spot-icon to it). */
	.kms-spot .kms-spot-icon { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
	.kms-spot:hover .kms-spot-icon { transform: translate(-4px, -5px); }
}

@media (prefers-reduced-motion: reduce) {
	.kms-spot, .kms-spot::before, .kms-spot .kms-spot-icon { transition: none !important; }
	.kms-spot:hover, .kms-spot:hover .kms-spot-icon { transform: none !important; }
}