/**
 * Welcome hero (home page).
 *
 * The hero content sits over a slideshow of the deity photographs. The
 * slides are plain divs with a background-image, crossfaded by
 * assets/js/welcome-hero.js; with JavaScript off the first slide simply
 * stays put, so the section always shows something.
 *
 * TO ADD A PICTURE: add one more line to the slides list in the markup:
 *
 *   <div class="welcome-hero__slide"
 *        style="background-image:url(../wp-content/uploads/2024/06/8.jpg)"></div>
 *
 * Nothing here or in the script needs changing - the timing and the dots
 * adapt to however many slides are present.
 *
 * Roboto Slab and Montserrat are already loaded by the page, and #ed9321 is
 * the accent used elsewhere on the site.
 */

.welcome-hero {
	--wh-accent: #ed9321;
	--wh-text: #ffffff;
	--wh-muted: rgba(255, 255, 255, 0.84);

	/* Full-bleed: escape the 1240px container this sits inside. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);

	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	min-height: clamp(28rem, 60vh, 42rem);
	background-color: #16202a;
	font-family: "Montserrat", sans-serif;
}

/*
 * The breakout measures 100vw, which includes the scrollbar where the
 * platform reserves space for it. Clip rather than hidden, so position:sticky
 * elsewhere on the page keeps working.
 */
body {
	overflow-x: clip;
}

/* ---- slideshow ---- */

/*
 * On desktop the media is the backdrop, filling the section behind the text.
 * Below 880px it becomes a band of its own above the text - see the media
 * query at the foot of this file.
 */
.welcome-hero__media {
	position: absolute;
	inset: 0;
	/* clips the entrance scale on the picture layer */
	overflow: hidden;
}

.welcome-hero__slides {
	position: absolute;
	inset: 0;
}

.welcome-hero__slide {
	position: absolute;
	inset: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0;
	transition: opacity 1.2s ease-in-out;
}

.welcome-hero__slide.is-active {
	opacity: 1;
}

/* Without JavaScript nothing gets is-active, so show the first slide. */
.welcome-hero__slides:not(.is-ready) .welcome-hero__slide:first-child {
	opacity: 1;
}

/* Darkens the photograph so the text holds contrast, heaviest at the left. */
.welcome-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to right,
		rgba(12, 18, 26, 0.94) 0%,
		rgba(12, 18, 26, 0.84) 40%,
		rgba(12, 18, 26, 0.55) 66%,
		rgba(12, 18, 26, 0.38) 100%
	);
}

.welcome-hero__inner {
	position: relative; /* above the scrim */
	z-index: 2;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 4rem 1.25rem;
}

.welcome-hero__content {
	max-width: 44rem;
}

/* ---- content ---- */

.welcome-hero__eyebrow {
	margin: 0 0 0.75rem;
	color: var(--wh-accent);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

.welcome-hero__title {
	margin: 0 0 0.5rem;
	color: var(--wh-text);
	font-family: "Roboto Slab", Georgia, serif;
	font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4rem);
	font-weight: 400;
	line-height: 1.1;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.welcome-hero__subtitle {
	margin: 0 0 1.5rem;
	color: var(--wh-muted);
	font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
	font-weight: 500;
	letter-spacing: 0.02em;
}

.welcome-hero__lead {
	margin: 0 0 2.25rem;
	max-width: 34rem;
	color: var(--wh-muted);
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
	line-height: 1.7;
}

/* ---- calls to action ---- */

.welcome-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
}

.welcome-hero__btn {
	display: inline-block;
	/*
	 * Fixed width, so the buttons are the same size on every screen rather
	 * than stretching on small ones. Wide enough for "Plan Your Visit" at
	 * this size, and applied to both so they match when side by side. If the
	 * label gets longer, raise this rather than letting the button size to
	 * its text.
	 */
	width: 13rem;
	padding: 0.85rem 1rem;
	border-radius: 999px;
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: transform 0.15s ease, background-color 0.15s ease,
		border-color 0.15s ease;
}

.welcome-hero__btn--primary {
	background: var(--wh-accent);
	border: 2px solid var(--wh-accent);
	color: #24352b;
}

.welcome-hero__btn--primary:hover,
.welcome-hero__btn--primary:focus {
	background: #f7a63c;
	border-color: #f7a63c;
	color: #24352b;
	transform: translateY(-1px);
}

.welcome-hero__btn--ghost {
	background: rgba(255, 255, 255, 0.08);
	border: 2px solid rgba(255, 255, 255, 0.6);
	color: var(--wh-text);
}

.welcome-hero__btn--ghost:hover,
.welcome-hero__btn--ghost:focus {
	background: rgba(255, 255, 255, 0.18);
	border-color: #ffffff;
	color: var(--wh-text);
	transform: translateY(-1px);
}

/* ---- slide dots ---- */

