/* Mineral City AI - story timeline (About page)
 *
 * ONE DOM, two layouts:
 *   >=1025px  horizontal rail, years centred above it, bullet columns below
 *   <1025px   vertical rail down the left, each year stacked beside it
 * The rail is an absolute overlay in both, so .mcai-story__steps never has to
 * know it exists and no grid-line calc() is needed for placement.
 *
 * Everything renders in its FINISHED state - every year visible, marker at the
 * end of the rail - until mcai-story.js adds `is-ready`. No JS and
 * prefers-reduced-motion therefore both get the complete timeline rather than
 * an empty band, and the animated states are pure additions on top.
 */

.mcai-story {
	--mcai-story-n: 4;
	--mcai-story-gap: 82px;
	--mcai-story-band: 24px;
	--mcai-story-rail: 36px;
	--mcai-story-track: 8px;
	--mcai-story-tick: 5px;
	--mcai-story-cap: 30px;
	--mcai-story-marker: 42px;
	--mcai-story-year-size: 30px;
	--mcai-story-text-size: 16px;
	--mcai-story-ink: #11110F;
	--mcai-story-accent: #00B8D4;
	--mcai-story-rule: #E9E8E6;
	--mcai-story-pin: 1.6;
	--mcai-story-stage: 440px;
	--mcai-story-lane: 44px;

	/* the year row's own height, which is also what the rail band is offset by */
	--mcai-story-yearline: calc(var(--mcai-story-year-size) * 1.2);
	/* one column, used to drop the ticks on the column centres */
	--mcai-story-colw: calc(
		(100% - (var(--mcai-story-n) - 1) * var(--mcai-story-gap)) / var(--mcai-story-n)
	);
}

.mcai-story__inner {
	position: relative;
}

/* ------------------------------------------------------------------ steps */
.mcai-story__step {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.mcai-story__year {
	font-size: var(--mcai-story-year-size);
	font-weight: 400;
	line-height: 1.2;
	color: var(--mcai-story-ink);
	text-transform: uppercase;
	margin: 0;
}

.mcai-story__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mcai-story__item {
	position: relative;
	padding-left: 18px;
	margin: 0;
	font-size: var(--mcai-story-text-size);
	font-weight: 400;
	line-height: normal;
	color: var(--mcai-story-ink);
}
/* Figma draws the bullet as a 6px circle centred 11px down a 22px box; at a
   16px body that lands on the middle of the first line. */
.mcai-story__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--mcai-story-ink);
}

/* ------------------------------------------------------------------- rail */
.mcai-story__rail {
	position: absolute;
	pointer-events: none;
}

.mcai-story__track,
.mcai-story__fill {
	position: absolute;
	border-radius: 0;
}
.mcai-story__track { background: var(--mcai-story-rule); }
.mcai-story__fill  { background: var(--mcai-story-ink); }

.mcai-story__cap {
	position: absolute;
	background: var(--mcai-story-accent);
}

.mcai-story__tick {
	position: absolute;
	background: var(--mcai-story-ink);
}

/* The per-year dashes are drawn by .mcai-story__year::before, which lives in
   .mcai-story__steps - later in the DOM than the rail - so without a z-index the
   marker is painted UNDER them. The rail itself must stay z-index:auto (no
   stacking context) or this would not reach past it. */
