/**
 * Navigation progress bar.
 *
 * A bar, not an overlay: a curtain that gets stuck traps the reader, whereas a
 * stuck bar is just a line at the top of a usable page.
 */
.dtl-pageload {
	position: fixed;
	inset: 0 0 auto 0;
	height: 3px;
	z-index: 999999;
	pointer-events: none;
	opacity: 0;
	transition: opacity .15s linear;
}

.dtl-pageload.is-on { opacity: 1; }

.dtl-pageload__bar {
	display: block;
	height: 100%;
	width: 0;
	background: var(--dtl-pageload-color, #7BF080);
	box-shadow: 0 0 10px rgba(123, 240, 128, .55);
}

/* Creeps toward 94% and stops. It never reaches 100% on purpose: the navigation
 * finishes when the page unloads, and a bar that fills while you are still
 * waiting is telling you something untrue. Front-loaded easing so the first
 * moments feel responsive and the long tail slows down. */
.dtl-pageload.is-on .dtl-pageload__bar {
	animation: dtl-pageload-creep 20s cubic-bezier(.1, .78, .22, 1) forwards;
}

@keyframes dtl-pageload-creep {
	0%   { width: 0; }
	20%  { width: 42%; }
	50%  { width: 70%; }
	100% { width: 94%; }
}

@media (prefers-reduced-motion: reduce) {
	.dtl-pageload.is-on .dtl-pageload__bar { animation: none; width: 55%; }
	.dtl-pageload { transition: none; }
}