/* ===========================================================================
   header-float-capsule — a detached capsule that condenses as the page scrolls
   ---------------------------------------------------------------------------
   Scope: .vbs-header-float-capsule
   Depends on: css/tokens.css, css/base.css

   The header does not span the page. It is one translucent capsule floating
   over whatever is underneath, and the page's own colour comes through it —
   which is the reason it paints from a color-mix of --vb-surface rather than
   an opaque role: over a photograph it has to read as glass, and over a plain
   band it has to read as the band.

   The condense is a CSS scroll-driven animation, not a scroll listener. It
   runs off the main thread's mercy entirely — no JS in this section at all —
   and it is wrapped in @supports because where animation-timeline is missing
   (Firefox today) the resting state has to be the finished one. It is: the
   capsule simply stays at its full width, which is a composition either way.

   Note it animates max-inline-size and padding, which are layout properties.
   That is deliberate and it is cheap here because the subtree is nine
   elements; do not copy the pattern onto something with a page under it.
   ========================================================================= */

.vbs-header-float-capsule {
	position: sticky;
	top: 0;
	z-index: 100;
	padding-block: clamp(0.75rem, 1.4vw, 1.25rem);
	padding-inline: var(--vb-gutter);
}

.vbs-header-float-capsule__capsule {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	inline-size: 100%;
	max-inline-size: var(--vb-max-content);
	margin-inline: auto;
	padding: 0.5rem 0.5rem 0.5rem 1.5rem;
	border-radius: var(--vb-radius-pill);
	border: var(--vb-border-hair) solid color-mix(in srgb, var(--vb-color-rule) 80%, transparent);
	background-color: color-mix(in srgb, var(--vb-surface) 84%, transparent);
	box-shadow: var(--vb-shadow-card);
	-webkit-backdrop-filter: blur(18px) saturate(1.6);
	        backdrop-filter: blur(18px) saturate(1.6);
	min-block-size: 3.75rem;
}

/* --- brand ---------------------------------------------------------------- */
.vbs-header-float-capsule__brand {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin-inline-end: auto;
	font-family: var(--vb-font-display);
	font-weight: var(--vb-weight-heading);
	font-size: var(--vb-fs-h3);
	letter-spacing: var(--vb-ls-h3);
	text-transform: var(--vb-case-display);
	color: var(--vb-color-ink);
	white-space: nowrap;
}
.vbs-header-float-capsule__mark {
	inline-size: 1.4rem;
	block-size: 1.4rem;
	flex: none;
	color: var(--vb-color-accent);
}

/* --- nav ------------------------------------------------------------------ */
.vbs-header-float-capsule__nav { display: none; }
.vbs-header-float-capsule__list { display: flex; align-items: center; gap: 0.15rem; }
.vbs-header-float-capsule__link {
	display: inline-block;
	padding: 0.55rem 0.85rem;
	border-radius: var(--vb-radius-sm);
	font-size: var(--vb-fs-small);
	font-weight: var(--vb-weight-strong);
	color: var(--vb-color-ink-soft);
	transition: background-color var(--vb-dur-base) var(--vb-ease-out-soft),
	            color var(--vb-dur-base) var(--vb-ease-out-soft);
}
.vbs-header-float-capsule__link:hover {
	background-color: color-mix(in srgb, var(--vb-color-ink) 8%, transparent);
	color: var(--vb-color-ink);
}
.vbs-header-float-capsule__link[aria-current="page"] { color: var(--vb-color-ink); }

.vbs-header-float-capsule__actions { display: none; align-items: center; gap: 1rem; }
.vbs-header-float-capsule__signin {
	font-size: var(--vb-fs-small);
	font-weight: var(--vb-weight-strong);
	color: var(--vb-color-ink-soft);
	white-space: nowrap;
	transition: color var(--vb-dur-base) var(--vb-ease-out-soft);
}
.vbs-header-float-capsule__signin:hover { color: var(--vb-color-ink); }

/* --- the mobile trigger ---------------------------------------------------
   Two bars of unequal length that trade lengths under the pointer — the mark
   moves before it is pressed, which is the whole affordance on a control this
   small — and cross into an X once the menu it opens reports itself expanded.
   That menu is a popup template, picked separately from this header. */
.vbs-header-float-capsule__toggle {
	margin-inline-start: auto;
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: var(--vb-radius-pill);
	background-color: color-mix(in srgb, var(--vb-color-ink) 8%, transparent);
	color: var(--vb-color-ink);
	cursor: pointer;
}

.vbs-header-float-capsule__rules {
	--vbs-bar: max(2px, var(--vb-border-hair));
	--vbs-gap: 0.4rem;
	display: grid;
	gap: var(--vbs-gap);
	inline-size: 1.2rem;
}
.vbs-header-float-capsule__rules > span {
	display: block;
	block-size: var(--vbs-bar);
	background-color: currentColor;
	transition: inline-size var(--vb-dur-base) var(--vb-ease-out-soft),
	            transform var(--vb-dur-base) var(--vb-ease-out-soft);
}
.vbs-header-float-capsule__rules > span:nth-child(1) { inline-size: 100%; justify-self: start; }
.vbs-header-float-capsule__rules > span:nth-child(2) { inline-size: 60%; justify-self: start; }

.vbs-header-float-capsule__toggle:hover .vbs-header-float-capsule__rules > span:nth-child(1) { inline-size: 60%; }
.vbs-header-float-capsule__toggle:hover .vbs-header-float-capsule__rules > span:nth-child(2) { inline-size: 100%; }

.vbs-header-float-capsule__toggle[aria-expanded="true"] .vbs-header-float-capsule__rules > span:nth-child(1) {
	inline-size: 100%;
	transform: translateY(calc((var(--vbs-bar) + var(--vbs-gap)) / 2)) rotate(-45deg);
}
.vbs-header-float-capsule__toggle[aria-expanded="true"] .vbs-header-float-capsule__rules > span:nth-child(2) {
	inline-size: 100%;
	transform: translateY(calc(-1 * (var(--vbs-bar) + var(--vbs-gap)) / 2)) rotate(45deg);
}

@media (min-width: 60rem) {
	.vbs-header-float-capsule__nav { display: block; margin-inline: auto; }
	.vbs-header-float-capsule__actions { display: flex; }
	.vbs-header-float-capsule__toggle { display: none; }
	.vbs-header-float-capsule__brand { margin-inline-end: 0; }
}

/* --- the condense ---------------------------------------------------------
   Progressive enhancement, and the only thing in the section that reads the
   page's scroll position. Where it is unsupported the capsule holds the
   `from` state, which is the state the catalog card shows anyway — a preview
   iframe never scrolls, so the timeline there is inactive by construction. */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.vbs-header-float-capsule__capsule {
			animation: vbs-header-float-capsule-condense linear both;
			animation-timeline: scroll(root block);
			animation-range: 0 260px;
		}
		@keyframes vbs-header-float-capsule-condense {
			from {
				max-inline-size: var(--vb-max-content);
				padding-block: 0.5rem;
				box-shadow: var(--vb-shadow-card);
				background-color: color-mix(in srgb, var(--vb-surface) 84%, transparent);
			}
			to {
				max-inline-size: calc(var(--vb-max-content) * 0.76);
				padding-block: 0.3rem;
				box-shadow: var(--vb-shadow-card-hover);
				background-color: color-mix(in srgb, var(--vb-surface) 96%, transparent);
			}
		}
	}
}