.mcai-story__marker {
	position: absolute;
	z-index: 3;
	width: var(--mcai-story-marker);
	height: var(--mcai-story-marker);
	background: var(--mcai-story-accent);
	display: block;
}
.mcai-story__marker svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ================================================== horizontal (>=1025px) */
@media (min-width: 1025px) {

	.mcai-story__steps {
		display: grid;
		grid-template-columns: repeat(var(--mcai-story-n), minmax(0, 1fr));
		column-gap: var(--mcai-story-gap);
		align-items: start;
	}

	.mcai-story__year { text-align: center; }

	/* clears the rail band: gap + rail + gap */
	.mcai-story__list {
		margin-top: calc(var(--mcai-story-band) * 2 + var(--mcai-story-rail));
	}

	.mcai-story__rail {
		left: 0;
		right: 0;
		top: calc(var(--mcai-story-yearline) + var(--mcai-story-band));
		height: var(--mcai-story-rail);
	}

	/* the grey line stops half a cap short of each end, as in the file */
	.mcai-story__track,
	.mcai-story__fill {
		left: calc(var(--mcai-story-tick) / 2);
		top: 50%;
		height: var(--mcai-story-track);
		transform: translateY(-50%);
	}
	.mcai-story__track { right: calc(var(--mcai-story-tick) / 2); }
	/* the marker is opaque and sits on top, so filling to its CENTRE draws the
	   black exactly up to its left edge - which is what the design shows */
	.mcai-story__fill { width: var(--mcai-story-x, 100%); }

	.mcai-story__cap {
		top: 50%;
		width: var(--mcai-story-tick);
		height: var(--mcai-story-cap);
		transform: translateY(-50%);
	}
	.mcai-story__cap--start { left: 0; }
	.mcai-story__cap--end   { right: 0; }

	.mcai-story__tick {
		top: 0;
		width: var(--mcai-story-tick);
		height: 100%;
		left: calc(
			var(--i) * (var(--mcai-story-colw) + var(--mcai-story-gap))
			+ var(--mcai-story-colw) / 2
		);
		transform: translateX(-50%);
	}

	.mcai-story__marker {
		left: var(--mcai-story-x, 100%);
		top: 50%;
		transform: translate(-50%, -50%);
	}

	/* the tick is drawn on the rail here, not beside the year */
	.mcai-story__year::before { display: none; }

	/* --------------------------------------------------- pinned scrub */
	/* The runway has to stay taller than the stage or there is no travel left to
	   scrub and the timeline silently jumps to its finished state - reachable
	   with a short viewport, a small pin and a large stage height. The floor
	   keeps 60vh of scrub whatever the two controls are set to; at the defaults
	   the first term always wins, so this changes nothing in normal use. */
	.mcai-story.is-ready .mcai-story__scroller {
		height: max(
			calc(var(--mcai-story-pin) * 100vh),
			calc(var(--mcai-story-stage) + 60vh)
		);
	}
	/* The stage is deliberately SHORTER than the viewport. At 100vh the 286px
	   timeline sat marooned in the middle of an otherwise empty screen - 253px
	   of dead white above AND below it, which is also what separated it from the
	   mission/vision row above and the team section below. Sizing the stage to
	   its content and centring it with a sticky offset keeps the held-in-place
	   scrub and cuts the white to whatever --mcai-story-stage leaves over.
	   max() guards a viewport shorter than the stage. */
	.mcai-story.is-ready .mcai-story__stage {
		position: sticky;
		top: max(0px, calc((100vh - var(--mcai-story-stage)) / 2));
		height: var(--mcai-story-stage);
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

/* ==================================================== stacked (<1025px) */
@media (max-width: 1024px) {

	/* --mcai-story-year-size and --mcai-story-marker are NOT set here: they are
	   responsive controls, and Elementor's desktop rule for those is (0,3,0)
	   with no media query, so it would win at every width. Their small-screen
	   values live in the controls' tablet_default / mobile_default. */
	.mcai-story {
		--mcai-story-lane: 40px;
	}

	.mcai-story__steps {
		display: flex;
		flex-direction: column;
		gap: 28px;
		padding-left: var(--mcai-story-lane);
	}

	.mcai-story__year {
		position: relative;
		text-align: left;
	}
	/* the rail's own ticks are horizontal-only, so beside the year label the
	   dash is drawn by the label itself - that keeps the stacked layout correct
	   with no JS measuring at all */
	.mcai-story__year::before {
		content: "";
		position: absolute;
		top: 50%;
		left: calc(var(--mcai-story-lane) * -1 + (var(--mcai-story-rail) - 22px) / 2);
		width: 22px;
		height: var(--mcai-story-tick);
		background: var(--mcai-story-ink);
		transform: translateY(-50%);
	}

	.mcai-story__list { margin-top: 14px; }

	.mcai-story__rail {
		left: 0;
		top: 0;
		bottom: 0;
		width: var(--mcai-story-rail);
	}

	.mcai-story__track,
	.mcai-story__fill {
		top: calc(var(--mcai-story-tick) / 2);
		left: 50%;
		width: var(--mcai-story-track);
		transform: translateX(-50%);
	}
	.mcai-story__track { bottom: calc(var(--mcai-story-tick) / 2); }
	.mcai-story__fill {
		height: var(--mcai-story-y, 100%);
		transition: height .35s ease;
	}

	.mcai-story__cap {
		left: 50%;
		height: var(--mcai-story-tick);
		width: var(--mcai-story-cap);
		transform: translateX(-50%);
	}
	.mcai-story__cap--start { top: 0; }
	.mcai-story__cap--end   { bottom: 0; }

	.mcai-story__tick { display: none; }

	/* the glyph is a right arrow; down the rail it has to point down */
	.mcai-story__marker svg { transform: rotate(90deg); }

	.mcai-story__marker {
		left: 50%;
		top: var(--mcai-story-y, 100%);
		transform: translate(-50%, -50%);
		transition: top .35s ease;
	}

	/* the stacked layout is never pinned - sticky plus a mobile browser's
	   collapsing toolbar makes the stage jump under the reader's thumb */
	.mcai-story.is-ready .mcai-story__year,
	.mcai-story.is-ready .mcai-story__list {
		transition: opacity .3s ease, transform .3s ease;
	}
}

/* ------------------------------------------------------- animated states */
/* Set only once JS is driving. The year row keeps its box either way, so the
   columns never reflow as the reveal runs. */
.mcai-story.is-ready .mcai-story__year,
.mcai-story.is-ready .mcai-story__list {
	opacity: var(--r, 0);
}
.mcai-story.is-ready .mcai-story__list {
	transform: translateY(calc((1 - var(--r, 0)) * 12px));
}
.mcai-story.is-ready .mcai-story__year.is-active {
	color: var(--mcai-story-accent);
}

@media (prefers-reduced-motion: reduce) {
	.mcai-story__fill,
	.mcai-story__marker,
	.mcai-story__year,
	.mcai-story__list {
		transition: none;
	}
}