/* Ellington pxl-cursor: inner 12px blend-dot + lagging 20px ring. Native pointer stays visible. */
.asb-cursor,
.asb-cursor-follower {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	pointer-events: none;
	user-select: none;
	border-radius: 100%;
	opacity: 0;
}

.asb-cursor {
	width: 12px;
	height: 12px;
	background-color: #fff;
	transform: scale(1);
	transform-origin: center;
	transition: transform 0.3s linear, opacity 0.2s linear;
}

.asb-cursor.active {
	color: #fff;
	background-color: rgba(156, 156, 156, 0.5);
	opacity: 1;
	transform: scale(2);
}

.asb-cursor:not(.active) {
	mix-blend-mode: difference;
}

.asb-cursor-follower {
	width: 20px;
	height: 20px;
	background-color: rgba(166, 161, 130, 0.2);
	transform: translate(2px, 2px);
	transform-origin: center;
	transition: transform 0.4s linear, opacity 0.2s linear, background 0.2s linear, width 0.2s linear, height 0.2s linear;
}

.asb-cursor-follower.active {
	color: #fff;
	background-color: transparent;
	opacity: 1;
	width: 40px;
	height: 40px;
}

.asb-cursor-follower.active::before {
	content: "";
	position: absolute;
	left: -10px;
	top: -10px;
	display: block;
	width: 100%;
	height: 100%;
	background: transparent;
	border: 1.5px dashed #9c9c9c;
	border-radius: 100%;
	animation: asb-cursor-spin 4s linear infinite;
	transform: none;
	transform-origin: unset;
}

.asb-cursor-follower:not(.active) {
	mix-blend-mode: difference;
}

@keyframes asb-cursor-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(-360deg);
	}
}

@media (max-width: 1199.98px) {
	.asb-cursor,
	.asb-cursor-follower {
		display: none;
	}
}