/**
 * ============================================================================
 * Premium cursor-follow circle
 * ============================================================================
 * A single, small, thin-outline circle that trails the pointer with a soft
 * lag. Purely additive/decorative -- does not touch layout, typography,
 * navigation, buttons, or any existing selector in the theme.
 *
 * Scope:
 * - Only ever shown on fine-pointer devices (mouse / trackpad / precision
 *   pointer). The whole ruleset lives inside the (hover: hover) and
 *   (pointer: fine) media query so touch-only phones/tablets never see it,
 *   in the CSS as well as the JS (see js/cursor-follow.js).
 * - Fully disabled for prefers-reduced-motion: reduce.
 * - Never hides or replaces the native system cursor.
 *
 * The element and its position are managed by js/cursor-follow.js, which
 * creates a single #ibox-cursor-follow node appended to <body> and moves it
 * with translate3d() inside a requestAnimationFrame loop. This file only
 * defines its appearance and the (CSS-driven) hover/visibility transitions.
 * ============================================================================
 */

@media (hover: hover) and (pointer: fine) {

	#ibox-cursor-follow {
		position: fixed;
		top: 0;
		left: 0;
		width: 0;
		height: 0;
		margin: 0;
		padding: 0;
		pointer-events: none;
		z-index: 9999;
		will-change: transform;
	}

	#ibox-cursor-follow .ibox-cursor-follow__ring {
		position: absolute;
		top: 0;
		left: 0;
		width: 28px;
		height: 28px;
		margin: -14px 0 0 -14px;
		border-radius: 50%;
		border: 1px solid rgba(79, 157, 255, 0.45);
		background-color: rgba(79, 157, 255, 0.04);
		opacity: 0;
		transform: scale(0.85);
		transition: opacity 0.25s ease, transform 0.25s ease,
			border-color 0.25s ease, background-color 0.25s ease;
	}

	/* Shown once the pointer has actually moved inside the viewport. */
	#ibox-cursor-follow.is-visible .ibox-cursor-follow__ring {
		opacity: 1;
		transform: scale(1);
	}

	/* Gentle, restrained expansion over interactive elements -- no dramatic
	   scale change, no glow, no colour shift beyond a touch more presence. */
	#ibox-cursor-follow.is-hover .ibox-cursor-follow__ring {
		transform: scale(1.35);
		border-color: rgba(79, 157, 255, 0.6);
		background-color: rgba(79, 157, 255, 0.07);
	}
}

/* Belt-and-braces: even if the JS check were ever bypassed, this guarantees
   the effect never renders for users who have asked for reduced motion. */
@media (prefers-reduced-motion: reduce) {
	#ibox-cursor-follow {
		display: none !important;
	}
}