/* Custom cursor */
.cursor {
	position: fixed;
	top: 0;
	left: 0;
	width: 8px;
	height: 8px;
	background: var(--accent);
	border-radius: 50%;
	opacity: 0.5;
	pointer-events: none;
	z-index: 9999;
	transform: translate(-50%, -50%);
	transition:
		transform 0.08s ease-in-out,
		width 0.2s ease-in-out,
		height 0.2s ease-in-out,
		background 0.2s ease-in-out;
	mix-blend-mode: multiply;
}
.cursor-ring {
	position: fixed;
	top: 0;
	left: 0;
	width: 36px;
	height: 36px;
	border: 2px solid var(--accent);
	border-radius: 50%;
	pointer-events: none;
	z-index: 9998;
	transform: translate(-50%, -50%);
	transition:
		transform 0.18s ease,
		width 0.2s ease,
		height 0.2s ease,
		opacity 0.2s ease;
	opacity: 0.3;
}
.cursor.grow {
	width: 32px;
	height: 32px;
}
.cursor.active {
	width: 60px;
	height: 60px;
}
.cursor-ring.grow {
	width: 60px;
	height: 60px;
	opacity: 0.2;
}