/* =========================================================
   THE FRONT DOOR
   =========================================================
   The homepage of an asset library exists to get someone to
   a file. Search leads; the categories people actually ask
   in are one click away; the imagery is the library itself
   rather than a photograph of nobody in particular.
   ========================================================= */

.bv-door {
	position: relative;
	overflow: hidden;
	padding-block: clamp(4rem, 12vw, 9rem);
	background: var(--color-ink);
	color: var(--color-surface);
	isolation: isolate;
}

/* ----- Cinematic photographic ground (2026-08-08) -----
   The door opens on one photograph from the library, chosen at random per load.
   Search still leads — it sits over the image with a scrim guaranteeing contrast
   against any frame in the pool, light or dark. The .bv-parallax layer is
   nudged by bv-home.js; the -8% vertical bleed keeps its edges off-screen while
   it moves. */

.bv-door--photo {
	min-height: clamp(30rem, 78vh, 52rem);
	display: grid;
	align-content: center;
	padding-block: clamp(4rem, 10vw, 8rem);
}

.bv-door__media {
	position: absolute;
	inset: -8% 0;
	z-index: -2;
	will-change: transform;
}

.bv-door__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.bv-door__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Two layers: a top-to-bottom wash for overall legibility, and a soft
	   radial pool behind the headline/search so the centred content reads on a
	   bright image without darkening the whole frame to mud. */
	background:
		radial-gradient(
			90% 70% at 50% 55%,
			rgba(9, 9, 11, 0.62),
			rgba(9, 9, 11, 0) 70%
		),
		linear-gradient(
			180deg,
			rgba(9, 9, 11, 0.55) 0%,
			rgba(9, 9, 11, 0.28) 42%,
			rgba(9, 9, 11, 0.72) 100%
		);
}

.bv-door__eyebrow {
	margin: 0 0 var(--space-4);
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: var(--track-label);
	font-weight: 700;
	color: #e2ab72; /* light copper — the accent, lifted to read on a photograph */
}

/* ----- Ambient artifact belt -----
   Real assets, pulled live, drifting behind the headline. Add an asset
   tomorrow and the homepage changes. Decorative, so aria-hidden in the
   markup and never a focus target. */

.bv-door__ambient {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: grid;
	align-content: center;
	/* .16 left the grayscale assets so dark on the ink ground that they read as
	   murky smudges at the edges rather than "the library itself." .22 lets the
	   drifting artefacts register as a subtle asset wall while staying clearly
	   behind the white headline and search. */
	opacity: .22;
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.bv-door__belt {
	display: flex;
	gap: var(--space-8);
	width: max-content;
	animation: bv-drift 90s linear infinite;
}

.bv-door__cell {
	display: grid;
	place-items: center;
	width: clamp(120px, 14vw, 200px);
	height: clamp(90px, 10vw, 150px);
	flex: none;
}

.bv-door__art {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(1);
}

@keyframes bv-drift {
	from { transform: translate3d(0, 0, 0); }
	/* The belt is rendered twice, so travelling half its width loops seamlessly. */
	to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.bv-door__belt { animation: none; }
}

/* ----- Content ----- */

.bv-door__inner {
	max-width: 46rem;
	margin-inline: auto;
	padding-inline: var(--space-5);
	text-align: center;
}

.bv-door__title {
	margin: 0 0 var(--space-6);
	font-size: clamp(2.2rem, 6vw, 4.2rem);
	/* 400, not 300: Lora's variable range starts at 400, so 300 asked the
	   browser to synthesise a weight the family does not contain. Harmless
	   while Lora was never downloaded; visible now that it is. */
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: var(--track-display);
	color: var(--color-surface);
}

.bv-door__search {
	display: flex;
	gap: var(--space-2);
	padding: var(--space-2);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
}

.bv-door__search input {
	flex: 1;
	min-width: 0;
	padding: var(--space-3) var(--space-5);
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--font-size-md);
	color: var(--color-text);
}

.bv-door__search input:focus {
	outline: none;
}

.bv-door__search:focus-within {
	box-shadow: 0 0 0 3px var(--color-brass);
}

.bv-door__search button {
	padding: var(--space-3) var(--space-6);
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-ink);
	color: var(--color-surface);
	font: inherit;
	font-size: var(--font-size-sm);
	cursor: pointer;
}

.bv-door__search button:hover {
	background: var(--color-brass);
}

.bv-door__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2);
	margin-top: var(--space-5);
}

.bv-door__chips .bv-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: var(--radius-pill);
	text-decoration: none;
	font-size: var(--font-size-xs);
}

.bv-door__chips .bv-chip:hover,
.bv-door__chips .bv-chip:focus-visible {
	border-color: var(--color-surface);
	background: rgba(255, 255, 255, .1);
}

.bv-chip__count {
	font-family: var(--font-mono);
	font-size: .625rem;
	opacity: .7;
}

.bv-home-light--tight {
	padding-block-start: 0;
}