/*
 * PureCSS.com
 * https://purecss.com/examples/shrinking-header/
 * A sticky header that shrinks height and font-size on scroll using CSS scroll-driven animations.
 */

.demo-shrinking-header .shrink-frame {
	width: 100%;
	height: 320px;
	overflow-y: auto;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
}

.demo-shrinking-header .shrink-header {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1.25rem;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	animation: sh-shrink linear both;
	animation-timeline: scroll();
	animation-range: 0px 80px;
}

@keyframes sh-shrink {
	from { height: 60px; }
	to   { height: 38px; }
}

.demo-shrinking-header .shrink-logo {
	font-family: var(--font-mono);
	font-weight: 700;
	color: var(--accent);
	animation: sh-logo linear both;
	animation-timeline: scroll();
	animation-range: 0px 80px;
}

@keyframes sh-logo {
	from { font-size: 1rem; }
	to   { font-size: .72rem; }
}

.demo-shrinking-header .shrink-nav {
	display: flex;
	gap: 1.25rem;
}

.demo-shrinking-header .shrink-nav a {
	font-family: var(--font-mono);
	color: var(--text-muted);
	text-decoration: none;
	animation: sh-nav linear both;
	animation-timeline: scroll();
	animation-range: 0px 80px;
}

@keyframes sh-nav {
	from { font-size: .72rem; }
	to   { font-size: .58rem; }
}

.demo-shrinking-header .shrink-content {
	padding: 1rem 1.25rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.demo-shrinking-header .shrink-hint {
	font-family: var(--font-mono);
	font-size: .65rem;
	color: var(--text-muted);
	letter-spacing: .08em;
	text-align: center;
	padding: .25rem 0;
}

.demo-shrinking-header .shrink-block {
	height: 52px;
	background: var(--surface-2);
	border-radius: var(--radius);
	border: 1px solid var(--border);
}

.demo-shrinking-header .shrink-block-tall {
	height: 76px;
	background: var(--surface-2);
	border-radius: var(--radius);
	border: 1px solid var(--border);
}

/* The card preview scrolls to shrink the header, so it keeps its pointer events
   instead of letting clicks fall through to the card link. */
.card-preview .demo-shrinking-header {
	pointer-events: auto;
}

/* ── Variant: one timeline read over two different ranges ── */

.demo-shrinking-header .prog-frame {
	width: 100%;
	height: 320px;
	overflow-y: auto;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
}

/* sticky is a positioned value, so the progress bar can be
   absolutely positioned against this without a relative wrapper */
.demo-shrinking-header .prog-header {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 60px;
	padding: 0 1.25rem;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
}

.demo-shrinking-header .prog-logo {
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: 1rem;
	color: var(--accent);
}

.demo-shrinking-header .prog-nav {
	display: flex;
	gap: 1.25rem;
}

.demo-shrinking-header .prog-nav a {
	font-family: var(--font-mono);
	font-size: .72rem;
	color: var(--text-muted);
	text-decoration: none;
}

/* scaleX composites, where animating width would force layout */
.demo-shrinking-header .prog-bar {
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, var(--accent), var(--teal));
	transform: scaleX(0);
	transform-origin: left center;
}

/* the guard matters: a browser with no scroll timeline would run
   these as ordinary animations and play them once on load */
@supports (animation-timeline: scroll()) {
	.demo-shrinking-header .prog-header {
		animation: ph-shrink linear both;
		animation-timeline: scroll();
		animation-range: 0px 80px;
	}

	.demo-shrinking-header .prog-logo {
		animation: ph-logo linear both;
		animation-timeline: scroll();
		animation-range: 0px 80px;
	}

	/* same timeline, no range, so it spans the whole scroll */
	.demo-shrinking-header .prog-bar {
		animation: ph-progress linear both;
		animation-timeline: scroll();
	}
}

@keyframes ph-shrink {
	from { height: 60px; }
	to   { height: 38px; }
}

@keyframes ph-logo {
	from { font-size: 1rem; }
	to   { font-size: .72rem; }
}

@keyframes ph-progress {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

.demo-shrinking-header .prog-content {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding: 1rem 1.25rem 1.25rem;
}

.demo-shrinking-header .prog-hint {
	padding: .25rem 0;
	font-family: var(--font-mono);
	font-size: .65rem;
	letter-spacing: .06em;
	text-align: center;
	color: var(--text-muted);
}

/* ── Variant: the same result with no scroll timeline at all ── */

.demo-shrinking-header .fb-frame {
	width: 100%;
	height: 320px;
	overflow-y: auto;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
}

/* ordinary flow content: it simply scrolls away */
.demo-shrinking-header .fb-hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .25rem;
	height: 96px;
	padding: 0 1.25rem;
	background: var(--surface-2);
}

.demo-shrinking-header .fb-logo-big {
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--accent);
}

.demo-shrinking-header .fb-tagline {
	font-family: var(--font-mono);
	font-size: .68rem;
	letter-spacing: .06em;
	color: var(--text-muted);
}

/* the short bar is the sticky one, so what stays behind once the
   hero has scrolled off is already the compact header */
.demo-shrinking-header .fb-bar {
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 40px;
	padding: 0 1.25rem;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
}

.demo-shrinking-header .fb-logo {
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: .8rem;
	color: var(--accent);
}

.demo-shrinking-header .fb-nav {
	display: flex;
	gap: 1.25rem;
}

.demo-shrinking-header .fb-nav a {
	font-family: var(--font-mono);
	font-size: .68rem;
	color: var(--text-muted);
	text-decoration: none;
}

.demo-shrinking-header .fb-content {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding: 1rem 1.25rem 1.25rem;
}

/* a header that resizes while the reader scrolls is motion, so it
   settles at the compact size instead of animating there */
@media (prefers-reduced-motion: reduce) {
	.demo-shrinking-header .shrink-header,
	.demo-shrinking-header .prog-header,
	.demo-shrinking-header .prog-logo,
	.demo-shrinking-header .prog-bar,
	.demo-shrinking-header .shrink-logo,
	.demo-shrinking-header .shrink-nav a {
		animation: none;
	}

	.demo-shrinking-header .shrink-header,
	.demo-shrinking-header .prog-header {
		height: 38px;
	}
}