/*******************************************************************************
CURSOR HALO
*******************************************************************************/

#cursor-halo {
	position: fixed;
	z-index: 9999;
	border-radius: 50%;
	pointer-events: none;
}

#cursor-halo {
	left: 0;
	top: 0;
	width: 2.35rem;
	height: 2.35rem;
	opacity: 0;
	isolation: isolate;
	background: radial-gradient(
		circle,
		rgba(92, 132, 162, 0.2) 0%,
		rgba(125, 174, 207, 0.12) 38%,
		rgba(191, 220, 239, 0.04) 62%,
		transparent 76%
	);
	box-shadow: 0 0 0.7rem rgba(116, 164, 198, 0.12);
	will-change: transform, opacity;
	transition:
		opacity 120ms ease,
		filter 900ms cubic-bezier(0.33, 1, 0.68, 1),
		box-shadow 900ms cubic-bezier(0.33, 1, 0.68, 1);
}

#cursor-halo::before,
#cursor-halo::after {
	content: "";
	position: absolute;
	border-radius: inherit;
	pointer-events: none;
}

#cursor-halo::before {
	inset: -0.2rem;
	z-index: 1;
	opacity: 0;
	background: radial-gradient(
		circle,
		rgba(32, 55, 72, 0.56) 0%,
		rgba(52, 86, 109, 0.38) 30%,
		rgba(91, 133, 161, 0.2) 54%,
		rgba(151, 188, 212, 0.06) 70%,
		transparent 84%
	);
	transform: scale(0.16);
	transition:
		transform 940ms cubic-bezier(0.33, 1, 0.68, 1),
		opacity 940ms cubic-bezier(0.33, 1, 0.68, 1);
}

#cursor-halo::after {
	inset: 10%;
	z-index: 0;
	opacity: 0;
	background: radial-gradient(
		circle,
		rgba(59, 94, 119, 0.16) 0%,
		rgba(93, 134, 163, 0.09) 44%,
		rgba(143, 181, 206, 0.03) 64%,
		transparent 76%
	);
	transform: scale(0.2);
}

.cursor-halo-breath {
	position: absolute;
	inset: -0.15rem;
	z-index: 0;
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
	background: radial-gradient(
		circle,
		rgba(54, 94, 124, 0.36) 0%,
		rgba(88, 139, 176, 0.24) 42%,
		rgba(151, 194, 222, 0.09) 66%,
		transparent 80%
	);
	box-shadow: 0 0 0.95rem 0.08rem rgba(76, 132, 171, 0.25);
	transform: scale(0.78);
}

#cursor-halo.cursor-halo--visible {
	opacity: 1;
}

#cursor-halo.cursor-halo--link:not(.cursor-halo--pressed) .cursor-halo-breath {
	animation: cursor-halo-breathe 1.45s ease-in-out infinite;
}

#cursor-halo.cursor-halo--pressed {
	filter: brightness(0.78) saturate(1.08);
	box-shadow: 0 0 0.8rem rgba(78, 122, 154, 0.19);
	transition-duration: 110ms;
	transition-timing-function: ease, cubic-bezier(0.12, 0.72, 0.2, 1),
		cubic-bezier(0.12, 0.72, 0.2, 1);
}

#cursor-halo.cursor-halo--pressed::before {
	opacity: 1;
	transform: scale(1);
	transition-duration: 130ms;
	transition-timing-function: cubic-bezier(0.12, 0.72, 0.2, 1);
}

#cursor-halo.cursor-halo--clicked::after {
	animation: cursor-halo-expansion 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cursor-halo-expansion {
	0% {
		opacity: 0;
		transform: scale(0.2);
	}

	42% {
		opacity: 0.46;
	}

	100% {
		opacity: 0;
		transform: scale(1.75);
	}
}

@keyframes cursor-halo-breathe {
	0%,
	100% {
		opacity: 0.12;
		transform: scale(0.78);
	}

	50% {
		opacity: 0.9;
		transform: scale(1.2);
	}
}

@media (prefers-reduced-motion: reduce) {
	#cursor-halo {
		display: none;
	}
}