/* Phase 4 — Cinematic cursor */

.sc361-cursor {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 20;
	display: none;
}

.sc361-motion--cursor {
	cursor: none;
}

.sc361-cursor__dot {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--sc361-cursor-size, 24px);
	height: var(--sc361-cursor-size, 24px);
	margin: calc(var(--sc361-cursor-size, 24px) / -2) 0 0 calc(var(--sc361-cursor-size, 24px) / -2);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	box-shadow: 0 0 20px rgba(255, 255, 255, 0.35);
	transition: transform 0.2s ease, width 0.2s ease, height 0.2s ease;
	will-change: transform;
}

.sc361-cursor__trail {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(var(--sc361-cursor-size, 24px) * 2);
	height: calc(var(--sc361-cursor-size, 24px) * 2);
	margin: calc(var(--sc361-cursor-size, 24px) * -1) 0 0 calc(var(--sc361-cursor-size, 24px) * -1);
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.25);
	opacity: 0.4;
	will-change: transform;
}

.sc361-cursor--hover .sc361-cursor__dot {
	transform: scale(1.6);
	background: rgba(255, 255, 255, 0.95);
}

.sc361-magnetic {
	will-change: transform;
	transition: transform 0.15s ease-out;
}

@media (prefers-reduced-motion: reduce) {
	.sc361-motion--cursor {
		cursor: auto;
	}
	.sc361-cursor {
		display: none !important;
	}
}