.welcome-hero__dots {
	position: absolute;
	right: 1.75rem;
	bottom: 1.5rem;
	/* above the scrim, which is z-index 1 */
	z-index: 3;
	display: flex;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.welcome-hero__dot {
	width: 0.7rem;
	height: 0.7rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	transition: background-color 0.2s ease, width 0.2s ease;
}

.welcome-hero__dot:hover,
.welcome-hero__dot:focus-visible {
	background: rgba(255, 255, 255, 0.8);
}

.welcome-hero__dot[aria-current="true"] {
	width: 1.6rem;
	background: var(--wh-accent);
}

/*
 * Below 880px the text stops sitting on top of the picture.
 *
 * The deities are centred in frame and the photographs are bright, so an
 * overlay at phone width meant putting words across Their faces and then
 * darkening Them to keep the words readable. Instead the picture gets a
 * clean band of its own and the text sits underneath it.
 */
@media (max-width: 880px) {
	.welcome-hero {
		display: block;
		min-height: 0;
		background: #0c121a;
	}

	.welcome-hero__media {
		position: relative;
		inset: auto;
		width: 100%;
		/* Wide enough to keep both deities in frame once cover crops the sides. */
		aspect-ratio: 16 / 10;
	}

	/* No scrim: nothing is written over the picture now. */
	.welcome-hero::before {
		display: none;
	}

	.welcome-hero__inner {
		padding: 2.25rem 1.25rem 2.5rem;
	}

	.welcome-hero__content {
		max-width: none;
	}

	/* Sit the dots on the picture itself rather than the section. */
	.welcome-hero__dots {
		right: 50%;
		bottom: 0.85rem;
		transform: translateX(50%);
	}

	.welcome-hero__title {
		text-shadow: none;
	}
}

@media (max-width: 600px) {
	.welcome-hero__media {
		/*
		 * Taller than the desktop band so the deities are not a thin strip,
		 * but not so tall that cover crops in past Them: 3/2 keeps the middle
		 * 65% of the frame, and Radha's edge sits at about 78%.
		 */
		aspect-ratio: 3 / 2;
	}

	.welcome-hero__eyebrow {
		letter-spacing: 0.2em;
	}

}

/* ---- entrance ---- */

/*
 * The picture settles first, then the words rise into place behind it. Each
 * line is offset a little from the one before so the block arrives as a
 * sequence rather than all at once.
 *
 * animation-fill-mode is "both", so everything holds its opening state until
 * its turn comes; nothing flashes into view before the animation starts.
 */
@keyframes welcome-hero-media-in {
	from {
		opacity: 0;
		transform: scale(1.04);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes welcome-hero-rise {
	from {
		opacity: 0;
		transform: translateY(1.15rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/*
 * The scale sits on the picture layer, not on __media. A transform on
 * __media would make it a stacking context, trapping the dots' z-index
 * inside it and letting the scrim paint over them.
 */
.welcome-hero__slides {
	animation: welcome-hero-media-in 1s ease-out both;
}

.welcome-hero__eyebrow,
.welcome-hero__title,
.welcome-hero__subtitle,
.welcome-hero__lead,
.welcome-hero__actions,
.welcome-hero__dots {
	animation: welcome-hero-rise 0.55s ease-out both;
}

.welcome-hero__eyebrow {
	animation-delay: 0.65s;
}
.welcome-hero__title {
	animation-delay: 0.77s;
}
.welcome-hero__subtitle {
	animation-delay: 0.89s;
}
.welcome-hero__lead {
	animation-delay: 1.01s;
}
.welcome-hero__actions {
	animation-delay: 1.13s;
}
.welcome-hero__dots {
	animation-delay: 1.3s;
}

/*
 * The dots are centred with a transform, which the rise animation would
 * overwrite, so they get their own keyframes that keep the centring.
 */
@media (max-width: 880px) {
	@keyframes welcome-hero-rise-centred {
		from {
			opacity: 0;
			transform: translateX(50%) translateY(1.15rem);
		}
		to {
			opacity: 1;
			transform: translateX(50%) translateY(0);
		}
	}

	.welcome-hero__dots {
		animation-name: welcome-hero-rise-centred;
	}
}

/* ---- resting state ---- */

/*
 * After a few seconds without interaction the words fade out altogether and
 * the scrim thins, leaving the photograph alone. Any movement, key press,
 * scroll or focus brings the text straight back - see
 * assets/js/welcome-hero.js.
 *
 * Opacity rather than visibility or display, so the text stays in the
 * document: screen readers still reach it, and focusin fires and wakes the
 * hero if someone tabs to a button while it is hidden.
 *
 * Desktop only: below 880px the text sits under the picture rather than on
 * it, so there is nothing to get out of the way.
 */
@media (min-width: 881px) {
	.welcome-hero__inner,
	.welcome-hero::before {
		transition: opacity 0.9s ease;
	}

	.welcome-hero.is-resting .welcome-hero__inner {
		opacity: 0;
	}

	.welcome-hero.is-resting::before {
		opacity: 0.4;
	}
}

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

	/* Leave the hero as it is; no fading in or out. */
	.welcome-hero.is-resting .welcome-hero__inner,
	.welcome-hero.is-resting::before {
		opacity: 1;
		transition: none;
	}

	/* Show everything in place, with no movement. */
	.welcome-hero__slides,
	.welcome-hero__eyebrow,
	.welcome-hero__title,
	.welcome-hero__subtitle,
	.welcome-hero__lead,
	.welcome-hero__actions,
	.welcome-hero__dots {
		animation: none;
	}
}