/* Kidsverse Scroll Motion — home page only (body.kvsm-on) */

body.kvsm-on {
	background: #2f3726;
}

/* ---------- Background video stage ---------- */
.kvsm-stage {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background: #3f4a32 center / cover no-repeat;
	pointer-events: none;
}
.kvsm-stage video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
}
/* Persian: mirror the scene so the empty side matches the start side of the text */
.kvsm-rtl .kvsm-stage {
	transform: scaleX(-1);
}
.kvsm-ambient {
	display: none;
}
.kvsm-portrait .kvsm-ambient {
	display: block;
	position: absolute;
	top: -8%;
	left: -8%;
	width: 116%;
	height: 116%;
	filter: blur(22px) saturate(1.15) brightness(.92);
}
.kvsm-portrait video {
	position: relative;
	object-fit: contain;
	object-position: center 18%;
}
.kvsm-veil {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(251, 249, 244, .28) 0%, rgba(251, 249, 244, 0) 26%),
		linear-gradient(0deg, rgba(31, 38, 26, .28) 0%, rgba(31, 38, 26, 0) 30%);
}

/* ---------- Layers ---------- */
body.kvsm-on .kv-header {
	z-index: 100;
	background: rgba(251, 249, 244, .9);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
body.kvsm-on .kv-main {
	position: relative;
	z-index: 1;
	background: transparent;
	overflow-x: clip;
}
body.kvsm-on .kv-footer {
	position: relative;
	z-index: 2;
}

/* Sections become transparent rooms with space for the video to breathe */
body.kvsm-on .kv-main > section {
	background: transparent !important;
	padding-block: 22vh;
}
body.kvsm-on .kv-main > section::before,
body.kvsm-on .kv-main > section::after {
	display: none !important;
}
body.kvsm-on .kv-main > section:first-child {
	min-height: calc(100vh - 87px);
	padding-block: 8vh 30vh;
	display: flex;
	align-items: center;
}
body.kvsm-on .kv-main > section:last-child {
	padding-block: 22vh 26vh;
}
body.kvsm-on .kv-hero .kv-wash,
body.kvsm-on .kv-hero .kv-hero__photo {
	display: none !important;
}

/* ---------- Cards ---------- */
.kvsm-card {
	--kvsm-from: -110px;
	position: relative;
	box-sizing: border-box;
	width: auto;
	max-width: min(640px, calc(100% - 32px));
	margin-inline: clamp(16px, 6vw, 110px) auto !important;
	padding: clamp(26px, 3.4vw, 50px) !important;
	background: rgba(251, 249, 244, .9);
	-webkit-backdrop-filter: blur(16px) saturate(1.1);
	backdrop-filter: blur(16px) saturate(1.1);
	border: 1px solid rgba(255, 255, 255, .65);
	border-radius: 30px;
	box-shadow: 0 24px 70px rgba(31, 38, 26, .22);
	opacity: 0;
	transform: translate3d(var(--kvsm-from), 0, 0);
	transition:
		opacity .8s ease,
		transform .95s cubic-bezier(.2, .75, .2, 1);
	will-change: transform, opacity;
}
.kvsm-card.kvsm-end {
	margin-inline: auto clamp(16px, 6vw, 110px) !important;
}
.kvsm-card.kvsm-center {
	margin-inline: auto !important;
}
.kvsm-card.kvsm-wide {
	max-width: min(860px, calc(100% - 32px));
}
.kvsm-card.kvsm-in {
	opacity: 1;
	transform: none;
}
/* While the visitor is scrolling, cards step back so the film is in focus;
   when scrolling stops they settle in fully. */
body.kvsm-moving .kvsm-card.kvsm-in {
	opacity: .42;
	transform: translate3d(calc(var(--kvsm-from) * .18), 0, 0) scale(.985);
	transition-duration: .35s, .45s;
}

/* ---------- Content inside cards ---------- */
.kvsm-card .kv-section__head {
	max-width: none;
	margin-inline: 0;
}
.kvsm-card .kv-strip {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 14px;
}
.kvsm-card .kv-steps {
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
	gap: 18px;
}
.kvsm-card .kv-posts {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
	gap: 20px;
}
.kvsm-card.kv-split {
	display: grid !important;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) !important;
	gap: 28px;
	align-items: center;
}
.kvsm-card.kv-split {
	max-width: min(820px, calc(100% - 32px));
}
.kvsm-card .kv-split__text {
	padding: 0 !important;
	background: transparent !important;
}
.kvsm-card .kv-split__media img {
	width: 100%;
	height: 100%;
	max-height: 380px;
	object-fit: cover;
	border-radius: 22px;
}
.kvsm-card .kv-hero__title {
	font-size: clamp(2.1rem, 4.2vw, 3.6rem);
}
/* Green call-to-action keeps its colour as a translucent card */
.kv-cta-band .kvsm-card {
	background: rgba(63, 74, 50, .9);
	border-color: rgba(255, 255, 255, .18);
	text-align: center;
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	body.kvsm-on .kv-main > section {
		padding-block: 16vh;
	}
	body.kvsm-on .kv-main > section:first-child {
		min-height: calc(100svh - 64px);
		padding-block: 40svh 6svh;
		align-items: flex-end;
	}
	.kvsm-card {
		padding: 24px 20px !important;
	}
	.kvsm-card .kv-hero__lead {
		font-size: .95rem;
	}
	.kvsm-card,
	.kvsm-card.kvsm-end,
	.kvsm-card.kvsm-wide {
		max-width: calc(100% - 28px);
		margin-inline: auto !important;
		border-radius: 24px;
		background: rgba(251, 249, 244, .93);
	}
	.kvsm-card .kv-strip,
	.kvsm-card.kv-split {
		grid-template-columns: 1fr !important;
	}
	.kvsm-card .kv-split__media img {
		max-height: 260px;
	}
}

/* ---------- Reduced motion: still image, no sliding ---------- */
@media (prefers-reduced-motion: reduce) {
	.kvsm-card,
	body.kvsm-moving .kvsm-card.kvsm-in {
		opacity: 1;
		transform: none;
		transition: none;
	}
}