/* =========================================================================
   DecantQ page changes.
   1. (No cross-page fade: pages show the moment they arrive.)
   2. A thin gold bar at the very top, only when a page takes longer than a moment.
   3. When the wait is longer still, a small pill under the header with a vial that fills.
   Nothing here moves for people who ask their device for less motion.
   ====================================================================== */

/* No cross-page fade: on phones the browser had to capture and animate both pages on every tap, and the new page
   only appeared after the fade (measured on a throttled phone: slower and less steady). Pages now show at once. */

/* ---------- The bar ---------- */
.dq-nav {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 100001;
	height: 3px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.dq-nav.is-on {
	opacity: 1;
}
.dq-nav__bar {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, #9c7630, #c89c4c 45%, #f3dfae 75%, #c89c4c);
	box-shadow: 0 0 10px rgba(200, 156, 76, 0.7);
	transform: scaleX(0);
	transform-origin: left center;
}
.dq-nav.is-on .dq-nav__bar {
	animation: dq-nav-grow 8s cubic-bezier(0.1, 0.7, 0.2, 1) forwards;
}
.dq-nav.is-done .dq-nav__bar {
	animation: none;
	transform: scaleX(1);
	transition: transform 0.2s ease;
}
@keyframes dq-nav-grow {
	0%   { transform: scaleX(0); }
	15%  { transform: scaleX(0.45); }
	60%  { transform: scaleX(0.8); }
	100% { transform: scaleX(0.94); }
}

/* ---------- The waiting pill ---------- */
.dq-nav-wait {
	position: fixed;
	top: calc(var(--dq-header-h, 64px) + 14px + env(safe-area-inset-top, 0px));
	left: 50%;
	z-index: 100001;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px 8px 10px;
	border-radius: 999px;
	background: rgba(34, 26, 21, 0.92);
	box-shadow: 0 14px 34px -14px rgba(20, 14, 10, 0.6);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: #f3e6d4;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -6px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.dq-nav-wait[hidden] {
	display: none;
}
.dq-nav-wait.is-on {
	opacity: 1;
	transform: translate(-50%, 0);
}
/* the vial: glass, gold cap, amber liquid rising and settling */
.dq-nav-wait__vial {
	position: relative;
	flex: none;
	width: 12px;
	height: 24px;
	border-radius: 3px 3px 5px 5px;
	background: rgba(243, 230, 212, 0.18);
	box-shadow: inset 0 0 0 1px rgba(243, 230, 212, 0.35);
	overflow: hidden;
}
.dq-nav-wait__vial::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 6px;
	background: linear-gradient(180deg, #f3dfae, #c89c4c);
	z-index: 1;
}
.dq-nav-wait__vial::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 0;
	background: linear-gradient(180deg, #e0a35c, #93461a);
	animation: dq-vial-fill 1.4s ease-in-out infinite;
}
@keyframes dq-vial-fill {
	0%   { height: 0; }
	55%  { height: 72%; }
	80%  { height: 72%; opacity: 1; }
	100% { height: 72%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.dq-nav.is-on .dq-nav__bar {
		animation: none;
		transform: scaleX(0.6);
	}
	.dq-nav-wait__vial::after {
		animation: none;
		height: 60%;
	}
}