/* ==========================================================================
   Hero slider
   ========================================================================== */

.hero {
	--hero-fade: 1.2s;
	position: relative;
	height: 100vh;
	height: 100svh;
	min-height: 540px;
	overflow: hidden;
	background: #111;
	color: #fff;
}

/* Slides ---------------------------------------------------------------- */

.hero__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 7rem clamp(1.25rem, 6vw, 6rem) 6rem;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--hero-fade) ease, visibility 0s linear var(--hero-fade);
}

.hero__slide.is-active {
	z-index: 1;
	opacity: 1;
	visibility: visible;
	transition: opacity var(--hero-fade) ease;
}

.hero__slide--bottom-center { align-items: flex-end; }
.hero__slide--bottom-left   { align-items: flex-end; justify-content: flex-start; }

/* Media ----------------------------------------------------------------- */

.hero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, calc(var(--overlay, .3) * .7)) 0%,
		rgba(0, 0, 0, var(--overlay, .3)) 60%,
		rgba(0, 0, 0, calc(var(--overlay, .3) + .15)) 100%
	);
	pointer-events: none;
}

.hero .hero__img,
.hero .hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Slow "Ken Burns" zoom on image slides */
.hero__slide[data-type="image"].is-active .hero__img {
	animation: hero-zoom calc(var(--hero-interval, 6s) + var(--hero-fade)) ease-out both;
}

@keyframes hero-zoom {
	from { transform: scale(1.08); }
	to   { transform: scale(1); }
}

/* Video fades in over its poster once it actually plays */
.hero__video {
	opacity: 0;
	transition: opacity .8s ease;
}
.hero__slide.is-playing .hero__video { opacity: 1; }

/* Text ------------------------------------------------------------------ */

.hero__content {
	position: relative;
	z-index: 2;
	max-width: 52rem;
	text-align: center;
	text-shadow: 0 1px 24px rgba(0, 0, 0, .25);
}
.hero__slide--bottom-left .hero__content { text-align: left; }

.hero__content > * {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .9s ease, transform .9s ease;
}
.hero__slide.is-active .hero__content > * {
	opacity: 1;
	transform: none;
}
.hero__slide.is-active .hero__content > :nth-child(1) { transition-delay: .35s; }
.hero__slide.is-active .hero__content > :nth-child(2) { transition-delay: .5s; }
.hero__slide.is-active .hero__content > :nth-child(3) { transition-delay: .65s; }
.hero__slide.is-active .hero__content > :nth-child(4) { transition-delay: .8s; }

.hero__eyebrow {
	margin: 0 0 1.25rem;
	font-family: var(--la-sans);
	font-size: .75rem;
	font-weight: 400;
	letter-spacing: .35em;
	text-transform: uppercase;
}

.hero__title {
	margin: 0;
	font-family: var(--la-serif);
	font-size: clamp(2.6rem, 6.5vw, 6rem);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: .01em;
}

.hero__text {
	max-width: 36rem;
	margin: 1.25rem auto 0;
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	font-weight: 300;
	line-height: 1.6;
}
.hero__slide--bottom-left .hero__text { margin-left: 0; }

.hero__button {
	display: inline-block;
	margin-top: 2rem;
	padding: .95rem 2.25rem;
	border: 1px solid rgba(255, 255, 255, .85);
	color: #fff;
	font-size: .72rem;
	font-weight: 400;
	letter-spacing: .3em;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: none;
	transition: background-color .3s, color .3s;
}
.hero__button:hover,
.hero__button:focus-visible {
	background: #fff;
	color: var(--la-ink);
}

/* Controls -------------------------------------------------------------- */

.hero button {
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	cursor: pointer;
}
.hero button:focus-visible,
.hero__button:focus-visible {
	outline: 1px solid #fff;
	outline-offset: 4px;
}
.hero svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.2;
}

.hero__arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 3rem;
	height: 3rem;
	margin-top: -1.5rem;
	opacity: .7;
	transition: opacity .2s;
}
.hero__arrow:hover { opacity: 1; }
.hero__arrow--prev { left: clamp(.5rem, 2vw, 2rem); }
.hero__arrow--next { right: clamp(.5rem, 2vw, 2rem); }

.hero__bar {
	position: absolute;
	right: clamp(1.25rem, 4vw, 3rem);
	bottom: 2rem;
	left: clamp(1.25rem, 4vw, 3rem);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero__dots { display: flex; gap: .75rem; }

.hero__dot {
	position: relative;
	width: 2.5rem;
	height: 1.5rem; /* bigger tap target than the visible line */
}
.hero__dot::before {
	content: "";
	position: absolute;
	inset: 50% 0 auto;
	height: 1px;
	background: rgba(255, 255, 255, .45);
	transition: background-color .3s, height .3s;
}
.hero__dot[aria-current="true"]::before {
	height: 2px;
	background: #fff;
}

.hero__pause {
	position: absolute;
	right: 0;
	width: 1.75rem;
	height: 1.75rem;
	padding: .3rem !important;
	opacity: .7;
}
.hero__pause:hover { opacity: 1; }
.hero__pause .icon-play { display: none; }
.hero__pause[aria-pressed="true"] .icon-play { display: block; fill: currentColor; stroke: none; }
.hero__pause[aria-pressed="true"] .icon-pause { display: none; }

@media (max-width: 767px) {
	.hero__arrow { display: none; } /* swipe instead */
	.hero__slide { padding-bottom: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
	.hero { --hero-fade: .01s; }
	.hero__slide.is-active .hero__img { animation: none !important; }
	.hero__content > * { transition: none !important; }
}