/**
 * Approved high-resolution Act 1 presentation.
 *
 * Every rule is gated by the runtime class so the existing semantic sections
 * remain the no-JavaScript and reduced-motion presentation.
 */

.has-act-one-highres .manali-strays-home {
	overflow: visible;
}

.has-act-one-highres .ms-act1-highres {
	position: relative;
	width: 100%;
	height: 2100vh;
	height: 2100svh;
	min-height: 2100vh;
	min-height: 2100svh;
	margin: 0;
	background: #171b16;
	isolation: isolate;
}

.has-act-one-highres .ms-act1-highres__viewport {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	background: #171b16;
	contain: paint;
}

.has-act-one-highres .ms-act1-highres__stage {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	background: #171b16;
	contain: paint;
}

.has-act-one-highres .ms-act1-highres__world {
	position: absolute;
	top: 0;
	left: 0;
	width: 13920px;
	height: 2160px;
	transform-origin: 0 0;
	will-change: transform;
	backface-visibility: hidden;
}

.has-act-one-highres .ms-act1-highres__tile {
	position: absolute;
	top: 0;
	width: 3840px;
	height: 2160px;
	display: block;
	user-select: none;
}

.has-act-one-highres .ms-act1-highres__tile > img {
	width: 100%;
	height: 100%;
	display: block;
}

.has-act-one-highres .ms-act1-highres__tile--a {
	left: 0;
}

