:root {
	--mojo-ct-blue: #1467c3;
	--mojo-ct-bright: #2b88ff;
}

/*
 * This shield exists as soon as the bootstrap script marks the root element.
 * It covers the destination before the body or transition markup can paint,
 * eliminating single-frame flashes from hero artwork or page chrome.
 */
html.mojo-ct-arriving::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 2147483647;
	display: block;
	background: #fff;
	pointer-events: none;
}

.mojo-ct-overlay {
	position: fixed;
	inset: 0;
	z-index: 2147483646;
	display: block;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	isolation: isolate;
	contain: strict;
	background: transparent;
	transition: none;
}

.mojo-ct-overlay.is-active,
html.mojo-ct-arriving .mojo-ct-overlay {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.mojo-ct-wash,
.mojo-ct-bloom,
.mojo-ct-canvas,
.mojo-ct-core {
	position: absolute;
	pointer-events: none;
}

.mojo-ct-wash {
	inset: -8%;
	z-index: 1;
	background: #fff;
	opacity: 0;
	will-change: opacity;
}

html.mojo-ct-arriving .mojo-ct-wash {
	opacity: 1;
}

.mojo-ct-bloom {
	left: 50%;
	top: 50%;
	z-index: 2;
	width: 145vmax;
	height: 145vmax;
	border-radius: 50%;
	background:
		radial-gradient(circle,
			rgb(255 255 255 / 100%) 0%,
			rgb(245 250 255 / 98%) 23%,
			rgb(206 230 255 / 78%) 45%,
			rgb(43 136 255 / 26%) 65%,
			rgb(20 103 195 / 0%) 78%);
	filter: blur(12px);
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.24);
	will-change: transform, opacity;
}

html.mojo-ct-arriving .mojo-ct-bloom {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1.45);
}

.mojo-ct-canvas {
	inset: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	opacity: 0;
	-webkit-mask-image: radial-gradient(
		ellipse at center,
		#000 0%,
		#000 52%,
		rgb(0 0 0 / 85%) 68%,
		rgb(0 0 0 / 25%) 86%,
		transparent 100%
	);
	mask-image: radial-gradient(
		ellipse at center,
		#000 0%,
		#000 52%,
		rgb(0 0 0 / 85%) 68%,
		rgb(0 0 0 / 25%) 86%,
		transparent 100%
	);
	will-change: opacity;
}

.mojo-ct-core {
	left: 50%;
	top: 50%;
	z-index: 4;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background:
		radial-gradient(circle,
			rgb(255 255 255 / 92%) 0%,
			rgb(172 218 255 / 62%) 22%,
			color-mix(in srgb, var(--mojo-ct-bright) 46%, transparent) 46%,
			transparent 76%);
	box-shadow:
		0 0 44px color-mix(in srgb, var(--mojo-ct-bright) 44%, transparent),
		0 0 110px color-mix(in srgb, var(--mojo-ct-blue) 28%, transparent);
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.55);
	will-change: transform, opacity;
}

.mojo-ct-status {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

html.mojo-ct-active,
html.mojo-ct-active body {
	overscroll-behavior: none;
}

@media (max-width: 699px) {
	.mojo-ct-bloom {
		filter: blur(7px);
	}

	.mojo-ct-core {
		width: 112px;
		height: 112px;
	}

}

@media (prefers-reduced-motion: reduce) {
	.mojo-ct-overlay,
	.mojo-ct-bloom,
	.mojo-ct-core {
		animation: none !important;
		transition: none !important;
	}
}