/**
 * Immersive homepage presentation.
 *
 * Content is deliberately complete before this file or its companion script
 * loads. Motion-only rules are gated behind .has-immersive-motion, which the
 * script adds only after feature and reduced-motion checks.
 */

:root {
	--ms-night: var(--wp--preset--color--night, #111210);
	--ms-charcoal: var(--wp--preset--color--charcoal, #22231f);
	--ms-stone: var(--wp--preset--color--stone, #79766e);
	--ms-earth: var(--wp--preset--color--earth, #796657);
	--ms-ochre: var(--wp--preset--color--ochre, #b47734);
	--ms-mist: var(--wp--preset--color--mist, #d8d4cb);
	--ms-warm-white: var(--wp--preset--color--warm-white, #f4f0e8);
	--ms-line: color-mix(in srgb, currentColor 18%, transparent);
	--ms-header-height: 5.25rem;
}

.manali-strays-home {
	background: var(--ms-warm-white);
}

.manali-strays-home :where(a) {
	text-underline-offset: 0.18em;
}

.manali-strays-home :where(a:focus-visible),
.manali-strays-site-header :where(a:focus-visible) {
	outline: 3px solid var(--ms-ochre);
	outline-offset: 4px;
}

.manali-strays-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	padding: 0.75rem 0;
	color: var(--ms-charcoal);
	background: color-mix(in srgb, var(--ms-warm-white) 96%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--ms-charcoal) 12%, transparent);
	transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, padding 180ms ease;
}

.manali-strays-site-header :where(a) {
	color: inherit;
}

.manali-strays-site-header__inner {
	gap: 1rem;
}

.manali-strays-site-header__identity {
	flex: 0 0 auto;
	gap: 0.55rem;
}

.manali-strays-site-header__identity .wp-block-site-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--interface, sans-serif);
	font-size: 0.85rem;
	font-weight: 750;
	letter-spacing: 0.07em;
	line-height: 1;
	text-transform: uppercase;
}

.manali-strays-primary-navigation {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.manali-strays-primary-navigation .wp-block-navigation-item__content,
.manali-strays-vet-help,
.manali-strays-skip-story {
	font-family: var(--wp--preset--font-family--interface, sans-serif);
}

.manali-strays-site-header__actions {
	flex: 0 0 auto;
	gap: 0.75rem;
}

.manali-strays-vet-help,
.manali-strays-skip-story {
	margin: 0;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.045em;
	line-height: 1.3;
	text-transform: uppercase;
}

.manali-strays-vet-help a {
	text-decoration-color: var(--ms-ochre);
}

.manali-strays-support-button .wp-block-button__link {
	padding: 0.62rem 0.85rem;
	font-size: 0.68rem;
}

.manali-strays-skip-story {
	display: block;
	position: absolute;
	left: var(--wp--preset--spacing--50, 1.5rem);
	top: calc(100% + 0.5rem);
	padding: 0.38rem 0.55rem;
	color: var(--ms-charcoal);
	background: var(--ms-warm-white);
	border: 1px solid color-mix(in srgb, var(--ms-charcoal) 16%, transparent);
}

.manali-strays-site-header.is-home-ready {
	position: fixed;
	left: 0;
	right: 0;
	color: var(--ms-warm-white);
	background: transparent;
	border-color: transparent;
}

.manali-strays-site-header.is-home-ready .manali-strays-support-button .wp-block-button__link {
	color: var(--ms-night);
	background: var(--ms-warm-white);
}

.manali-strays-site-header.is-home-ready.is-scrolled {
	padding-block: 0.55rem;
	color: var(--ms-charcoal);
	background: color-mix(in srgb, var(--ms-warm-white) 94%, transparent);
	border-bottom-color: color-mix(in srgb, var(--ms-charcoal) 12%, transparent);
	backdrop-filter: blur(12px);
}

.manali-strays-site-header.is-home-ready.is-scrolled .manali-strays-support-button .wp-block-button__link {
	color: var(--ms-warm-white);
	background: var(--ms-charcoal);
}

.manali-strays-site-header.is-home-ready:not(.is-scrolled) .manali-strays-skip-story {
	color: var(--ms-warm-white);
	background: var(--ms-night);
	border-color: color-mix(in srgb, var(--ms-warm-white) 25%, transparent);
}

.ms-scene {
	--ms-reveal-x: 0px;
	--ms-reveal-y: -1.25rem;
	--ms-reveal-duration: 600ms;
	--ms-scene-distant-x: 0px;
	--ms-scene-distant-y: 0px;
	--ms-scene-middle-x: 0px;
	--ms-scene-middle-y: 0px;
	position: relative;
	margin-block-start: 0 !important;
	padding-block: clamp(6rem, 14vw, 13rem);
}

/*
 * Narrative-era and continuity classes are intentional editorial hooks, not
 * a second design system. Future approved media can carry a landmark from one
 * neighbouring scene into the next without changing the semantic page order.
 * The classes remain visual no-ops until real art direction calls for them.
 */
.ms-scene--illustrated,
.ms-scene--illustrated-to-reality,
.ms-scene--reality-threshold,
.ms-scene--documentary,
.ms-scene--expansive,
.ms-scene--future {
	position: relative;
}

.ms-continuity-anchor {
	position: relative;
}

/*
 * Direction metadata for the visual journey. Reveal offsets begin up and/or
 * left of their resting position, so every visible entrance resolves forward:
 * down, right, or down-right. These classes are block className values and
 * therefore survive Site Editor edits.
 */
.ms-direction--down {
	--ms-reveal-x: 0px;
	--ms-reveal-y: -1.25rem;
}

.ms-direction--right {
	--ms-reveal-x: -1.25rem;
	--ms-reveal-y: 0px;
}

.ms-direction--down-right {
	--ms-reveal-x: -1rem;
	--ms-reveal-y: -1rem;
}

/*
 * DEVELOPMENT-ONLY CAMERA PROTOTYPE
 *
 * The front-end script adds an aria-hidden stage around selected editable
 * scenes on capable desktop devices. The stage is deliberately made from
 * neutral CSS planes and labels, never stock imagery or final artwork. Its
 * larger-than-viewport layers make the scroll-driven camera path testable now
 * and can be replaced wholesale by approved final media later.
 */
.ms-camera-scene {
	--ms-camera-scroll-distance: 260svh;
	--ms-camera-stage-width: 190vw;
	--ms-camera-stage-height: 180svh;
	--ms-stage-base: #d8d4cb;
	--ms-stage-line: color-mix(in srgb, var(--ms-charcoal) 24%, transparent);
	--ms-stage-shade: color-mix(in srgb, var(--ms-charcoal) 20%, transparent);
	--ms-stage-foreground: color-mix(in srgb, var(--ms-earth) 42%, transparent);
	position: relative;
}

.ms-camera-scene--right {
	--ms-camera-scroll-distance: 230svh;
}

.ms-camera-scene--valley {
	--ms-camera-scroll-distance: 310svh;
	--ms-camera-stage-width: 204vw;
	--ms-camera-stage-height: 190svh;
}

.ms-camera-scene.ms-scene--relationship {
	--ms-stage-base: #e7e1d7;
	--ms-stage-shade: color-mix(in srgb, var(--ms-earth) 24%, transparent);
}

.ms-camera-scene.ms-scene--world {
	--ms-stage-base: #ccc7bc;
	--ms-stage-foreground: color-mix(in srgb, var(--ms-charcoal) 28%, transparent);
}

.ms-camera-scene.ms-scene--one-dog {
	--ms-stage-base: #c9c2b7;
	--ms-stage-shade: color-mix(in srgb, var(--ms-charcoal) 23%, transparent);
}

.ms-camera-scene.ms-scene--prevention {
	--ms-stage-base: color-mix(in srgb, var(--ms-earth) 88%, var(--ms-night));
	--ms-stage-line: color-mix(in srgb, var(--ms-warm-white) 30%, transparent);
	--ms-stage-shade: color-mix(in srgb, var(--ms-warm-white) 16%, transparent);
	--ms-stage-foreground: color-mix(in srgb, var(--ms-night) 36%, transparent);
}

.ms-camera-scene.ms-scene--map {
	--ms-stage-base: #c9c6bd;
	--ms-stage-shade: color-mix(in srgb, var(--ms-earth) 30%, transparent);
	--ms-stage-foreground: color-mix(in srgb, var(--ms-charcoal) 30%, transparent);
}

.ms-camera-scene.ms-scene--stories {
	--ms-stage-base: #e9e4da;
	--ms-stage-shade: color-mix(in srgb, var(--ms-earth) 18%, transparent);
}

.ms-camera-scene.ms-scene--next-chapter {
	--ms-stage-base: #ded8cd;
	--ms-stage-shade: color-mix(in srgb, var(--ms-charcoal) 16%, transparent);
	--ms-stage-foreground: color-mix(in srgb, var(--ms-charcoal) 24%, transparent);
}

.ms-camera-scene__viewport {
	position: relative;
}

.ms-camera-stage {
	display: none;
}

.ms-scene__frame {
	position: relative;
}

.ms-scene__frame--narrow {
	max-width: 53rem;
}

.ms-scene__frame--split {
	display: grid;
	align-items: center;
	gap: clamp(2.5rem, 8vw, 10rem);
	grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 1.1fr);
}

.ms-eyebrow {
	margin: 0 0 1.25rem;
	font-family: var(--wp--preset--font-family--interface, sans-serif);
	font-size: 0.7rem;
	font-weight: 750;
	letter-spacing: 0.14em;
	line-height: 1.3;
	text-transform: uppercase;
}

.ms-display,
.ms-statement {
	max-width: 16ch;
	margin-top: 0;
	letter-spacing: -0.045em;
}

.ms-display {
	max-width: 12ch;
	color: var(--ms-warm-white);
}

.ms-lede,
.ms-copy {
	max-width: 34rem;
}

.ms-lede {
	color: var(--ms-mist);
}

.ms-copy {
	font-size: clamp(1rem, 1.35vw, 1.17rem);
}

.ms-fragments {
	max-width: 26rem;
	line-height: 1.25;
}

.ms-emphasis {
	margin-top: clamp(2.5rem, 8vw, 7rem);
	font-family: var(--wp--preset--font-family--editorial, Georgia, serif);
	font-size: clamp(2.4rem, 5.6vw, 5.5rem);
	line-height: 0.94;
}

.ms-scene--origins {
	padding-block: 0;
	color: var(--ms-warm-white);
	isolation: isolate;
	overflow: hidden;
}

.ms-scene--origins::before,
.ms-scene--origins::after {
	position: absolute;
	inset: auto -10% -2rem;
	z-index: -1;
	display: block;
	height: 46%;
	background: #1e211e;
	clip-path: polygon(0 70%, 9% 55%, 17% 67%, 30% 28%, 42% 57%, 55% 17%, 66% 54%, 75% 35%, 85% 65%, 100% 42%, 100% 100%, 0 100%);
	content: "";
}

.ms-scene--origins::before {
	transform: translate3d(var(--ms-scene-distant-x), var(--ms-scene-distant-y), 0);
}

.ms-scene--origins::after {
	bottom: -6rem;
	height: 38%;
	background: #31352f;
	clip-path: polygon(0 58%, 15% 31%, 27% 67%, 41% 41%, 53% 70%, 68% 19%, 78% 61%, 91% 37%, 100% 59%, 100% 100%, 0 100%);
	transform: translate3d(var(--ms-scene-middle-x), var(--ms-scene-middle-y), 0);
}

.ms-scene--origins .wp-block-cover__inner-container {
	width: 100%;
	height: 100%;
}

.ms-scene__frame--origins {
	display: flex;
	min-height: 100svh;
	flex-direction: column;
	justify-content: center;
	padding-top: var(--ms-header-height);
}

.ms-media-placeholder {
	position: relative;
	display: grid;
	min-height: clamp(18rem, 45vw, 38rem);
	place-items: center;
	padding: clamp(1.5rem, 4vw, 3rem);
	color: var(--ms-warm-white);
	background: var(--ms-charcoal);
	border: 1px solid color-mix(in srgb, var(--ms-warm-white) 28%, transparent);
	overflow: hidden;
}

.ms-media-placeholder::before,
.ms-map-placeholder::before {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(135deg, transparent 48%, color-mix(in srgb, var(--ms-warm-white) 13%, transparent) 49%, transparent 50%), linear-gradient(45deg, transparent 48%, color-mix(in srgb, var(--ms-warm-white) 8%, transparent) 49%, transparent 50%);
	background-size: 3rem 3rem;
	content: "";
	pointer-events: none;
}

.ms-media-placeholder__label,
.ms-media-placeholder__note {
	position: relative;
	max-width: 30rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--interface, sans-serif);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.55;
	text-align: center;
	text-transform: uppercase;
}

.ms-media-placeholder__note {
	margin-top: 1rem;
	color: var(--ms-mist);
	font-size: 0.65rem;
	letter-spacing: 0.04em;
	text-transform: none;
}

.ms-media-placeholder--himalayas {
	position: absolute;
	inset: auto 0 clamp(3rem, 9vh, 7rem) auto;
	width: min(31rem, 48%);
	min-height: 11rem;
	background: color-mix(in srgb, var(--ms-night) 86%, var(--ms-earth));
	opacity: 0.82;
}

.ms-media-placeholder--himalayas .ms-media-placeholder__label {
	font-size: 0.61rem;
}

.ms-scroll-cue {
	margin-top: auto;
	margin-bottom: 1rem;
	font-family: var(--wp--preset--font-family--interface, sans-serif);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ms-scroll-cue a {
	color: var(--ms-warm-white);
}

/*
 * HISTORICAL OPENING PROTOTYPE
 *
 * These are original development illustrations made from CSS scenery and the
 * small local SVG silhouettes in assets/images/historical/. They establish a
 * reusable atmosphere / distant ridge / middle terrain / foreground-subject
 * stack for the first four scenes only. They are decorative; final approved
 * photography or bespoke illustration can replace the named layer assets
 * without changing the story markup or camera behaviour.
 */
.ms-scene--origins {
	background: #879ba3;
}

.ms-scene--origins > .wp-block-cover__background {
	background:
		radial-gradient(circle at 72% 19%, color-mix(in srgb, #f7f5ed 68%, transparent) 0 4%, transparent 22%),
		linear-gradient(180deg, #667f8c 0%, #a9bbc0 38%, #e5e5dc 67%, #aeb6b0 100%) !important;
	opacity: 1 !important;
}

.ms-scene--origins::before {
	bottom: -0.5rem;
	height: 59%;
	background:
		linear-gradient(145deg, transparent 0 30%, color-mix(in srgb, #edf0eb 82%, #aeb8ba) 30% 38%, transparent 38% 100%),
		linear-gradient(180deg, #c9d2d1 0%, #8f9e9c 100%);
	clip-path: polygon(0 69%, 9% 49%, 18% 62%, 29% 20%, 39% 55%, 52% 8%, 65% 56%, 74% 33%, 84% 65%, 100% 39%, 100% 100%, 0 100%);
	z-index: 0;
}

.ms-scene--origins::after {
	bottom: -4rem;
	height: 42%;
	background:
		linear-gradient(168deg, transparent 0 36%, color-mix(in srgb, #d7d7cd 45%, transparent) 36% 38%, transparent 38% 100%),
		linear-gradient(180deg, #58645f 0%, #26322e 100%);
	clip-path: polygon(0 57%, 15% 31%, 27% 67%, 41% 41%, 53% 70%, 68% 19%, 78% 61%, 91% 37%, 100% 59%, 100% 100%, 0 100%);
	z-index: 0;
}

.ms-scene--origins .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
}

.ms-scene--origins .ms-display {
	max-width: 16ch;
	font-size: clamp(3.75rem, 7vw, 7.3rem) !important;
}

.ms-scene__frame--origins {
	box-sizing: border-box;
}

.ms-historical-art {
	position: relative;
	margin: 0 !important;
	padding: 0 !important;
	border: 0;
	pointer-events: none;
}

.ms-historical-art--origins {
	position: absolute;
	right: clamp(1.25rem, 8vw, 9rem);
	bottom: clamp(3.5rem, 10vh, 7.5rem);
	width: min(23rem, 39vw);
	aspect-ratio: 360 / 170;
	background: url("../images/historical/wolf-silhouette.svg") center / contain no-repeat;
	filter: drop-shadow(0 1.1rem 1.1rem color-mix(in srgb, #18211e 34%, transparent));
	z-index: 1;
}

.ms-scene--relationship,
.ms-scene--world {
	isolation: isolate;
	overflow: hidden;
}

.ms-scene--relationship {
	color: #26302b;
	background:
		radial-gradient(circle at 82% 20%, color-mix(in srgb, #f1e9d7 70%, transparent) 0 3%, transparent 16%),
		linear-gradient(180deg, #aab8b6 0%, #d6d9cf 48%, #68766a 100%);
}

.ms-scene--relationship::before,
.ms-scene--world::before {
	position: absolute;
	inset: auto -8% 0;
	z-index: 0;
	display: block;
	height: 58%;
	background: #6c7c70;
	clip-path: polygon(0 68%, 11% 37%, 20% 61%, 31% 25%, 44% 57%, 55% 14%, 67% 55%, 79% 31%, 89% 61%, 100% 38%, 100% 100%, 0 100%);
	content: "";
}

.ms-scene--relationship::after,
.ms-scene--world::after {
	position: absolute;
	inset: auto -8% -5rem;
	z-index: 0;
	display: block;
	height: 41%;
	background: linear-gradient(180deg, #536154 0%, #303c34 100%);
	clip-path: polygon(0 65%, 12% 45%, 25% 66%, 39% 39%, 53% 68%, 67% 34%, 79% 60%, 91% 38%, 100% 57%, 100% 100%, 0 100%);
	content: "";
}

.ms-scene--relationship > .ms-scene__frame,
.ms-scene--world > .ms-scene__frame {
	z-index: 1;
}

.ms-scene--dog {
	color: #e9e5d8;
	background:
		radial-gradient(ellipse at 50% 0%, color-mix(in srgb, #70827b 38%, transparent) 0 20%, transparent 58%),
		linear-gradient(180deg, #35443e 0%, #202a25 82%);
}

.ms-scene--dog :where(h2, h3) {
	color: #f0ece1;
}

.ms-horizontal-story__track {
	position: relative;
	isolation: isolate;
	background:
		linear-gradient(180deg, color-mix(in srgb, #aebbb4 22%, transparent) 0%, transparent 44%),
		linear-gradient(180deg, #405047 0%, #1b2520 100%);
}

.ms-horizontal-story__track::before {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	background:
		url("../images/historical/shared-history-panorama.svg") center bottom / 100% 78% no-repeat,
		radial-gradient(ellipse at 50% 12%, color-mix(in srgb, #b4c0b6 22%, transparent) 0 21%, transparent 56%),
		linear-gradient(180deg, transparent 0 54%, color-mix(in srgb, #bfc8bf 18%, transparent) 54% 54.5%, transparent 54.5% 100%);
	content: "";
	pointer-events: none;
}

.ms-horizontal-story__panel {
	position: relative;
	z-index: 1;
	background: linear-gradient(180deg, color-mix(in srgb, #142019 8%, transparent) 0%, color-mix(in srgb, #142019 44%, transparent) 100%);
	border-top-color: color-mix(in srgb, #f0ece1 19%, transparent);
	transition: background-color 220ms ease;
}

.ms-horizontal-story__panel > * {
	position: relative;
	z-index: 1;
}

.ms-horizontal-story__panel:nth-child(2n),
.ms-horizontal-story__panel:nth-child(3n) {
	background: linear-gradient(180deg, color-mix(in srgb, #526650 13%, transparent) 0%, color-mix(in srgb, #142019 39%, transparent) 100%);
}

.ms-horizontal-story__panel--companion {
	background-color: color-mix(in srgb, #4a6159 22%, transparent);
}

.ms-horizontal-story__panel--guardian {
	background-color: color-mix(in srgb, #56664c 22%, transparent);
}

.ms-horizontal-story__panel--worker {
	background-color: color-mix(in srgb, #6c674e 27%, transparent);
}

.ms-horizontal-story__panel--hunter {
	background-color: color-mix(in srgb, #7b6248 24%, transparent);
}

.ms-horizontal-story__panel--herder {
	background-color: color-mix(in srgb, #79604a 29%, transparent);
}

.ms-horizontal-story__panel--friend {
	background-color: color-mix(in srgb, #67513e 33%, transparent);
}

.ms-scene--world {
	color: #263029;
	background:
		radial-gradient(circle at 72% 19%, color-mix(in srgb, #f1ddbb 42%, transparent) 0 3%, transparent 17%),
		linear-gradient(180deg, #a6b1a8 0%, #c5c5b5 42%, #6d765f 100%);
}

.ms-scene--world::before {
	height: 62%;
	background: linear-gradient(180deg, #819083 0%, #58675a 100%);
}

.ms-scene--world::after {
	bottom: -4rem;
	height: 47%;
	background: linear-gradient(180deg, #495640 0%, #222a24 100%);
}

.ms-historical-art--world {
	align-self: stretch;
	min-height: clamp(20rem, 40vw, 35rem);
	background:
		linear-gradient(180deg, transparent 0 48%, color-mix(in srgb, #1b2520 16%, transparent) 100%),
		url("../images/historical/settlement-route.svg?prototype=1") center bottom / 130% auto no-repeat;
	filter: drop-shadow(0 1.2rem 1.5rem color-mix(in srgb, #202721 22%, transparent));
}

.ms-scene--relationship {
	background: var(--ms-warm-white);
}

.ms-scene--dog {
	padding-bottom: clamp(4rem, 9vw, 8rem);
	color: var(--ms-warm-white);
	background: var(--ms-charcoal);
}

.ms-scene--dog :where(h2, h3) {
	color: var(--ms-warm-white);
}

.ms-scene__intro {
	margin-bottom: clamp(2rem, 7vw, 6rem);
}

.ms-horizontal-story {
	position: relative;
	margin: 0 !important;
}

.ms-horizontal-story__track {
	display: grid;
	gap: 0;
	grid-template-columns: 1fr;
}

.ms-horizontal-story__panel {
	display: flex;
	min-height: 60svh;
	flex-direction: column;
	justify-content: flex-end;
	padding: clamp(2rem, 6vw, 6rem);
	border-top: 1px solid color-mix(in srgb, var(--ms-warm-white) 22%, transparent);
	background: var(--ms-charcoal);
}

.ms-horizontal-story__panel:nth-child(2n) {
	background: #2d2e29;
}

.ms-horizontal-story__panel:nth-child(3n) {
	background: #393830;
}

.ms-horizontal-story__panel .ms-eyebrow {
	color: var(--ms-ochre);
}

.ms-horizontal-story__note {
	max-width: 38rem;
	margin: 1.5rem auto 0;
	color: var(--ms-mist);
	font-size: 0.78rem;
}

.ms-scene--world {
	background: var(--ms-mist);
}

.ms-media-placeholder--settlement,
.ms-media-placeholder--hospital {
	min-height: clamp(22rem, 44vw, 40rem);
	color: var(--ms-charcoal);
	background: var(--ms-stone);
}

.ms-media-placeholder--settlement {
	background: #8f8a80;
}

/* Historical-opening colour and panorama overrides follow the base scene rules. */
.ms-scene--relationship {
	color: #26302b;
	background:
		radial-gradient(circle at 82% 20%, color-mix(in srgb, #f1e9d7 70%, transparent) 0 3%, transparent 16%),
		linear-gradient(180deg, #aab8b6 0%, #d6d9cf 48%, #68766a 100%);
}

.ms-scene--dog {
	color: #e9e5d8;
	background:
		radial-gradient(ellipse at 50% 0%, color-mix(in srgb, #70827b 38%, transparent) 0 20%, transparent 58%),
		linear-gradient(180deg, #35443e 0%, #202a25 82%);
}

.ms-scene--dog :where(h2, h3) {
	color: #f0ece1;
}

.ms-horizontal-story__panel,
.ms-horizontal-story__panel:nth-child(2n),
.ms-horizontal-story__panel:nth-child(3n) {
	background:
		url("../images/historical/shared-history-panorama.svg") 0 bottom / 600% 78% no-repeat,
		linear-gradient(180deg, color-mix(in srgb, #142019 28%, transparent) 0%, transparent 58%);
}

.ms-horizontal-story__panel:nth-child(1) {
	background:
		url("../images/historical/shared-history-panorama.svg") 0 bottom / 600% 78% no-repeat,
		linear-gradient(180deg, color-mix(in srgb, #4a6159 37%, transparent) 0%, transparent 58%);
}

.ms-horizontal-story__panel:nth-child(2) {
	background:
		url("../images/historical/shared-history-panorama.svg") 20% bottom / 600% 78% no-repeat,
		linear-gradient(180deg, color-mix(in srgb, #56664c 39%, transparent) 0%, transparent 58%);
}

.ms-horizontal-story__panel:nth-child(3) {
	background:
		url("../images/historical/shared-history-panorama.svg") 40% bottom / 600% 78% no-repeat,
		linear-gradient(180deg, color-mix(in srgb, #6c674e 43%, transparent) 0%, transparent 58%);
}

.ms-horizontal-story__panel:nth-child(4) {
	background:
		url("../images/historical/shared-history-panorama.svg") 60% bottom / 600% 78% no-repeat,
		linear-gradient(180deg, color-mix(in srgb, #7b6248 41%, transparent) 0%, transparent 58%);
}

.ms-horizontal-story__panel:nth-child(5) {
	background:
		url("../images/historical/shared-history-panorama.svg") 80% bottom / 600% 78% no-repeat,
		linear-gradient(180deg, color-mix(in srgb, #79604a 46%, transparent) 0%, transparent 58%);
}

.ms-horizontal-story__panel:nth-child(6) {
	background:
		url("../images/historical/shared-history-panorama.svg") 100% bottom / 600% 78% no-repeat,
		linear-gradient(180deg, color-mix(in srgb, #67513e 50%, transparent) 0%, transparent 58%);
}

.ms-horizontal-story__track::before {
	background:
		radial-gradient(ellipse at 50% 12%, color-mix(in srgb, #b4c0b6 22%, transparent) 0 21%, transparent 56%),
		linear-gradient(180deg, transparent 0 54%, color-mix(in srgb, #bfc8bf 18%, transparent) 54% 54.5%, transparent 54.5% 100%);
}

.ms-horizontal-story__panel::before {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	background: url("../images/historical/shared-history-panorama.svg") 0 bottom / 600% 78% no-repeat;
	content: "";
	pointer-events: none;
}

.ms-horizontal-story__panel:nth-child(2)::before {
	background-position: 20% bottom;
}

.ms-horizontal-story__panel:nth-child(3)::before {
	background-position: 40% bottom;
}

.ms-horizontal-story__panel:nth-child(4)::before {
	background-position: 60% bottom;
}

.ms-horizontal-story__panel:nth-child(5)::before {
	background-position: 80% bottom;
}

.ms-horizontal-story__panel:nth-child(6)::before {
	background-position: 100% bottom;
}

/* A distinct first moment keeps the human–wolf threshold legible before time opens out. */
.ms-horizontal-story__panel--companion::after {
	position: absolute;
	right: 4vw;
	bottom: 14%;
	z-index: 0;
	display: block;
	width: min(27rem, 35vw);
	aspect-ratio: 360 / 170;
	background: url("../images/historical/wolf-silhouette.svg") center / contain no-repeat;
	content: "";
	opacity: 1;
	filter: brightness(1.7) contrast(0.82) drop-shadow(0 0.8rem 0.9rem color-mix(in srgb, #101712 28%, transparent));
}

.ms-scene--world {
	color: #263029;
	background:
		radial-gradient(circle at 72% 19%, color-mix(in srgb, #f1ddbb 42%, transparent) 0 3%, transparent 17%),
		linear-gradient(180deg, #a6b1a8 0%, #c5c5b5 42%, #6d765f 100%);
}

.ms-scene--street-dog {
	min-height: 125svh;
	color: var(--ms-warm-white);
	background: var(--ms-night);
}

.ms-scene--street-dog .ms-reveal {
	--ms-reveal-duration: 1100ms;
}

.ms-scene--street-dog .ms-fragments {
	transition-delay: 160ms;
}

.ms-scene--street-dog .ms-statement--final {
	transition-delay: 360ms;
}

.ms-scene--street-dog :where(h2, h3) {
	color: var(--ms-warm-white);
}

.ms-statement--final {
	max-width: 13ch;
	color: var(--ms-mist);
}

.ms-scene--one-dog {
	background: #d3cec4;
}

.ms-media-placeholder--rescue-photo {
	min-height: clamp(28rem, 59vw, 48rem);
	background: #514d46;
}

.ms-scene--rescue {
	background: var(--ms-warm-white);
}

/* Once the street-dog pause has landed, rescue becomes purposeful and faster. */
.ms-scene--rescue .ms-reveal {
	--ms-reveal-duration: 480ms;
}

.ms-rescue-sequence {
	margin-top: clamp(3rem, 8vw, 8rem);
	gap: 0;
}

.ms-rescue-stage {
	min-height: 18rem;
	padding: 1.4rem;
	border-top: 1px solid color-mix(in srgb, var(--ms-charcoal) 18%, transparent);
}

.ms-rescue-stage__number {
	margin: 0;
	color: var(--ms-ochre);
	font-family: var(--wp--preset--font-family--interface, sans-serif);
	font-size: 0.7rem;
	font-weight: 750;
	letter-spacing: 0.1em;
}

.ms-rescue-stage h3 {
	margin-top: auto;
	font-size: clamp(1.8rem, 3.6vw, 3.2rem);
}

.ms-rescue-stage p:last-child {
	font-size: 0.75rem;
}

.ms-rescue-stage:nth-child(2) {
	transition-delay: 70ms;
}

.ms-rescue-stage:nth-child(3) {
	transition-delay: 140ms;
}

.ms-rescue-stage:nth-child(4) {
	transition-delay: 210ms;
}

.ms-rescue-stage:nth-child(5) {
	transition-delay: 280ms;
}

.ms-scene--hospital {
	background: #e7e1d7;
}

/* Care is allowed to settle after the rescue sequence rather than becoming a CTA. */
.ms-scene--hospital .ms-reveal {
	--ms-reveal-duration: 760ms;
}

.ms-services,
.ms-facility-list {
	font-family: var(--wp--preset--font-family--interface, sans-serif);
	font-size: 0.72rem;
	font-weight: 750;
	letter-spacing: 0.1em;
	line-height: 1.9;
	text-transform: uppercase;
}

.ms-services--large {
	font-size: clamp(1.4rem, 3.2vw, 3rem);
	line-height: 1.2;
}

.ms-scene--prevention {
	color: var(--ms-warm-white);
	background: var(--ms-earth);
}

.ms-scene--prevention .ms-reveal {
	--ms-reveal-duration: 650ms;
}

.ms-scene--prevention :where(h2) {
	color: var(--ms-warm-white);
}

.ms-scene--map {
	background: #c9c6bd;
}

.ms-map-placeholder {
	position: relative;
	display: grid;
	min-height: clamp(23rem, 48vw, 42rem);
	place-items: center;
	padding: 2rem;
	background: #aaa89f;
	border: 1px solid color-mix(in srgb, var(--ms-charcoal) 18%, transparent);
	overflow: hidden;
}

.ms-map-placeholder .ms-media-placeholder__label {
	color: var(--ms-charcoal);
}

/*
 * The visual terrain and its eventual accessible content index are separate.
 * Do not put programme locations, marker coordinates, or story copy in JS;
 * both presentation paths must be populated from the same verified WordPress
 * content source when the explorer is designed.
 */
.ms-map-explorer {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2rem);
}

.ms-map-explorer__accessible-index {
	padding-top: clamp(1.25rem, 3vw, 2rem);
	border-top: 1px solid color-mix(in srgb, var(--ms-charcoal) 18%, transparent);
}

.ms-map-explorer__accessible-index > :last-child {
	margin-bottom: 0;
}

.ms-map-explorer__status {
	max-width: 36rem;
	margin-top: 1rem;
	font-family: var(--wp--preset--font-family--interface, sans-serif);
	font-size: 0.72rem;
	font-weight: 750;
	letter-spacing: 0.06em;
	line-height: 1.5;
	text-transform: uppercase;
}

.ms-scene--impact {
	color: var(--ms-warm-white);
	background: var(--ms-charcoal);
}

.ms-scene--impact :where(h2, h3) {
	color: var(--ms-warm-white);
}

.ms-impact-list {
	margin-top: clamp(3rem, 9vw, 9rem);
}

.ms-impact-stat {
	gap: 1rem;
	padding-block: clamp(2rem, 5vw, 4rem);
	border-top: 1px solid color-mix(in srgb, var(--ms-warm-white) 22%, transparent);
}

.ms-impact-stat__value {
	max-width: 12ch;
	margin: 0;
	font-family: var(--wp--preset--font-family--interface, sans-serif) !important;
	font-size: clamp(2rem, 6.6vw, 6.5rem) !important;
	font-weight: 700 !important;
	letter-spacing: -0.06em;
	line-height: 0.9 !important;
}

.ms-impact-stat__label {
	max-width: 20rem;
	margin: 0;
	color: var(--ms-mist);
	font-size: 0.78rem;
}

.ms-scene--stories {
	background: var(--ms-warm-white);
}

.ms-story-teasers {
	margin-top: clamp(3rem, 8vw, 8rem);
	gap: clamp(1.5rem, 3vw, 4rem);
}

.ms-story-teaser:nth-child(2) {
	margin-top: clamp(0rem, 7vw, 7rem);
}

.ms-story-teaser:nth-child(3) {
	margin-top: clamp(0rem, 2vw, 2rem);
}

.ms-media-placeholder--story {
	min-height: clamp(18rem, 28vw, 30rem);
	margin-bottom: 1.5rem;
	background: var(--ms-stone);
}

.ms-documentary-gallery__images {
	margin-top: clamp(2rem, 6vw, 6rem);
	gap: clamp(0.75rem, 2vw, 1.75rem);
}

.ms-media-placeholder--gallery {
	min-height: clamp(20rem, 34vw, 36rem);
	background: var(--ms-stone);
}

.ms-story-teaser h3 {
	margin-bottom: 0.7rem;
}

.ms-story-teaser p:not(.ms-media-placeholder__label, .ms-text-link) {
	font-size: 0.9rem;
}

.ms-text-link {
	font-family: var(--wp--preset--font-family--interface, sans-serif);
	font-size: 0.72rem;
	font-weight: 750;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ms-scene--next-chapter {
	background: #ded8cd;
}

.ms-today-vision {
	margin-top: clamp(3rem, 8vw, 7rem);
	gap: 0;
	border-block: 1px solid color-mix(in srgb, var(--ms-charcoal) 18%, transparent);
}

.ms-today-vision > * {
	padding: clamp(1.5rem, 4vw, 3.5rem);
}

.ms-today-vision__vision {
	color: var(--ms-warm-white);
	background: var(--ms-charcoal);
}

.ms-today-vision__vision :where(h3) {
	color: var(--ms-warm-white);
}

.ms-facility-list {
	max-width: 66rem;
	margin-top: 2rem;
	line-height: 1.6;
}

.ms-scene--return {
	min-height: 95svh;
	color: var(--ms-warm-white);
	background: var(--ms-night);
}

.ms-scene--return :where(h2) {
	color: var(--ms-warm-white);
}

.ms-final-actions {
	margin-top: clamp(2rem, 5vw, 4rem);
}

.ms-final-actions .is-style-outline .wp-block-button__link {
	color: var(--ms-warm-white);
	border-color: color-mix(in srgb, var(--ms-warm-white) 65%, transparent);
}

.ms-veterinary-help {
	margin-block-start: 0 !important;
	padding-block: clamp(3rem, 7vw, 6rem);
	color: var(--ms-warm-white);
	background: var(--ms-ochre);
}

.ms-veterinary-help :where(h2) {
	color: var(--ms-night);
}

.ms-veterinary-help__placeholder {
	margin-top: 1.5rem;
	font-family: var(--wp--preset--font-family--interface, sans-serif);
	font-size: 0.75rem;
	font-weight: 750;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* The baseline is visible. Only progressively-enhanced views fade/reveal. */
@media (prefers-reduced-motion: no-preference) {
	.has-immersive-motion .ms-reveal {
	opacity: 0;
	transform: translate3d(var(--ms-reveal-x), var(--ms-reveal-y), 0) scale(var(--ms-reveal-scale, 1));
	transition: opacity var(--ms-reveal-duration) ease, transform var(--ms-reveal-duration) cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	.has-immersive-motion .ms-reveal.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(var(--ms-reveal-scale, 1));
	}

	.has-immersive-motion .ms-parallax-layer {
	transform: translate3d(var(--ms-layer-x, 0px), var(--ms-layer-y, 0px), 0);
	will-change: transform;
	}
}

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
	/*
	 * A scene provides vertical scroll distance; its viewport pins naturally and
	 * the development stage moves beneath the editorial WordPress blocks. The
	 * inverse layer transforms are intentional: the camera is travelling right
	 * and down through a larger world, so nearby terrain passes left and up.
	 */
	.has-immersive-motion .ms-camera-scene {
		min-height: var(--ms-camera-scroll-distance);
		padding-block: 0;
		z-index: 1;
		overflow: visible;
	}

	.has-immersive-motion .ms-camera-scene__viewport {
		position: sticky;
		top: 0;
		display: flex;
		width: 100vw;
		max-width: none !important;
		min-height: 100svh;
		height: 100svh;
		align-items: center;
		margin-inline: calc(50% - 50vw) !important;
		box-sizing: border-box;
		overflow: clip;
		isolation: isolate;
	}

	.has-immersive-motion .ms-camera-scene__viewport > .ms-scene__frame {
		position: relative;
		z-index: 2;
		width: 100%;
		padding-block: clamp(4.5rem, 8vh, 7rem);
	}

	.has-immersive-motion .ms-camera-stage {
		position: absolute;
		inset: 0;
		z-index: 0;
		display: block;
		overflow: hidden;
		background: var(--ms-stage-base);
		pointer-events: none;
	}

	.has-immersive-motion .ms-camera-stage__route {
		position: absolute;
		top: clamp(5.5rem, 9vh, 7.5rem);
		right: clamp(1rem, 3vw, 3rem);
		z-index: 3;
		max-width: 16rem;
		padding: 0.45rem 0.6rem;
		color: var(--ms-charcoal);
		background: color-mix(in srgb, var(--ms-warm-white) 72%, transparent);
		border: 1px solid var(--ms-stage-line);
		font-family: var(--wp--preset--font-family--interface, sans-serif);
		font-size: 0.62rem;
		font-weight: 750;
		letter-spacing: 0.1em;
		line-height: 1.35;
		text-transform: uppercase;
	}

	.has-immersive-motion .ms-camera-stage__route::after {
		content: attr(data-ms-stage-route);
	}

	/*
	 * This is the oversized world, not a section-sized background. At progress
	 * zero the viewport sees its upper-left coordinates. At progress one the
	 * world has shifted left/up by the full camera X/Y distance, exposing the
	 * lower-right coordinates. Depth planes only compensate within that travel.
	 */
	.has-immersive-motion .ms-camera-stage__world {
		position: absolute;
		top: 0;
		left: 0;
		width: var(--ms-camera-stage-width);
		height: var(--ms-camera-stage-height);
		background: var(--ms-stage-base);
		transform: translate3d(var(--ms-camera-world-x, 0px), var(--ms-camera-world-y, 0px), 0);
	}

	/*
	 * Unlabelled spatial landmarks occupy opposite world coordinates. They are
	 * deliberately not arrows or a transition graphic: at the start the camera
	 * sees the upper-left landmark; by the end it has crossed into the separate
	 * lower-right landmark. This makes the world traversal legible even when all
	 * development labels are hidden.
	 */
	.has-immersive-motion .ms-camera-stage__world::before,
	.has-immersive-motion .ms-camera-stage__world::after {
		position: absolute;
		display: block;
		border: 1px solid var(--ms-stage-line);
		content: "";
	}

	.has-immersive-motion .ms-camera-stage__world::before {
		top: 13svh;
		left: 10vw;
		width: 56vw;
		height: 55svh;
		background:
			linear-gradient(140deg, transparent 0 40%, var(--ms-stage-shade) 40% 100%),
			repeating-linear-gradient(90deg, transparent 0 11vw, color-mix(in srgb, var(--ms-stage-line) 48%, transparent) 11vw 11.16vw, transparent 11.16vw 22vw);
		clip-path: polygon(0 67%, 19% 28%, 36% 62%, 54% 13%, 70% 55%, 87% 24%, 100% 49%, 100% 100%, 0 100%);
	}

	.has-immersive-motion .ms-camera-stage__world::after {
		top: 96svh;
		left: 111vw;
		width: 67vw;
		height: 68svh;
		background:
			repeating-linear-gradient(90deg, var(--ms-stage-foreground) 0 4vw, transparent 4vw 10vw),
			repeating-linear-gradient(0deg, transparent 0 9svh, color-mix(in srgb, var(--ms-stage-line) 56%, transparent) 9svh 9.18svh, transparent 9.18svh 18svh),
			color-mix(in srgb, var(--ms-stage-base) 52%, var(--ms-stage-shade));
		clip-path: polygon(0 21%, 13% 9%, 25% 30%, 38% 0, 51% 24%, 65% 6%, 78% 28%, 100% 11%, 100% 100%, 0 100%);
	}

	.has-immersive-motion .ms-camera-scene--right .ms-camera-stage__world::after {
		top: 19svh;
	}

	.has-immersive-motion .ms-camera-stage__layer {
		position: absolute;
		display: block;
		inset: 0;
		border: 1px solid var(--ms-stage-line);
	}

	.has-immersive-motion .ms-camera-scene.is-camera-active :is(.ms-camera-stage__world, .ms-camera-stage__layer) {
		will-change: transform;
	}

	.has-immersive-motion .ms-camera-stage__layer::after {
		position: absolute;
		padding: 0.36rem 0.5rem;
		color: var(--ms-charcoal);
		background: color-mix(in srgb, var(--ms-warm-white) 74%, transparent);
		border: 1px solid var(--ms-stage-line);
		font-family: var(--wp--preset--font-family--interface, sans-serif);
		font-size: 0.58rem;
		font-weight: 750;
		letter-spacing: 0.09em;
		line-height: 1.3;
		text-transform: uppercase;
		content: attr(data-ms-stage-label);
	}

	.has-immersive-motion .ms-camera-stage__layer--distant {
		background:
			repeating-linear-gradient(90deg, transparent 0 17vw, color-mix(in srgb, var(--ms-stage-line) 54%, transparent) 17vw 17.14vw, transparent 17.14vw 34vw),
			repeating-linear-gradient(0deg, transparent 0 16svh, color-mix(in srgb, var(--ms-stage-line) 46%, transparent) 16svh 16.14svh, transparent 16.14svh 32svh),
			linear-gradient(155deg, transparent 0 31%, var(--ms-stage-shade) 31% 32%, transparent 32% 100%),
			var(--ms-stage-base);
		clip-path: polygon(0 27%, 9% 18%, 18% 29%, 29% 11%, 41% 31%, 52% 15%, 65% 28%, 76% 8%, 89% 23%, 100% 13%, 100% 100%, 0 100%);
		transform: translate3d(var(--ms-camera-distant-x, 0px), var(--ms-camera-distant-y, 0px), 0);
	}

	.has-immersive-motion .ms-camera-stage__layer--distant::after {
		top: 26%;
		left: 12%;
	}

	.has-immersive-motion .ms-camera-stage__layer--middle {
		background:
			linear-gradient(137deg, transparent 0 30%, color-mix(in srgb, var(--ms-earth) 72%, var(--ms-stage-base)) 30% 37%, transparent 37% 100%),
			repeating-linear-gradient(90deg, transparent 0 12vw, color-mix(in srgb, var(--ms-stage-shade) 58%, transparent) 12vw 16vw, transparent 16vw 24vw),
			color-mix(in srgb, var(--ms-stage-base) 64%, var(--ms-stage-shade));
		clip-path: polygon(0 47%, 11% 39%, 22% 50%, 33% 30%, 45% 53%, 57% 34%, 70% 49%, 82% 27%, 100% 44%, 100% 100%, 0 100%);
		transform: translate3d(var(--ms-camera-middle-x, 0px), var(--ms-camera-middle-y, 0px), 0);
	}

	.has-immersive-motion .ms-camera-stage__layer--middle::after {
		top: 47%;
		left: 37%;
	}

	.has-immersive-motion .ms-camera-stage__layer--foreground {
		background:
			repeating-linear-gradient(90deg, transparent 0 14vw, var(--ms-stage-foreground) 14vw 19vw, transparent 19vw 31vw),
			linear-gradient(142deg, transparent 0 54%, color-mix(in srgb, var(--ms-charcoal) 38%, var(--ms-stage-base)) 54% 62%, transparent 62% 100%);
		clip-path: polygon(0 62%, 10% 48%, 20% 66%, 30% 41%, 40% 63%, 52% 44%, 64% 69%, 76% 42%, 88% 63%, 100% 46%, 100% 100%, 0 100%);
		transform: translate3d(var(--ms-camera-foreground-x, 0px), var(--ms-camera-foreground-y, 0px), 0);
	}

	.has-immersive-motion .ms-camera-stage__layer--foreground::after {
		top: 69%;
		left: 66%;
	}

	/*
	 * First-four-scenes historical proof of concept. The same three moving depth
	 * planes that establish camera travel now carry a small original environment:
	 * sky, a continuing high ridge, descending terrain, then human shelter and
	 * settlement. These selectors intentionally replace only the two historical
	 * diagonal camera stages; other prototype stages retain their neutral labels.
	 */
	.has-immersive-motion .ms-camera-stage--historical .ms-camera-stage__world::before,
	.has-immersive-motion .ms-camera-stage--historical .ms-camera-stage__world::after,
	.has-immersive-motion .ms-camera-stage--historical .ms-camera-stage__layer::after {
		display: none;
		content: none;
	}

	.has-immersive-motion .ms-camera-stage--historical .ms-camera-stage__layer {
		border: 0;
	}

	/* Subjects sit above the clipped terrain silhouettes but retain middle depth. */
	.has-immersive-motion .ms-camera-stage--historical .ms-camera-stage__landmark {
		position: absolute;
		z-index: 2;
		display: block;
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		content: "";
		pointer-events: none;
		transform: translate3d(var(--ms-camera-middle-x, 0px), var(--ms-camera-middle-y, 0px), 0);
	}

	.has-immersive-motion .ms-camera-scene.is-camera-active .ms-camera-stage__landmark {
		will-change: transform;
	}

	.has-immersive-motion .ms-camera-stage--historical .ms-camera-stage__landmark--camp {
		top: 48svh;
		left: 94vw;
		width: 43vw;
		aspect-ratio: 620 / 320;
		background-image: url("../images/historical/camp-and-figures.svg");
		filter: drop-shadow(0 0.8rem 1.1rem color-mix(in srgb, #1a211c 22%, transparent));
	}

	.has-immersive-motion .ms-camera-stage--historical .ms-camera-stage__landmark--settlement {
		top: 10svh;
		left: 87vw;
		width: 110vw;
		aspect-ratio: 1100 / 560;
		background-image: url("../images/historical/settlement-route.svg?prototype=1");
		filter: brightness(1.28) contrast(0.82) drop-shadow(0 0.9rem 1rem color-mix(in srgb, #17201c 24%, transparent));
	}

	.has-immersive-motion .ms-camera-stage--historical .ms-camera-stage__landmark--settlement::after {
		position: absolute;
		top: 65%;
		left: -8%;
		display: block;
		width: 122%;
		height: 27%;
		background: linear-gradient(145deg, transparent 0 41%, color-mix(in srgb, #c49d68 74%, transparent) 41% 47%, transparent 47% 100%);
		clip-path: polygon(0 28%, 19% 14%, 43% 37%, 67% 52%, 100% 80%, 100% 100%, 67% 69%, 39% 54%, 16% 32%, 0 41%);
		content: "";
		opacity: 0.88;
	}

	.has-immersive-motion .ms-camera-stage--historical .ms-camera-stage__layer--middle::before {
		display: none;
	}

	/* The in-content settlement illustration is the no-JS/mobile fallback. */
	.has-immersive-motion .ms-camera-stage--historical ~ .ms-scene__frame .ms-historical-art--world {
		visibility: hidden;
	}

	/* A soft local haze keeps the editable World Changes copy readable over the route. */
	.has-immersive-motion .ms-camera-stage--world ~ .ms-scene__frame {
		text-shadow: 0 0 1.35rem color-mix(in srgb, #f4f0e8 88%, transparent);
	}

	.has-immersive-motion .ms-camera-stage--relationship .ms-camera-stage__world {
		background:
			radial-gradient(circle at 75vw 23svh, color-mix(in srgb, #fbf2dd 78%, transparent) 0 2.5%, transparent 13%),
			radial-gradient(ellipse at 47vw 56svh, color-mix(in srgb, #e7eee8 52%, transparent) 0 17%, transparent 43%),
			linear-gradient(180deg, #8da3aa 0%, #c8d2cf 39%, #d8d4c7 59%, #78846f 100%);
	}

	.has-immersive-motion .ms-camera-stage--relationship .ms-camera-stage__layer--distant {
		background:
			linear-gradient(152deg, transparent 0 27%, color-mix(in srgb, #f2f3ed 88%, #bfcaca) 27% 34%, transparent 34% 100%),
			linear-gradient(180deg, transparent 0 35%, #9eaea9 35% 100%);
		clip-path: polygon(0 53%, 8% 39%, 17% 52%, 27% 25%, 38% 48%, 50% 16%, 61% 51%, 73% 30%, 84% 54%, 94% 36%, 100% 47%, 100% 100%, 0 100%);
	}

	.has-immersive-motion .ms-camera-stage--relationship .ms-camera-stage__layer--distant::before {
		position: absolute;
		top: 49svh;
		left: 41vw;
		display: block;
		width: 27vw;
		aspect-ratio: 360 / 170;
		background: url("../images/historical/wolf-silhouette.svg") center / contain no-repeat;
		content: "";
		filter: drop-shadow(0 0.75rem 0.9rem color-mix(in srgb, #17201d 25%, transparent));
	}

	.has-immersive-motion .ms-camera-stage--relationship .ms-camera-stage__layer--middle {
		background:
			repeating-linear-gradient(90deg, transparent 0 7vw, color-mix(in srgb, #2c4234 28%, transparent) 7vw 9vw, transparent 9vw 14vw),
			linear-gradient(180deg, transparent 0 46%, #76846c 46% 100%);
		clip-path: polygon(0 66%, 11% 48%, 23% 65%, 35% 38%, 48% 64%, 62% 43%, 75% 66%, 88% 40%, 100% 61%, 100% 100%, 0 100%);
	}

	.has-immersive-motion .ms-camera-stage--relationship .ms-camera-stage__layer--middle::before {
		position: absolute;
		top: 48svh;
		left: 94vw;
		display: block;
		width: 43vw;
		aspect-ratio: 620 / 320;
		background: url("../images/historical/camp-and-figures.svg") center / contain no-repeat;
		content: "";
		filter: drop-shadow(0 0.8rem 1.1rem color-mix(in srgb, #1a211c 22%, transparent));
	}

	.has-immersive-motion .ms-camera-stage--relationship .ms-camera-stage__layer--foreground {
		background: linear-gradient(180deg, transparent 0 72%, #52634f 72% 100%);
		clip-path: polygon(0 84%, 10% 71%, 21% 87%, 32% 68%, 44% 85%, 57% 67%, 68% 88%, 81% 68%, 91% 84%, 100% 70%, 100% 100%, 0 100%);
	}

	.has-immersive-motion .ms-camera-stage--relationship .ms-camera-stage__layer--foreground::before {
		position: absolute;
		top: 70svh;
		left: 18vw;
		display: block;
		width: 164vw;
		height: 72svh;
		background: linear-gradient(134deg, transparent 0 43%, color-mix(in srgb, #b39a70 54%, transparent) 43% 48%, transparent 48% 100%);
		clip-path: polygon(0 28%, 18% 16%, 43% 46%, 75% 61%, 100% 85%, 100% 100%, 78% 76%, 42% 60%, 15% 32%, 0 41%);
		content: "";
		opacity: 0.78;
	}

	.has-immersive-motion .ms-camera-stage--world .ms-camera-stage__world {
		background:
			radial-gradient(circle at 75vw 25svh, color-mix(in srgb, #f5e1be 64%, transparent) 0 2.3%, transparent 12%),
			linear-gradient(180deg, #91a29d 0%, #c2c6b6 40%, #a2a58d 59%, #58634e 100%);
	}

	.has-immersive-motion .ms-camera-stage--world .ms-camera-stage__layer--distant {
		background:
			linear-gradient(153deg, transparent 0 30%, color-mix(in srgb, #d8dfd5 68%, #a5b1a8) 30% 35%, transparent 35% 100%),
			linear-gradient(180deg, transparent 0 38%, #748771 38% 100%);
		clip-path: polygon(0 57%, 9% 42%, 19% 55%, 30% 28%, 43% 51%, 55% 22%, 66% 53%, 78% 34%, 89% 57%, 100% 42%, 100% 100%, 0 100%);
	}

	.has-immersive-motion .ms-camera-stage--world .ms-camera-stage__layer--middle {
		background:
			repeating-linear-gradient(90deg, transparent 0 8vw, color-mix(in srgb, #38503c 27%, transparent) 8vw 10vw, transparent 10vw 17vw),
			linear-gradient(180deg, transparent 0 49%, #69785c 49% 100%);
		clip-path: polygon(0 67%, 12% 49%, 24% 66%, 36% 41%, 49% 65%, 62% 44%, 75% 67%, 88% 43%, 100% 64%, 100% 100%, 0 100%);
	}

	.has-immersive-motion .ms-camera-stage--world .ms-camera-stage__layer--middle::before {
		position: absolute;
		top: 22svh;
		left: 92vw;
		display: block;
		width: 98vw;
		aspect-ratio: 1100 / 560;
		background: url("../images/historical/settlement-route.svg") center / contain no-repeat;
		content: "";
		filter: brightness(1.28) contrast(0.82) drop-shadow(0 0.9rem 1rem color-mix(in srgb, #17201c 24%, transparent));
	}

	.has-immersive-motion .ms-camera-stage--world .ms-camera-stage__layer--foreground {
		background: linear-gradient(180deg, transparent 0 73%, #3d4a39 73% 100%);
		clip-path: polygon(0 85%, 11% 72%, 21% 88%, 34% 70%, 47% 86%, 61% 68%, 72% 89%, 85% 70%, 93% 86%, 100% 72%, 100% 100%, 0 100%);
	}

	.has-immersive-motion .ms-camera-stage--world .ms-camera-stage__layer--foreground::before {
		position: absolute;
		top: 66svh;
		left: 24vw;
		display: block;
		width: 162vw;
		height: 86svh;
		background: linear-gradient(137deg, transparent 0 40%, color-mix(in srgb, #a48e69 67%, transparent) 40% 46%, transparent 46% 100%);
		clip-path: polygon(0 31%, 18% 19%, 39% 43%, 61% 54%, 100% 84%, 100% 100%, 61% 68%, 35% 55%, 15% 34%, 0 42%);
		content: "";
		opacity: 0.86;
	}

	/* Keep the visual handoff into the existing Street Dog scene calm and dark. */
	.has-immersive-motion .ms-camera-stage--world::after {
		position: absolute;
		inset: auto 0 0;
		display: block;
		height: 20%;
		background: linear-gradient(180deg, transparent, color-mix(in srgb, #111210 52%, transparent));
		content: "";
		pointer-events: none;
	}

	.has-immersive-motion .ms-camera-scene.ms-scene--prevention .ms-camera-stage__route {
		color: var(--ms-warm-white);
		background: color-mix(in srgb, var(--ms-night) 62%, transparent);
	}

	.has-immersive-motion .ms-camera-scene.ms-scene--prevention .ms-camera-stage__layer::after {
		color: var(--ms-warm-white);
		background: color-mix(in srgb, var(--ms-night) 64%, transparent);
	}

	.has-immersive-motion .ms-camera-scene--valley .ms-map-placeholder {
		min-height: clamp(19rem, 30vw, 30rem);
	}

	.has-immersive-motion .ms-horizontal-story {
	min-height: 410vh;
	}

	.has-immersive-motion .ms-horizontal-story__stage {
	position: sticky;
	top: 0;
	height: 100svh;
	overflow: hidden;
	}

	.has-immersive-motion .ms-horizontal-story__track {
	display: flex;
	width: 600%;
	height: 100%;
	/* The panorama is ordered left-to-right; shifting it internally advances the camera right. */
	transform: translate3d(calc(var(--ms-horizontal-progress, 0) * -83.3333%), 0, 0);
	will-change: transform;
	}

	.has-immersive-motion .ms-horizontal-story__panel {
	min-width: 16.6667%;
	min-height: 100%;
	border-top: 0;
	border-right: 1px solid color-mix(in srgb, var(--ms-warm-white) 22%, transparent);
	}
}

@media (max-width: 1080px) {
	.manali-strays-primary-navigation {
	order: 3;
	}

	.manali-strays-vet-help {
	position: absolute;
	top: 100%;
	right: var(--wp--preset--spacing--50, 1.5rem);
	padding: 0.45rem 0.6rem;
	color: var(--ms-charcoal);
	background: var(--ms-warm-white);
	border: 1px solid color-mix(in srgb, var(--ms-charcoal) 16%, transparent);
	}

	.manali-strays-site-header.is-home-ready:not(.is-scrolled) .manali-strays-vet-help {
	color: var(--ms-warm-white);
	background: var(--ms-night);
	border-color: color-mix(in srgb, var(--ms-warm-white) 25%, transparent);
	}
}

@media (max-width: 781px) {
	:root {
		--ms-header-height: 4.5rem;
	}

	.manali-strays-site-header {
		padding-block: 0.5rem;
	}

	.manali-strays-site-header__identity .wp-block-site-logo {
		display: none;
	}

	.manali-strays-site-header__actions .wp-block-buttons {
		display: none;
	}

	.ms-scene {
		padding-block: clamp(4.5rem, 17vw, 7rem);
	}

	/* Mobile keeps the same forward reading direction with shorter entrance travel. */
	.ms-direction--down {
		--ms-reveal-y: -0.85rem;
	}

	.ms-direction--right {
		--ms-reveal-x: -0.85rem;
	}

	.ms-direction--down-right {
		--ms-reveal-x: -0.65rem;
		--ms-reveal-y: -0.65rem;
	}

	.ms-scene__frame--split {
		grid-template-columns: 1fr;
	}

	.ms-media-placeholder--himalayas {
		position: relative;
		inset: auto;
		width: 100%;
		min-height: 10rem;
		margin-top: 2rem;
	}

	.ms-scene__frame--origins {
		justify-content: flex-end;
		padding-bottom: 4rem;
	}

	.ms-scroll-cue {
		margin-top: 2rem;
	}

	.ms-horizontal-story__panel {
		min-height: 44svh;
	}

	.ms-story-teaser:nth-child(2),
	.ms-story-teaser:nth-child(3) {
		margin-top: 0;
	}

	.ms-today-vision > * {
		padding-inline: 0;
	}
}

@media (max-width: 480px) {
	.manali-strays-vet-help {
		display: none;
	}

	.ms-display {
		font-size: clamp(3.25rem, 17vw, 4.75rem) !important;
	}

	.ms-statement {
		letter-spacing: -0.04em;
	}

	.ms-rescue-sequence {
		grid-template-columns: 1fr !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}