/* Hero Banner ——————————————————————————————————————————————————————
   Editorial-architectural hero: layered gradient overlay, MADE Outer Sans
   display type, monospace section marker, precision scroll cue and a
   hairline slide progress bar. Matches the about-highlights language.
   ——————————————————————————————————————————————————————————————— */

.hero-banner {
	--hb-ink:       var(--ink);
	--hb-paper:     #ffffff;
	--hb-accent:    var(--accent-on-dark);
	--hb-hair:      rgba(255, 255, 255, 0.22);
	--hb-hair-soft: rgba(255, 255, 255, 0.08);
	--hb-hair-sub:  rgba(255, 255, 255, 0.55);
	--hb-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
	--hb-serif:     'Nimbus Roman No9 L', 'Cormorant Garamond', Georgia, serif;
	--hb-display:   'MADE Outer Sans', 'Nunito Sans', system-ui, sans-serif;
	--hb-body:      'Nunito Sans', system-ui, sans-serif;

	position: relative;
	display: flex;
	align-items: flex-end;
	height: 100vh;
	color: #fff;
	overflow: hidden;
	touch-action: pan-y;
	isolation: isolate;
}

.hero-banner--small {
	height: 40vh;
	min-height: 280px;
}

.hero-banner--small .hero-banner__content {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.hero-banner--small .hero-banner__text {
	margin-bottom: 0;
}

@media (max-width: 768px) {
	.hero-banner--small {
		height: 30vh;
		min-height: 200px;
	}
}

.hero-banner--title-center .hero-banner__text {
	text-align: center;
}

.hero-banner--title-center .hero-banner__logo {
	margin-inline: auto;
}

.hero-banner--title-center .hero-banner__ctas {
	justify-content: center;
}

/* Background stack ————————————————————————————————————————————————— */

.hero-banner__backgrounds {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.hero-banner__background {
	position: absolute;
	inset: 0;
	background: center / cover no-repeat;
	filter: grayscale(0.2) contrast(1.04);
	opacity: 0;
	will-change: transform, opacity;
	animation: hero-crossfade var(--hero-cycle, 32s) linear infinite;
}

.hero-banner__background.is-static {
	opacity: 1;
	animation: none;
}

@keyframes hero-crossfade {
	0%     { opacity: 1; transform: scale(1.082); }
	20%    { opacity: 1; transform: scale(1.023); }
	28%    { opacity: 0; transform: scale(1); }
	28.01% { opacity: 0; transform: scale(1.10); }
	93.74% { opacity: 0; transform: scale(1.10); }
	100%   { opacity: 1; transform: scale(1.082); }
}

/* Overlay — layered gradient, not a flat multiply ———————————————————— */

.hero-banner__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		/* subtle top vignette — keeps sky/ceiling detail */
		linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.55) 0%,
			rgba(0, 0, 0, 0.20) 18%,
			rgba(0, 0, 0, 0.05) 38%,
			rgba(0, 0, 0, 0.30) 62%,
			rgba(0, 0, 0, 0.70) 88%,
			rgba(0, 0, 0, 0.82) 100%
		),
		/* lateral darken on the copy side for legibility */
		linear-gradient(
			90deg,
			rgba(0, 0, 0, 0.40) 0%,
			rgba(0, 0, 0, 0.10) 42%,
			rgba(0, 0, 0, 0) 70%
		);
}

.hero-banner__overlay::after {
	/* faint brand glow anchored at the bottom-left, only on desktop full-hero */
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(
			60% 50% at 0% 100%,
			color-mix(in srgb, var(--accent-on-dark) 12%, transparent) 0%,
			color-mix(in srgb, var(--accent-on-dark) 0%, transparent) 55%
		);
	mix-blend-mode: screen;
	opacity: 0.9;
}

.hero-banner--small .hero-banner__overlay::after {
	display: none;
}

/* Film grain — very low opacity, adds cinematic texture —————————————— */

.hero-banner__grain {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	opacity: 0.14;
	mix-blend-mode: overlay;
	background-image:
		radial-gradient(rgba(255,255,255,0.5) 1px, transparent 1px),
		radial-gradient(rgba(0,0,0,0.5) 1px, transparent 1px);
	background-size: 3px 3px, 5px 5px;
	background-position: 0 0, 1px 2px;
}

