/* ========================================
   Home2 — page-level scroll container
   ========================================
   Body locks page scroll; main.home2 is the only scrollable surface.
   Footer lives outside the snap container, accessed by scrolling past
   the last snap-section. CSS scroll-snap on touch + reduced-motion;
   home2-scroll.js drives the eased custom scroller on desktop.
*/

html:has(body.home2) {
	overflow: hidden;
	height: 100vh;
}

body.home2 {
	background: #18140f;
	color: #f2ede6;
	overflow: hidden;
	height: 100vh;
	margin: 0;
}

body.home2 .wp-site-blocks {
	background: transparent;
}

body.home2 main.home2 {
	overflow-y: auto;
	height: 100vh;
	max-height: 100vh;
	margin-top: 0 !important;
	margin-block-start: 0 !important;
	-webkit-overflow-scrolling: touch;
}

@media (hover: none) and (pointer: coarse) {
	body.home2 main.home2 {
		scroll-snap-type: y proximity;
		scroll-behavior: smooth;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.home2 main.home2 {
		scroll-snap-type: y proximity;
		scroll-behavior: auto;
	}
}

/* Footer sits outside the snap container. Cancel default block top-margin. */
body.home2 main.home2 > * {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}


/* Each Home2 section occupies a full viewport and snaps to its start edge. */
.home2-section {
	min-height: 100vh;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	padding: clamp(4rem, 8vh, 6rem) clamp(1.5rem, 5vw, 4rem);
	box-sizing: border-box;
	overflow: hidden;
}

/* ---------- Scroll-reveal — content starts invisible, fades in ---------- */
.home2-section > * {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.8s cubic-bezier(.2,.8,.2,1), transform 0.8s cubic-bezier(.2,.8,.2,1);
	transition-delay: 0.05s;
}

/* The hero video wrap itself should never fade in — it is the backdrop. */
.home2-section--hero > .home2-hero__video-wrap {
	opacity: 1;
	transform: none;
	transition: none;
}

.home2-section.is-visible > * {
	opacity: 1;
	transform: translateY(0);
}

/* Staggered reveal — subtle */
.home2-section.is-visible > *:nth-child(2) { transition-delay: 0.15s; }
.home2-section.is-visible > *:nth-child(3) { transition-delay: 0.25s; }
.home2-section.is-visible > *:nth-child(4) { transition-delay: 0.35s; }

@media (prefers-reduced-motion: reduce) {
	.home2-section > *,
	.home2-section.is-visible > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ---------- Explore section — full-bleed map with floating glass overlay ---------- */
.home2-section--map-overlay {
	padding: 0;
	position: relative;
}
.home2-section--map-overlay .wwh-geomapv {
	--wwh-geomapv-h: 100vh;
	width: 100%;
	margin: 0;
	position: relative;
}
.home2-section--map-overlay .wwh-geomapv__canvas {
	height: 100vh;
	border-radius: 0;
	box-shadow: none;
}

/* Heading + tagline — pinned top-center, frosted glass that fades to map */
.home2-section--map-overlay .home2-section__head {
	position: absolute;
	top: clamp(0.5rem, 2vh, 1.5rem);
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	width: min(820px, calc(100% - 1rem));
	padding: clamp(3rem, 8vh, 5rem) clamp(3rem, 8vw, 6rem);
	text-align: center;
	background:
		radial-gradient(ellipse 50% 50% at 50% 50%,
			rgba(255, 255, 255, 0.9) 0%,
			rgba(255, 255, 255, 0.78) 40%,
			rgba(255, 255, 255, 0.45) 65%,
			rgba(255, 255, 255, 0.18) 82%,
			rgba(255, 255, 255, 0) 100%);
	-webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 0%, #000 55%, rgba(0, 0, 0, 0.55) 80%, transparent 100%);
	mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 0%, #000 55%, rgba(0, 0, 0, 0.55) 80%, transparent 100%);
	backdrop-filter: blur(10px) saturate(1.05);
	-webkit-backdrop-filter: blur(10px) saturate(1.05);
	pointer-events: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.home2-section--map-overlay .home2-section__head h2,
.home2-section--map-overlay .home2-section__head p {
	text-align: center;
}

/* Filter chips — bottom-center floating glass strip */
.home2-section--map-overlay .wwh-geomapv__chips {
	position: absolute;
	left: 50%;
	bottom: clamp(1.5rem, 4vh, 3rem);
	transform: translateX(-50%);
	z-index: 5;
	margin: 0;
	padding: 0.6rem 0.85rem;
	max-width: calc(100% - 3rem);
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(14px) saturate(1.05);
	-webkit-backdrop-filter: blur(14px) saturate(1.05);
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 999px;
	box-shadow: 0 4px 24px rgba(36, 24, 35, 0.08);
}

/* Attribution — float bottom-left (bottom-right is now the zoom controls) */
.home2-section--map-overlay .wwh-geomapv__attribution {
	position: absolute;
	left: 0.75rem;
	right: auto;
	bottom: 0.4rem;
	margin: 0;
	z-index: 5;
	background: rgba(255, 255, 255, 0.6);
	padding: 2px 6px;
	border-radius: 4px;
	text-align: left;
}

/* Fallback when backdrop-filter isn't supported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.home2-section--map-overlay .home2-section__head,
	.home2-section--map-overlay .wwh-geomapv__chips {
		background: rgba(255, 255, 255, 0.92);
	}
}

/* Mobile: tighter padding, chips horizontally scroll */
@media (max-width: 640px) {
	.home2-section--map-overlay .home2-section__head {
		padding: 1rem 1.1rem;
	}
	.home2-section--map-overlay .wwh-geomapv__chips {
		max-width: calc(100% - 1.5rem);
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}