/*
 * Hero. Figma 230:70: a 1920x1160 window (page y 400-1560) onto photos
 * that stay fixed while the page scrolls; rounded bottom corners, 40%
 * black overlay; dots centred 40px from the top; short text at 613px
 * of the window; two-line headline 40px above the window bottom.
 * Slides move sideways (component 199:567).
 */

.hero {
	--hero-height: clamp(480px, 60.4167vw, 1160px);
	--hero-layer-height: max(100lvh, 81.25vw);
	--duration-slide: 900ms;
	--ease-slide: cubic-bezier(0.65, 0, 0.35, 1);

	position: relative;
	height: var(--hero-height);
	color: var(--color-white);
}

/* clip-path also clips the fixed photo layer, which overflow would not. */
.hero__window {
	position: absolute;
	inset: 0;
	clip-path: inset(0 round 0 0 var(--radius) var(--radius));
}

.hero__window::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--color-image-overlay);
}

.hero__track {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--hero-layer-height);
	overflow: hidden;
}

/* Slides wait to the right; .is-left parks a slide to the left; .is-instant skips the animation. */
.hero__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	transform: translateX(100%);
	transition: transform var(--duration-slide) var(--ease-slide);
}

.hero__slide.is-active {
	transform: none;
}

.hero__slide.is-left {
	transform: translateX(-100%);
}

.hero__slide.is-instant {
	transition: none;
}

.hero__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__line {
	display: block;
}

.hero__line--light {
	font-weight: var(--fw-light);
}

.hero__tagline {
	position: absolute;
	top: calc(var(--hero-height) * 0.5284);
	left: var(--gutter);
	font-size: var(--fs-35);
	line-height: var(--lh-body);
	text-box: trim-both cap alphabetic;
}

.hero__headline {
	position: absolute;
	right: var(--gutter);
	bottom: var(--space-40);
	left: var(--gutter);
	font-size: var(--fs-100);
	font-weight: var(--fw-text);
	line-height: var(--lh-subheadline);
	letter-spacing: var(--ls-subheadline);
	text-box: trim-both cap alphabetic;
}

.hero__dots {
	position: absolute;
	left: 50%;
	translate: -50% 0;
}

.hero--dots-top .hero__dots {
	top: var(--space-40);
}

/* Home (Figma 162:87): the dots sit 30px above the bottom edge. */
.hero--dots-bottom .hero__dots {
	bottom: calc(var(--space-40) - var(--space-10));
}

/*
 * Home variant (Figma 162:27 / component 199:567): full-bleed at the top of
 * the page, 1070px tall, photos scroll with the page, 35% overlay, the
 * headline cap top at 457px.
 */
.hero--home {
	--hero-height: clamp(560px, 55.7292vw, 1070px);
	--color-image-overlay: rgb(0 0 0 / 0.35);
}

.hero--home .hero__track {
	position: absolute;
	height: 100%;
}

.hero--home .hero__headline {
	top: calc(var(--hero-height) * 0.4271);
	bottom: auto;
}

@media (prefers-reduced-motion: reduce) {
	.hero__slide {
		transition: none;
	}
}

/* Provisional until the mobile design: no fixed layer on small screens. */
@media (max-width: 767px) {
	.hero__track {
		position: absolute;
		height: 100%;
	}

	.hero__tagline {
		top: var(--space-40);
	}
}