.hero-banner--small .hero-banner__grain {
	opacity: 0.08;
}

/* Content ——————————————————————————————————————————————————————————— */

.hero-banner__content {
	position: relative;
	z-index: 5;
	width: 100%;
}

.hero-banner__text {
	max-width: 60rem;
	margin-bottom: 18vh;
	padding-left: 1rem;
}

.hero-banner--title-center .hero-banner__text {
	border-left: 0;
	border-image: none;
	padding-left: 0;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 640px) {
	.hero-banner__text {
		margin-bottom: 14vh;
	}
}

.hero-banner__logo {
	max-width: 260px;
	max-height: 100px;
	height: auto;
	object-fit: contain;
	margin-bottom: 1.5rem;
	filter: brightness(0) invert(1);
	opacity: 0;
	animation: hb-fade-up 0.9s cubic-bezier(.22,.61,.36,1) 0.35s forwards;
}

/* Title — MADE Outer Sans, editorial scale —————————————————————————— */

.hero-banner__title {
	font-family: var(--hb-display);
	font-size: clamp(2.3rem, 5.4vw, 4.7rem);
	line-height: 0.98 !important;
	letter-spacing: -0.022em;
	font-weight: 700;
	color: #fff;
	margin: 0 0 1rem;
	max-width: 18ch;
	text-wrap: balance;
	opacity: 0;
	animation: hb-fade-up 1s cubic-bezier(.22,.61,.36,1) 0.35s forwards;
}

.hero-banner--title-center .hero-banner__title {
	margin-inline: auto;
}

.hero-banner__title .hero-banner__highlight {
	color: var(--accent);
	font-weight: 700;
	font-style: normal;
	text-decoration: none;
}

/* Small hero: compress title, no underline flourish */
.hero-banner--small .hero-banner__title {
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	max-width: none;
	margin-bottom: 0;
}

/* Subtitle — Nimbus Roman italic for editorial softness ——————————————— */

.hero-banner__subtitle {
	font-family: var(--hb-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.1rem, 1.8vw, 1.55rem);
	letter-spacing: 0.003em;
	line-height: 1.4 !important;
	color: rgba(255, 255, 255, 0.88);
	margin: 1rem 0 0;
	max-width: 42rem;
	opacity: 0;
	animation: hb-fade-up 0.9s cubic-bezier(.22,.61,.36,1) 0.55s forwards;
}

.hero-banner--title-center .hero-banner__subtitle {
	margin-inline: auto;
}

/* CTA row ————————————————————————————————————————————————————————————— */

.hero-banner__ctas {
	margin-top: 2rem;
	opacity: 0;
	animation: hb-fade-up 0.9s cubic-bezier(.22,.61,.36,1) 0.7s forwards;
}

.hero-banner__ctas .cta-buttons {
	margin-top: 0;
}

/* Slide progress — hairline segmented bar, only when multi-image ————— */

.hero-banner__progress {
	position: absolute;
	right: 2rem;
	bottom: 2rem;
	z-index: 6;
	display: inline-flex;
	align-items: center;
	gap: 0.9rem;
	font-family: var(--hb-mono);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.72);
	opacity: 0;
	animation: hb-fade-up 0.9s cubic-bezier(.22,.61,.36,1) 0.9s forwards;
}

