.ce-loader {
	--ce-icon-w: clamp(9rem, 24vmin, 15rem);
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100000;
	overflow: hidden;
	background: var(--ce-primary);
	color: #fff;
	opacity: 1;
	transition:
		opacity 0.35s ease,
		background-color var(--ce-fly-ms, 1.1s) cubic-bezier(0.65, 0, 0.35, 1);
}

html[data-loader] .ce-loader {
	display: block;
}

html[data-loader="leaving"] .ce-loader {
	opacity: 0;
	pointer-events: none;
}

/* The wordmark flies to the header logo (see inc/palette.php). The Primary
   background fades away with it, so the page shows through, and the header
   logo stays hidden until the wordmark has landed on it. */
html[data-loader="flying"] .ce-loader,
html[data-loader="settling"] .ce-loader {
	background-color: transparent;
	pointer-events: none;
}

html[data-loader="flying"] .ce-loader__shape,
html[data-loader="flying"] .ce-loader__icon,
html[data-loader="settling"] .ce-loader__shape,
html[data-loader="settling"] .ce-loader__icon {
	opacity: 0;
}

html[data-loader]:not([data-loader="settling"]) .ce-mark {
	visibility: hidden;
}

html[data-loader] {
	overflow: hidden;
}

.ce-loader__shape,
.ce-loader__icon {
	transition: opacity calc(var(--ce-fly-ms, 1.1s) * 0.45) ease;
}

.ce-loader__shape {
	position: absolute;
	overflow: visible;
	fill: none;
	stroke: var(--ce-secondary);
	pointer-events: none;
}

/* Sits in the lower part of the screen, tilted 20 degrees up to the right. The row is as wide as
   it can be (at most 54vw, the board's size) while its tilted box stays between
   the left edge and the smiley. The box is 1.036 times the row wide. */
.ce-loader__chevrons {
	--ce-row-w: min(54vw, calc((50vw - var(--ce-icon-w) / 2 - 1.5rem) / 1.036));
	top: 74%;
	left: calc(0.75rem + var(--ce-row-w) * 0.518);
	width: var(--ce-row-w);
	height: auto;
	transform: translate(-50%, -50%) rotate(-20deg);
	fill: var(--ce-secondary);
	stroke: none;
}

.ce-loader__asterisk {
	right: -7vw;
	bottom: -7vw;
	width: clamp(14rem, 36vw, 30rem);
	stroke-width: 64;
	stroke-linecap: butt;
}

.ce-loader__wordmark {
	position: absolute;
	top: clamp(1.25rem, 5vh, 3.5rem);
	left: clamp(1.25rem, 5.3vw, 6rem);
	display: block;
	width: clamp(12rem, 55vw, 62rem);
	aspect-ratio: 1713 / 161;
	transform-origin: 0 0;
	background-color: var(--ce-secondary);
	-webkit-mask: url("../images/logo-long.svg") no-repeat left center / contain;
	mask: url("../images/logo-long.svg") no-repeat left center / contain;
}

@media (forced-colors: active) {
	.ce-loader__wordmark {
		background-color: CanvasText;
	}
}

.ce-loader__icon {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--ce-icon-w);
	height: auto;
	transform: translate(-50%, -50%);
	overflow: visible;
}

.ce-loader__line {
	fill: none;
	stroke: var(--ce-secondary);
	stroke-width: 3.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ce-loader__ring {
	transform-origin: 100px 100px;
	animation: ce-loader-spin 2.15s linear infinite;
}

@keyframes ce-loader-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ce-loader,
	.ce-loader__shape,
	.ce-loader__icon {
		transition: none;
	}

	.ce-loader__ring {
		animation: none;
	}
}

@media (max-width: 600px) {
	.ce-loader__asterisk {
		right: -16vw;
		bottom: -12vw;
		width: 14rem;
	}
}