/* Preserve the Customizer logo and its clickable area underneath a visual swap. */
.sj-header-brand {
	position: relative;
}

.sj-header-brand > .sj-header-loading-icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.sj-header-loading-sprite {
	display: block;
	flex: 0 0 42px;
	width: 42px;
	height: 48px;
	background: url("../../images/game/loading-sprite.svg") 0 0 / 126px 48px no-repeat;
	image-rendering: pixelated;
}

html[data-sj-page-loading] .sj-header-brand > :not(.sj-header-loading-icon) {
	opacity: 0;
}

html[data-sj-page-loading] .sj-header-brand > .sj-header-loading-icon {
	opacity: 1;
	visibility: visible;
}

/* Only the completed arrival fades. A new navigation or cancellation resets
   immediately, so an old transition cannot hide the next running character. */
html[data-sj-page-loading="finishing"] .sj-header-brand > * {
	transition: opacity 180ms ease-out;
}

html[data-sj-page-loading="finishing"] .sj-header-brand > :not(.sj-header-loading-icon) {
	opacity: 1;
}

html[data-sj-page-loading="finishing"] .sj-header-brand > .sj-header-loading-icon {
	opacity: 0;
}

html[data-sj-page-loading] .sj-header-loading-sprite {
	animation: sj-loading-walk 360ms steps(3, end) infinite;
}

@keyframes sj-loading-walk {
	from { background-position: 0 0; }
	to { background-position: -126px 0; }
}

@media (prefers-reduced-motion: reduce) {
	html[data-sj-page-loading="finishing"] .sj-header-brand > * {
		transition: none;
	}

	html[data-sj-page-loading] .sj-header-loading-sprite {
		background-image: url("../../images/game/idle.svg");
		background-size: 42px 48px;
		background-position: 0 0;
		animation: none;
	}
}