/*
 * Magnetic Spotlight Cursor — Public Styles
 * Plugin: Magnetic Spotlight Cursor
 */

/* ── Reset native cursor on the whole page ── */
*,
*::before,
*::after {
	cursor: none !important;
}

/* ── Magnetic Dot: Ring ── */
#msc-ring {
	position: fixed;
	top: 0;
	left: 0;
	width: var(--msc-size, 20px);
	height: var(--msc-size, 20px);
	border: 2px solid var(--msc-color, #6366f1);
	border-radius: 50%;
	pointer-events: none;
	z-index: 999999;
	transform: translate(-50%, -50%) scale(1);
	transition: width 0.2s ease, height 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.15s ease;
	mix-blend-mode: var(--msc-blend-mode, normal);
	will-change: transform, left, top;
}

#msc-ring.is-hovering {
	transform: translate(-50%, -50%) scale(1.5);
	opacity: 0.7;
}

#msc-ring.is-clicking {
	transform: translate(-50%, -50%) scale(0.8);
}

/* ── Magnetic Dot: Inner Dot ── */
#msc-dot {
	position: fixed;
	top: 0;
	left: 0;
	width: var(--msc-dot-size, 6px);
	height: var(--msc-dot-size, 6px);
	background-color: var(--msc-color, #6366f1);
	border-radius: 50%;
	pointer-events: none;
	z-index: 1000000;
	transform: translate(-50%, -50%);
	transition: width 0.15s ease, height 0.15s ease, background-color 0.2s ease, transform 0.1s ease;
	mix-blend-mode: var(--msc-blend-mode, normal);
	will-change: transform, left, top;
}

#msc-dot.is-hovering {
	transform: translate(-50%, -50%) scale(0);
}

#msc-dot.is-clicking {
	transform: translate(-50%, -50%) scale(1.5);
}

/* ── Spotlight ── */
#msc-spotlight {
	position: fixed;
	top: 0;
	left: 0;
	width: var(--msc-spotlight-size, 300px);
	height: var(--msc-spotlight-size, 300px);
	background: radial-gradient(
		circle closest-side,
		var(--msc-color, #6366f1),
		transparent
	);
	opacity: var(--msc-spotlight-opacity, 0.15);
	border-radius: 50%;
	pointer-events: none;
	z-index: 999999;
	transform: translate(-50%, -50%);
	mix-blend-mode: var(--msc-blend-mode, normal);
	transition: opacity 0.3s ease;
	will-change: left, top;
}

/* ── Trail particles ── */
.msc-trail-particle {
	position: fixed;
	border-radius: 50%;
	pointer-events: none;
	z-index: 999998;
	background-color: var(--msc-color, #6366f1);
	transform: translate(-50%, -50%);
	animation: msc-trail-fade 0.6s ease forwards;
}

@keyframes msc-trail-fade {
	0% {
		opacity: 0.5;
		transform: translate(-50%, -50%) scale(1);
	}
	100% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.1);
	}
}

/* ── Hidden when mobile / touch ── */
.msc-hidden {
	display: none !important;
}