reading-mode.css

:root {
	--color: 255, 71, 84;
	--cursor-size: 36px;
}
* {
	cursor: pointer;
}

.new-cursor {
	position: absolute;
	z-index: 99;
	top: 0;
	left: 0;

	width: var(--cursor-size);
	height: var(--cursor-size);

	border: calc(var(--cursor-size)
				/30) solid #fff;
	border-radius: 50%;

	animation: cursor 800ms infinite
			alternate ease-in-out;
	pointer-events: none;
}

.new-cursor::before {
	content: "";
	display: block;
	width: calc(var(--cursor-size) / 2);
	height: calc(var(--cursor-size) / 2);

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	border: calc(var(--cursor-size) / 6)
			dotted rgba(var(--color), 0.3);

	border-radius: 50%;

	animation: cursor-before 800ms infinite
			alternate cubic-bezier(0.19, 1, 0.22, 1);
}

.new-cursor.click {
	animation: cursor-click 800ms
		normal ease-in-out;
}

@keyframes cursor {
	from {
		transform: scale(1);
		border-color: #fff;
	}

	to {
		transform: scale(1.5);
		border-color: rgb(var(--color));
	}
}

@keyframes cursor-before {
	from {
		transform: translate(-50%, -50%) scale(1);
		border-color: rgba(var(--color), 0.25);
	}

	to {
		transform: translate(-50%, -50%) scale(1.5);
		border-color: rgba(var(--color), 0.5);
	}
}

@keyframes cursor-click {

	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(2.5);
		border-color: rgb(var(--color));
	}
}