/* Motion Kit — core: theme tokens, light theme, shared helpers and the pinned scroll layout.
   Each element has its own stylesheet (css/<element>.css) that loads only where the element is used.
   Theme with the --mkit-* custom properties on .mkit (or any ancestor). Every colour that isn't
   set directly is mixed from --mkit-accent, so changing the accent recolours the whole element.
   Entrance and scroll states are added by the scripts; without them each element shows its final state. */

.mkit {
	--mkit-accent: #3c44ff;
	--mkit-accent-soft: #8a90ff;
	--mkit-text: #f3f3f8;
	--mkit-muted: #a9aac4;
	--mkit-chip-bg: #17183a;
	--mkit-chip-border: rgba(255, 255, 255, .16);
	--mkit-line: rgba(255, 255, 255, .16);
	--mkit-dot: rgba(255, 255, 255, .13);
	--mkit-highlight: #ffb22c;
	--mkit-panel: rgba(255, 255, 255, .04);
	--mkit-surface: #0d0e22;
	--mkit-core-text: #fff;
	--mkit-shadow: rgba(0, 0, 0, .6);
	--mkit-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
	--mkit-ease: cubic-bezier(.2, .7, .2, 1);
	--mkit-spring: cubic-bezier(.34, 1.56, .64, 1);
	box-sizing: border-box;
}

.mkit *,
.mkit *::before,
.mkit *::after {
	box-sizing: inherit;
}

.mkit--light {
	--mkit-accent-soft: var(--mkit-accent);
	--mkit-text: #14152b;
	--mkit-muted: #5d5e70;
	--mkit-chip-bg: #fff;
	--mkit-chip-border: rgba(20, 21, 43, .14);
	--mkit-line: rgba(20, 21, 43, .14);
	--mkit-dot: rgba(20, 21, 43, .14);
	--mkit-highlight: #a65f00;
	--mkit-panel: rgba(60, 68, 255, .04);
	--mkit-surface: #fff;
	--mkit-shadow: rgba(20, 21, 43, .22);
}

/* Devanagari and other Indic hub words get a matching system face unless a font is set */
.mkit :is(.mkit-orbit__word, .mkit-story__word, .mkit-word):is(:lang(hi), :lang(mr), :lang(ne), :lang(sa)) {
	font-family: var(--mkit-font-word, "Kohinoor Devanagari", "Noto Sans Devanagari", "Nirmala UI", "Mangal", sans-serif);
}

.mkit :is(.mkit-orbit__word, .mkit-story__word, .mkit-word) {
	font-family: var(--mkit-font-word, inherit);
}

.mkit-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.mkit-eyebrow {
	font-family: var(--mkit-font-mono);
	font-size: .75rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mkit-muted);
}

/* Placeholder media: an accent gradient with a big number, used wherever an image is optional */
.mkit-ph {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	overflow: hidden;
	color: #fff;
	background:
		radial-gradient(110% 90% at 18% 12%, color-mix(in srgb, var(--mkit-accent) 75%, #fff 12%), transparent 62%),
		linear-gradient(140deg, color-mix(in srgb, var(--mkit-accent) 62%, var(--mkit-surface)), color-mix(in srgb, var(--mkit-accent) 14%, var(--mkit-surface)));
	filter: hue-rotate(calc(var(--n, 0) * 16deg));
}

.mkit-ph::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, .2) 1px, transparent 1.4px);
	background-size: 16px 16px;
	-webkit-mask-image: linear-gradient(140deg, #000, transparent 72%);
	mask-image: linear-gradient(140deg, #000, transparent 72%);
}

.mkit-ph span {
	position: relative;
	font-size: clamp(2.5rem, 1.5rem + 4vw, 5rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.05em;
	opacity: .9;
}

.mkit-arrow {
	flex: none;
	width: 1.1em;
	height: 1.1em;
}

/* ==================================================================
   Pinned scroll layout (Layer Stack, Dot Funnel)
   Without the script it's a visual plus a plain list. The script adds .is-pinned: the root grows
   by one screen step per item, the inner panel sticks, and only the active item shows.
   ================================================================== */

.mkit-scrolly {
	--sticky: var(--mkit-sticky-top, 0px);
	position: relative;
	width: 100%;
	overflow-x: clip; /* labels can poke past the visual; clip isn't a scroll container, so sticky still works */
	color: var(--mkit-muted);
}

.mkit-scrolly.is-pinned {
	height: calc(100vh + var(--mkit-n, 4) * var(--mkit-step-h, 70vh));
}

.mkit-scrolly__pin {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	align-items: center;
	gap: clamp(1.5rem, 5vw, 5rem);
	padding-block: clamp(1rem, 4vh, 3rem);
}

.mkit-scrolly.is-pinned .mkit-scrolly__pin {
	position: sticky;
	top: var(--sticky);
	height: calc(100vh - var(--sticky));
	height: calc(100svh - var(--sticky));
}

.mkit-scrolly--visual-right .mkit-scrolly__visual {
	order: 2;
}

.mkit-scrolly__visual {
	display: grid;
	place-items: center;
	min-width: 0;
}

.mkit-scrolly__items {
	display: grid;
	gap: 2.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mkit-scrolly__item {
	display: flex;
	flex-direction: column;
	gap: .7rem;
	margin: 0;
}

.mkit-scrolly.is-pinned .mkit-scrolly__items {
	gap: 0;
}

.mkit-scrolly.is-pinned .mkit-scrolly__item {
	grid-area: 1 / 1;
	opacity: 0;
	translate: 0 18px;
	visibility: hidden;
	transition: opacity .5s var(--mkit-ease), translate .5s var(--mkit-ease), visibility 0s .5s;
}

.mkit-scrolly.is-pinned .mkit-scrolly__item.is-active {
	opacity: 1;
	translate: 0 0;
	visibility: visible;
	transition: opacity .5s var(--mkit-ease) .1s, translate .5s var(--mkit-ease) .1s, visibility 0s;
}

.mkit-scrolly__title {
	margin: 0;
	color: var(--mkit-text);
	font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -.02em;
}

.mkit-scrolly__text {
	max-width: 46ch;
	margin: 0;
	font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
	line-height: 1.65;
}

.mkit-scrolly__ticks {
	display: none;
	gap: 6px;
	margin-top: 2rem;
}

.mkit-scrolly.is-pinned .mkit-scrolly__ticks {
	display: flex;
}

.mkit-scrolly__ticks span {
	flex: 0 0 28px;
	height: 3px;
	border-radius: 2px;
	background: var(--mkit-line);
	transition: background-color .4s var(--mkit-ease), flex-basis .4s var(--mkit-ease);
}

.mkit-scrolly__ticks span.is-done {
	background: color-mix(in srgb, var(--mkit-accent-soft) 55%, transparent);
}

.mkit-scrolly__ticks span.is-active {
	flex-basis: 48px;
	background: var(--mkit-accent);
}

@media (max-width: 991px) {
	.mkit-scrolly__pin {
		grid-template-columns: minmax(0, 1fr);
		align-content: center;
		gap: 1.25rem;
	}
	.mkit-scrolly--visual-right .mkit-scrolly__visual {
		order: 0;
	}
	.mkit-scrolly__title {
		font-size: 1.5rem;
	}
	.mkit-scrolly__ticks {
		margin-top: 1rem;
	}
}