/* =====================================================
 * Cursor-following ambient glow (whole site, below header).
 * Subtle ~10% primary-colour radial light that tracks the
 * pointer. Fixed layer, pointer-events: none, GPU-composited
 * (only transform/opacity change). Header (.tta-header,
 * z-index 999) paints above it and is never affected.
 * ===================================================== */

.cursor-glow {
	position: fixed;
	inset: 0;
	z-index: 500; /* Below .tta-header (999) and mobile drawer */
	pointer-events: none;
	overflow: hidden;
}

.cursor-glow__orb {
	position: absolute;
	top: 0;
	left: 0;
	width: 720px;
	height: 720px;
	margin: -360px 0 0 -360px; /* centres the orb on the cursor */
	border-radius: 50%;
	opacity: 0;
	transition: opacity 0.45s ease;
	/* will-change is applied by the script only while the animation loop
	   is live, so an idle page does not hold a promoted layer. */

	/* Fallback rgba for browsers without color-mix() */
	background: radial-gradient(circle,
		rgba(151, 61, 217, 0.10) 0%,
		rgba(151, 61, 217, 0.05) 38%,
		rgba(151, 61, 217, 0) 70%);

	/* Primary brand colour via project token (~10% intensity) */
	background: radial-gradient(circle,
		color-mix(in srgb, var(--wp--preset--color--tta-purple, #973DD9) 10%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--tta-purple, #973DD9) 5%, transparent) 38%,
		transparent 70%);
}

.cursor-glow.is-active .cursor-glow__orb {
	opacity: 1;
}