/* Custom Cursor CSS - extracted for caching and isolated loading */

/* Hide on small screens or when JS disables it */
html.no-custom-cursor #custom-cursor { display: none !important; }

#custom-cursor {
	position: fixed;
	left: 0;
	top: 0;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	pointer-events: none;
	z-index: 99999;
	background: transparent;
	transform: translate3d(-50%, -50%, 0);
	will-change: transform, opacity;
	transition: opacity 200ms ease, transform 180ms cubic-bezier(.2,.9,.3,1);
}

#custom-cursor::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--Blue, #4FA9E2);
	opacity: 0.18;
	filter: blur(36px);
	pointer-events: none;
	animation: cursor-breathe 3s ease-in-out infinite;
	transition: opacity 300ms ease, transform 300ms ease, filter 300ms ease;
}

html.cursor-hover #custom-cursor::before {
	transform: scale(1.5);
	opacity: 0.6;
	filter: blur(72px);
}

html.cursor-active #custom-cursor::before {
	transform: scale(0.8);
	opacity: 0.2;
	filter: blur(20px);
}

@keyframes cursor-breathe {
	0% { transform: scale(1); opacity: 0.18; filter: blur(36px); }
	50% { transform: scale(1.12); opacity: 0.36; filter: blur(56px); }
	100% { transform: scale(1); opacity: 0.18; filter: blur(36px); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	#custom-cursor::before { animation: none !important; transition: none !important; }
}