:root {
	--momento-cursor-core: #f0efd7;
	--momento-cursor-eclipse: #000000;
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
	html.momento-custom-cursor,
	html.momento-custom-cursor * {
		cursor: none !important;
	}

	.momento-cursor {
		position: fixed;
		top: 0;
		left: 0;
		width: 0;
		height: 0;
		pointer-events: none;
		z-index: 120;
		opacity: 0;
		will-change: transform, opacity;
		transform: translate3d(-100px, -100px, 0);
		transition: opacity 0.18s ease;
	}

	.momento-cursor.is-visible {
		opacity: 1;
	}

	.momento-cursor__core,
	.momento-cursor__eclipse {
		position: absolute;
		top: 0;
		left: 0;
		border-radius: 50%;
		transform: translate(-50%, -50%);
		will-change: transform;
	}

	.momento-cursor__core {
		width: 12px;
		height: 12px;
		background: var(--momento-cursor-core);
		transition: opacity 0.22s ease;
		box-shadow:
			0 0 8px 2px rgba(240, 239, 215, 0.95),
			0 0 22px 8px rgba(240, 239, 215, 0.55),
			0 0 44px 16px rgba(240, 239, 215, 0.22);
	}

	.momento-cursor__eclipse {
		width: 9px;
		height: 9px;
		background: var(--momento-cursor-eclipse);
		z-index: 1;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.16s ease, visibility 0.16s ease;
	}

	.momento-cursor.is-eclipse-active .momento-cursor__eclipse {
		opacity: 1;
		visibility: visible;
	}
}