/* Pattern: luxe/home-hero. Slides stack; hero.js adds .is-cycling and moves .is-active. */

.luxe-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	background: var(--wp--preset--color--night);
	color: var(--wp--preset--color--cream);
}

.luxe-hero .luxe-hero__slides {
	position: absolute;
	inset: 0;
	margin: 0;
}

/* Legibility gradient over the photos. */
.luxe-hero__slides::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(24 22 20 / 0.88), rgb(24 22 20 / 0.55) 44%, rgb(24 22 20 / 0.42) 82%, rgb(24 22 20 / 0.5));
	pointer-events: none;
}

.luxe-hero .luxe-hero__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	overflow: hidden;
	opacity: 0;
	transition: opacity 2400ms ease-in-out;
}

.luxe-hero .luxe-hero__slide:first-child,
.luxe-hero.is-cycling .luxe-hero__slide.is-active {
	opacity: 1;
}

.luxe-hero.is-cycling .luxe-hero__slide:not(.is-active) {
	opacity: 0;
}

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

/* Slow "Ken Burns" settle: each slide eases from a slight zoom while it's showing. */
.luxe-js .luxe-hero__slide img {
	transform: scale(1.07);
	transition: transform 9s var(--luxe-ease);
}

.luxe-js .luxe-hero.is-cycling .luxe-hero__slide.is-active img {
	transform: scale(1);
}

/* Headline, lead and buttons arrive in sequence. */
.luxe-js .luxe-hero__content > * {
	animation: luxe-rise 1300ms var(--luxe-ease) both;
}

.luxe-js .luxe-hero__content > :nth-child(1) { animation-delay: 200ms; }
.luxe-js .luxe-hero__content > :nth-child(2) { animation-delay: 380ms; }
.luxe-js .luxe-hero__content > :nth-child(3) { animation-delay: 560ms; }
.luxe-js .luxe-hero__content > :nth-child(4) { animation-delay: 740ms; }

/* Scroll cue: a thin line drawing downward at the bottom centre. */
.luxe-hero::after {
	content: "";
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: 0;
	width: 1px;
	height: 64px;
	background: linear-gradient(to bottom, transparent, rgb(246 244 241 / 0.8));
	transform-origin: top;
	animation: luxe-cue 2.8s var(--luxe-ease) infinite;
}

@keyframes luxe-cue {
	0% { transform: scaleY(0); opacity: 0; }
	40% { opacity: 1; }
	100% { transform: scaleY(1); opacity: 0; }
}

.luxe-hero__slide:nth-child(1) img { object-position: 62% center; }
.luxe-hero__slide:nth-child(2) img { object-position: center 42%; }
.luxe-hero__slide:nth-child(3) img { object-position: 68% 40%; }
.luxe-hero__slide:nth-child(4) img { object-position: 62% 45%; }

.luxe-hero .luxe-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
	padding: calc(var(--luxe-header-height) + 40px) var(--wp--style--root--padding-right) clamp(44px, 6vw, 76px) var(--wp--style--root--padding-left);
	box-sizing: content-box;
}

.luxe-hero__content > .luxe-kicker {
	font-size: 12.5px;
	letter-spacing: 0.28em;
	color: var(--wp--preset--color--accent-2);
	margin: 0;
}

.luxe-hero__content > .luxe-hero__title {
	color: var(--wp--preset--color--cream);
	max-width: 16ch;
	margin: 18px 0 0 -0.042em;
}

.luxe-hero__content > .luxe-hero__lead {
	font-size: 17px;
	line-height: 29px;
	max-width: 44ch;
	margin: 22px 0 0;
	color: rgb(246 244 241 / 0.92);
}

.luxe-hero__content > .luxe-actions {
	margin-top: 38px;
}

/* Slide selectors, created by hero.js. */
.luxe-hero__dots {
	position: absolute;
	z-index: 2;
	right: max(var(--wp--style--root--padding-right), calc((100% - var(--wp--style--global--wide-size)) / 2));
	bottom: clamp(44px, 6vw, 76px);
	display: flex;
	gap: 14px;
}

.luxe-hero__dot {
	display: flex;
	align-items: center;
	width: 34px;
	height: 22px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.luxe-hero__dot::before {
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	background: rgb(246 244 241 / 0.42);
	transition: background-color 400ms ease;
}

.luxe-hero__dot[aria-current="true"]::before {
	background: var(--wp--preset--color--cream);
}

/* Pause/play toggle: two bars while playing, a triangle when paused. */
.luxe-hero__toggle {
	position: relative;
	width: 22px;
	height: 22px;
	margin-left: 6px;
	padding: 0;
	border: 0;
	background: transparent;
	color: rgb(246 244 241 / 0.75);
	cursor: pointer;
}

.luxe-hero__toggle:hover {
	color: var(--wp--preset--color--cream);
}

.luxe-hero__toggle::before {
	content: "";
	position: absolute;
	inset: 6px 7px;
	border-left: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

.luxe-hero__toggle.is-paused::before {
	inset: 5px 6px 5px 8px;
	border: 0;
	border-left: 9px solid currentColor;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
}

@media (max-width: 781px) {
	.luxe-hero__dots {
		bottom: auto;
		top: calc(var(--luxe-header-height) + 12px);
	}
}