.has-act-one-highres .ms-act1-highres__tile--b {
	left: 3360px;
	z-index: 2;
	filter: saturate(1.18) brightness(1.06) contrast(1.02);
	-webkit-mask-image: linear-gradient(to right, transparent 0, rgb(0 0 0 / 14%) 20px, rgb(0 0 0 / 42%) 58px, rgb(0 0 0 / 76%) 108px, #000 160px);
	mask-image: linear-gradient(to right, transparent 0, rgb(0 0 0 / 14%) 20px, rgb(0 0 0 / 42%) 58px, rgb(0 0 0 / 76%) 108px, #000 160px);
}

.has-act-one-highres .ms-act1-highres__tile--c {
	left: 6720px;
	z-index: 3;
	filter: saturate(1.18) brightness(1.06) contrast(1.02);
	-webkit-mask-image: linear-gradient(85.42deg, transparent 0, transparent 173px, rgb(0 0 0 / 14%) 193px, rgb(0 0 0 / 42%) 231px, rgb(0 0 0 / 76%) 281px, #000 333px);
	mask-image: linear-gradient(85.42deg, transparent 0, transparent 173px, rgb(0 0 0 / 14%) 193px, rgb(0 0 0 / 42%) 231px, rgb(0 0 0 / 76%) 281px, #000 333px);
}

.has-act-one-highres .ms-act1-highres__tile--d {
	left: 10080px;
	z-index: 4;
	filter: saturate(1.18) brightness(1.06) contrast(1.02);
	-webkit-mask-image: linear-gradient(to right, transparent 0, rgb(0 0 0 / 8%) 32px, rgb(0 0 0 / 30%) 80px, rgb(0 0 0 / 64%) 142px, rgb(0 0 0 / 90%) 224px, #000 280px);
	mask-image: linear-gradient(to right, transparent 0, rgb(0 0 0 / 8%) 32px, rgb(0 0 0 / 30%) 80px, rgb(0 0 0 / 64%) 142px, rgb(0 0 0 / 90%) 224px, #000 280px);
}

.has-act-one-highres .ms-act1-highres__post-cave-depth {
	position: absolute;
	left: 2660px;
	top: 650px;
	width: 1000px;
	height: auto;
	z-index: 6;
	display: block;
	pointer-events: none;
	filter: saturate(.88) brightness(.78) contrast(.98);
	-webkit-mask-image: url("../images/act1/overlays/act1-post-cave-depth-pines-v01.png");
	-webkit-mask-image: -webkit-image-set(url("../images/act1/overlays/act1-post-cave-depth-pines-v01.webp") 1x, url("../images/act1/overlays/act1-post-cave-depth-pines-v01.png") 1x);
	mask-image: url("../images/act1/overlays/act1-post-cave-depth-pines-v01.png");
	mask-image: image-set(url("../images/act1/overlays/act1-post-cave-depth-pines-v01.webp") type("image/webp"), url("../images/act1/overlays/act1-post-cave-depth-pines-v01.png") type("image/png"));
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.has-act-one-highres .ms-act1-highres__post-cave-depth > img {
	width: 100%;
	height: auto;
	display: block;
}

.has-act-one-highres .ms-act1-highres__w3-terrain-repair {
	position: absolute;
	left: 3920px;
	top: 820px;
	width: 1250px;
	height: 1200px;
	z-index: 5;
	overflow: hidden;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, rgb(0 0 0 / 24%) 28px, rgb(0 0 0 / 72%) 64px, #000 92px);
	mask-image: linear-gradient(to bottom, transparent 0, rgb(0 0 0 / 24%) 28px, rgb(0 0 0 / 72%) 64px, #000 92px);
}

.has-act-one-highres .ms-act1-highres__w3-clean-terrain {
	position: absolute;
	left: 0;
	top: 80px;
	width: 1250px;
	height: 1120px;
	display: block;
	pointer-events: none;
	filter: saturate(1.18) brightness(1.06) contrast(1.02);
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 160px, #000 calc(100% - 80px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 160px, #000 calc(100% - 80px), transparent 100%);
}

.has-act-one-highres .ms-act1-highres__w3-clean-terrain > img {
	width: 1250px;
	height: 1120px;
	display: block;
}

.has-act-one-highres .ms-act1-highres__w3-party {
	position: absolute;
	left: 3875px;
	top: 1146px;
	width: 1371px;
	height: auto;
	z-index: 7;
	display: block;
	pointer-events: none;
	filter: saturate(.82) brightness(.85) contrast(.99);
}

.has-act-one-highres .ms-act1-highres__w3-party > img {
	width: 100%;
	height: auto;
	display: block;
}

.has-act-one-highres .ms-act1-highres__narrative {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

.has-act-one-highres .ms-act1-highres__semantic-scene {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	background: transparent !important;
}

.has-act-one-highres .ms-act1-highres__semantic-scene::before,
.has-act-one-highres .ms-act1-highres__semantic-scene::after,
.has-act-one-highres .ms-act1-highres__semantic-scene > .wp-block-cover__background {
	display: none !important;
	content: none !important;
}

.has-act-one-highres .ms-act1-highres__semantic-scene :is(.ms-historical-art, .ms-horizontal-story__note) {
	display: none !important;
}

.has-act-one-highres .ms-act1-highres__semantic-scene :is(.ms-scene__intro, .ms-horizontal-story__track)::before,
.has-act-one-highres .ms-act1-highres__semantic-scene :is(.ms-horizontal-story__stage, .ms-horizontal-story__track)::after {
	display: none !important;
	content: none !important;
}

.has-act-one-highres .ms-act1-highres__semantic-scene :is(.ms-scene__frame, .ms-scene__intro, .ms-horizontal-story, .ms-horizontal-story__stage, .ms-horizontal-story__track, .wp-block-cover__inner-container) {
	position: static;
	width: auto;
	height: auto;
	min-height: 0;
	max-width: none;
	margin: 0;
	padding: 0;
	display: block;
	transform: none;
	overflow: visible !important;
	background: transparent;
}

/* The high-resolution journey owns Act 1 copy timing. Keep any legacy
   WordPress reveal wrappers visible so only the journey-level opacity is
   applied; later homepage reveals remain untouched. */
.has-act-one-highres .ms-act1-highres__copy .ms-reveal:not(.ms-act1-highres__copy) {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

.has-act-one-highres .ms-act1-highres__copy {
	--ms-act1-copy-opacity: 0;
	--ms-act1-copy-offset: 14px;
	position: absolute !important;
	top: 12vh;
	left: 8vw;
	width: 35vw;
	max-width: none;
	margin: 0 !important;
	padding: 0 !important;
	color: #f8f2e5;
	opacity: var(--ms-act1-copy-opacity) !important;
	transform: translate3d(0, var(--ms-act1-copy-offset), 0) !important;
	text-shadow: 0 1px 1px rgb(8 14 11 / 68%), 0 .3rem 1.5rem rgb(8 14 11 / 45%);
}

/* Origins, Relationship and World Changes are themselves WordPress sections.
   Reset the full-viewport semantic-scene box before using each as copy. */
.has-act-one-highres .ms-act1-highres__semantic-scene.ms-act1-highres__copy {
	inset: 12vh auto auto 8vw !important;
	display: block !important;
	width: 35vw !important;
	height: auto !important;
}

.has-act-one-highres .ms-act1-highres__semantic-scene.ms-act1-highres__copy--origins {
	top: 14vh !important;
}

.has-act-one-highres .ms-act1-highres__semantic-scene.ms-act1-highres__copy--relationship {
	width: 31vw !important;
}

.has-act-one-highres .ms-scene__intro.ms-act1-highres__copy--intertwined {
	width: 41vw !important;
}

.has-act-one-highres .ms-act1-highres__copy :is(.ms-eyebrow, .ms-scroll-cue) {
	display: none !important;
}

.has-act-one-highres .ms-act1-highres__copy :is(h1, h2, h3, p) {
	margin-block-start: 0;
	color: currentColor;
}

.has-act-one-highres .ms-act1-highres__copy :is(h1, h2) {
	max-width: 12ch;
	margin-bottom: .8vw;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 3.4vw;
	font-weight: 700;
	letter-spacing: -.05em;
	line-height: .97;
	text-wrap: balance;
}

.has-act-one-highres .ms-act1-highres__copy h2 {
	font-size: 2.7vw;
}

.has-act-one-highres .ms-act1-highres__copy .ms-fragments {
	margin: 1vw 0 .8vw;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.6vw;
	font-weight: 700;
	letter-spacing: -.025em;
	line-height: 1.12;
}

.has-act-one-highres .ms-act1-highres__copy .ms-copy {
	max-width: 34ch;
	margin-bottom: 0;
	font-size: 1vw;
	line-height: 1.45;
}

.has-act-one-highres .ms-act1-highres__copy--origins {
	top: 14vh !important;
}

.has-act-one-highres .ms-act1-highres__copy--relationship {
	width: 31vw !important;
}

.has-act-one-highres .ms-act1-highres__copy--intertwined {
	width: 41vw;
}

.has-act-one-highres .ms-act1-highres__copy--milestone {
	display: block !important;
	width: 27vw !important;
	min-height: 0 !important;
	justify-content: initial !important;
	border: 0 !important;
	background: transparent !important;
}

.has-act-one-highres .ms-horizontal-story--history .ms-act1-highres__copy--milestone:nth-child(n) {
	background: transparent !important;
	background-image: none !important;
}

.has-act-one-highres .ms-act1-highres__copy--milestone::before,
.has-act-one-highres .ms-act1-highres__copy--milestone::after {
	display: none !important;
	content: none !important;
}

.has-act-one-highres .ms-act1-highres__copy--milestone h3 {
	margin-bottom: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 2.8vw;
	font-weight: 700;
	letter-spacing: -.055em;
	line-height: .95;
}

.has-act-one-highres .ms-act1-highres__copy--world-changes .ms-fragments {
	margin-top: .8vw;
}

.has-act-one-highres .ms-act1-highres__status {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.admin-bar.has-act-one-highres .ms-act1-highres__viewport {
	top: 32px;
	height: calc(100svh - 32px);
}

@media (max-width: 899px) and (orientation: portrait) {
	.has-act-one-highres .ms-act1-highres__stage {
		bottom: auto;
		height: 62vh;
		height: 62svh;
	}

	.has-act-one-highres .ms-act1-highres__narrative::before {
		position: absolute;
		inset: 62svh 0 0;
		border-top: 1px solid rgb(245 240 229 / 12%);
		background: linear-gradient(180deg, #121a14 0, #101712 28%, #0c120e 100%);
		content: "";
	}

	.has-act-one-highres .ms-act1-highres__semantic-scene.ms-act1-highres__copy,
	.has-act-one-highres .ms-scene__intro.ms-act1-highres__copy--intertwined,
	.has-act-one-highres .ms-act1-highres__copy,
	.has-act-one-highres .ms-act1-highres__copy--origins,
	.has-act-one-highres .ms-act1-highres__copy--relationship,
	.has-act-one-highres .ms-act1-highres__copy--intertwined,
	.has-act-one-highres .ms-act1-highres__copy--milestone,
	.has-act-one-highres .ms-act1-highres__copy--world-changes {
		inset: 62svh 0 0 !important;
		display: flex !important;
		width: 100% !important;
		max-width: none;
		min-height: 0 !important;
		padding: clamp(1.1rem, 4.6vw, 1.75rem) max(1.2rem, 6vw) max(1rem, env(safe-area-inset-bottom)) !important;
		flex-direction: column;
		justify-content: center;
		text-shadow: none;
	}

	.has-act-one-highres .ms-act1-highres__copy :is(h1, h2) {
		max-width: 15ch;
		margin-bottom: .55rem;
		font-size: clamp(2rem, 9.3vw, 3.8rem);
		line-height: .96;
	}

	.has-act-one-highres .ms-act1-highres__copy h2 {
		font-size: clamp(1.85rem, 8.3vw, 3.25rem);
	}

	.has-act-one-highres .ms-act1-highres__copy--milestone h3 {
		font-size: clamp(2.2rem, 10vw, 4rem);
	}

	.has-act-one-highres .ms-act1-highres__copy .ms-fragments {
		margin: .45rem 0 .4rem;
		font-size: clamp(1.1rem, 4.8vw, 1.55rem);
		line-height: 1.06;
	}

	.has-act-one-highres .ms-act1-highres__copy .ms-copy {
		max-width: 42ch;
		font-size: clamp(.78rem, 3.25vw, 1rem);
		line-height: 1.34;
	}
}

@media (max-width: 899px) and (orientation: landscape) {
	.has-act-one-highres .ms-act1-highres__semantic-scene.ms-act1-highres__copy,
	.has-act-one-highres .ms-scene__intro.ms-act1-highres__copy--intertwined,
	.has-act-one-highres .ms-act1-highres__copy,
	.has-act-one-highres .ms-act1-highres__copy--relationship,
	.has-act-one-highres .ms-act1-highres__copy--intertwined,
	.has-act-one-highres .ms-act1-highres__copy--milestone,
	.has-act-one-highres .ms-act1-highres__copy--world-changes {
		top: 9vh !important;
		left: 6vw !important;
		width: 43vw;
	}

	.has-act-one-highres .ms-act1-highres__copy :is(h1, h2) {
		font-size: clamp(1.75rem, 7vh, 3.25rem);
	}

	.has-act-one-highres .ms-act1-highres__copy h2 {
		font-size: clamp(1.55rem, 6vh, 2.8rem);
	}

	.has-act-one-highres .ms-act1-highres__copy--milestone h3 {
		font-size: clamp(1.75rem, 7vh, 3rem);
	}

	.has-act-one-highres .ms-act1-highres__copy .ms-fragments {
		font-size: clamp(1rem, 3.8vh, 1.45rem);
	}

	.has-act-one-highres .ms-act1-highres__copy .ms-copy {
		font-size: clamp(.72rem, 2.8vh, .95rem);
	}
}

@media screen and (max-width: 782px) {
	.admin-bar.has-act-one-highres .ms-act1-highres__viewport {
		top: 46px;
		height: calc(100svh - 46px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.has-act-one-highres .ms-act1-highres__world,
	.has-act-one-highres .ms-act1-highres__copy {
		transition: none !important;
	}
}