/* Loading indicator for navigation without reload (js/swup-nav.js) */
.bw-nav-progress {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100000;
	width: 100%;
	height: 3px;
	background-color: #3855FC;
	transform: scaleX(0);
	transform-origin: left center;
	opacity: 0;
	pointer-events: none;
}

html[data-color-scheme="red"] .bw-nav-progress {
	background-color: #A43A35;
}

html[data-color-scheme="purple"] .bw-nav-progress {
	background-color: #8936AD;
}

html[data-color-scheme="green"] .bw-nav-progress {
	background-color: #65A33F;
}

/* Shown after a short delay so fast transitions don't flash */
html.is-changing .bw-nav-progress {
	opacity: 1;
	transform: scaleX(0.9);
	transition: opacity 0.1s linear 0.15s, transform 4s cubic-bezier(0.1, 0.6, 0.2, 1) 0.15s;
}

html.is-changing,
html.is-changing * {
	cursor: progress;
}

/* Page transition: values of @swup/slide-theme 2.0.2. Content leaves downwards, the new page comes from above.
   Back/forward has no animation (Swup's animateHistoryBrowsing is off) */
html {
	--bw-slide-translate: 60px;
	--bw-slide-duration-fade: 0.3s;
	--bw-slide-duration-slide: 0.4s;
}

html.is-changing .swup-transition-main {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition:
		opacity var(--bw-slide-duration-fade),
		transform var(--bw-slide-duration-slide);
}

html.is-animating .swup-transition-main {
	opacity: 0;
	transform: translate3d(0, calc(-1 * var(--bw-slide-translate)), 0);
}

html.is-animating.is-leaving .swup-transition-main {
	transform: translate3d(0, var(--bw-slide-translate), 0);
}

@media (prefers-reduced-motion: reduce) {
	html.is-changing .bw-nav-progress {
		transform: scaleX(1);
		transition: opacity 0.1s linear 0.15s;
	}

	/* Fade only, no movement */
	html.is-changing .swup-transition-main {
		transition: opacity var(--bw-slide-duration-fade);
	}

	html.is-animating .swup-transition-main,
	html.is-animating.is-leaving .swup-transition-main {
		transform: none;
	}
}