.hero-banner__progress-label {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.hero-banner__progress-sep {
	opacity: 0.45;
}

.hero-banner__progress-track {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.hero-banner__progress-current,
.hero-banner__progress-total {
	display: inline-block;
	min-width: 1.5ch;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.hero-banner__progress-current {
	color: #fff;
	transition: color 0.3s ease;
}

.hero-banner__progress-seg {
	position: relative;
	display: inline-block;
	width: 28px;
	height: 2px;
	background: rgba(255, 255, 255, 0.22);
	overflow: hidden;
}

.hero-banner__progress-seg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--hb-accent);
	transform: scaleX(0);
	transform-origin: left center;
	will-change: transform;
}

/* Past slides — bar stays filled. */
.hero-banner__progress-seg.is-filled::after {
	transform: scaleX(1);
}

/* Current slide — bar fills linearly across its visible window. */
.hero-banner__progress-seg.is-active::after {
	animation: hb-progress-fill var(--hero-visible, 6s) linear forwards;
}

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

@media (max-width: 768px) {
	.hero-banner__progress {
		right: 1.25rem;
		bottom: 1.25rem;
		gap: 0.6rem;
		font-size: 0.62rem;
	}

	.hero-banner__progress-seg {
		width: 18px;
	}
}

/* Scroll cue — thin line + traveling brand-color dot ———————————————— */

.hero-banner__scroll {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2rem;
	width: fit-content;
	margin-inline: auto;
	z-index: 10;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
	color: #fff;
	opacity: 0;
	animation: hb-fade-up 0.9s cubic-bezier(.22,.61,.36,1) 1s forwards;
	transition: opacity 0.3s ease, transform 0.35s cubic-bezier(.22,.61,.36,1);
}

.hero-banner__scroll:hover,
.hero-banner__scroll:focus-visible {
	transform: translateY(3px);
	outline: none;
}

.hero-banner__scroll-label {
	font-family: var(--hb-mono);
	font-size: 0.65rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-indent: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
	transition: color 0.3s ease, letter-spacing 0.35s cubic-bezier(.22,.61,.36,1);
}

.hero-banner__scroll:hover .hero-banner__scroll-label,
.hero-banner__scroll:focus-visible .hero-banner__scroll-label {
	color: var(--hb-accent);
	letter-spacing: 0.28em;
}

.hero-banner__scroll-line {
	position: relative;
	display: block;
	width: 1px;
	height: 56px;
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0.55) 0%,
		rgba(255, 255, 255, 0.18) 100%
	);
	overflow: hidden;
}

.hero-banner__scroll-dot {
	position: absolute;
	left: 50%;
	top: 0;
	width: 5px;
	height: 5px;
	border-radius: 999px;
	background: var(--hb-accent);
	transform: translate(-50%, -6px);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-on-dark) 22%, transparent);
	animation: hb-scroll-dot 2.2s cubic-bezier(.55, 0, .3, 1) infinite;
}

@keyframes hb-scroll-dot {
	0% {
		transform: translate(-50%, -6px);
		opacity: 0;
	}
	15% {
		opacity: 1;
	}
	85% {
		opacity: 1;
	}
	100% {
		transform: translate(-50%, 56px);
		opacity: 0;
	}
}

@media (max-width: 768px) {
	.hero-banner__scroll {
		bottom: 1.25rem;
	}

	.hero-banner__scroll-line {
		height: 40px;
	}

	@keyframes hb-scroll-dot {
		0%   { transform: translate(-50%, -6px); opacity: 0; }
		15%  { opacity: 1; }
		85%  { opacity: 1; }
		100% { transform: translate(-50%, 40px); opacity: 0; }
	}
}

/* Keyframes ————————————————————————————————————————————————————————— */

@keyframes hb-fade-up {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Responsive ———————————————————————————————————————————————————————— */

@media (max-width: 768px) {
	.hero-banner__content {
		padding: 0 20px !important;
	}

	.hero-banner__text {
		padding-left: 0.85rem;
	}
}

@media (max-width: 480px) {
	.hero-banner__subtitle {
		font-size: 1rem;
	}
}

/* Reduced motion ————————————————————————————————————————————————————— */

@media (prefers-reduced-motion: reduce) {
	.hero-banner__background {
		animation: none;
		opacity: 0;
		transform: none;
	}

	.hero-banner__background:first-child {
		opacity: 1;
	}

	.hero-banner__progress-seg::after,
	.hero-banner__progress-seg.is-active::after,
	.hero-banner__scroll-dot,
	.hero-banner__logo,
	.hero-banner__title,
	.hero-banner__subtitle,
	.hero-banner__ctas,
	.hero-banner__progress,
	.hero-banner__scroll {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.hero-banner__progress-seg.is-active::after,
	.hero-banner__progress-seg.is-filled::after {
		transform: scaleX(1);
	}

	.hero-banner__scroll:hover,
	.hero-banner__scroll:focus-visible {
		transform: none;
	}
}