/**
 * Nias frontend effects — custom cursor & smooth scroll.
 *
 * Color/size come from CSS variables injected by the Effects module:
 *   --ns-fx-color  (cursor accent color)
 *   --ns-fx-size   (ring/glow diameter, px)
 * Positioning (translate/scale) is driven per-frame by ns-effects.js; keep
 * transform transitions off these elements or the follow animation stutters.
 */

.ns-fx-cursor {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.25s ease;
}

.ns-fx-cursor.is-hidden {
	opacity: 0;
}

.ns-fx-cursor[data-blend] {
	mix-blend-mode: difference;
}

/* Pointer dot — sticks to the mouse. */
.ns-fx-dot {
	position: fixed;
	top: 0;
	left: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ns-fx-color, #6366f1);
	will-change: transform;
}

/* Follower ring — lerps behind the dot, scales on hover/press. */
.ns-fx-ring {
	position: fixed;
	top: 0;
	left: 0;
	width: var(--ns-fx-size, 36px);
	height: var(--ns-fx-size, 36px);
	border: 1.5px solid var(--ns-fx-color, #6366f1);
	border-radius: 50%;
	transition: opacity 0.25s ease, background-color 0.25s ease;
	will-change: transform;
}

.ns-fx-cursor.is-hover .ns-fx-ring {
	background-color: color-mix(in srgb, var(--ns-fx-color, #6366f1) 12%, transparent);
}

/* ── Style: dot (single filled dot, no ring) ── */
.ns-fx-cursor[data-style="dot"] .ns-fx-dot {
	width: calc(var(--ns-fx-size, 36px) * 0.45);
	height: calc(var(--ns-fx-size, 36px) * 0.45);
	opacity: 0.85;
}

/* ── Style: glow (soft luminous halo instead of a ring) ── */
.ns-fx-cursor[data-style="glow"] .ns-fx-ring {
	border: 0;
	background: radial-gradient(circle, var(--ns-fx-color, #6366f1) 0%, transparent 70%);
	filter: blur(6px);
	opacity: 0.6;
}

.ns-fx-cursor[data-style="glow"].is-hover .ns-fx-ring {
	opacity: 0.9;
}

/* ── Style: trail (chain of fading dots) ── */
.ns-fx-trail {
	position: fixed;
	top: 0;
	left: 0;
	border-radius: 50%;
	background: var(--ns-fx-color, #6366f1);
	will-change: transform;
}

/* Hide the native cursor when the setting asks for it. */
html.ns-fx-no-cursor,
html.ns-fx-no-cursor * {
	cursor: none !important;
}

/* Touch devices: never show the custom cursor (JS also skips init). */
@media (pointer: coarse) {
	.ns-fx-cursor {
		display: none;
	}

	html.ns-fx-no-cursor,
	html.ns-fx-no-cursor * {
		cursor: auto !important;
	}
}