/**
 * Layout: Timeline — Scroll Milestones (pinned).
 *
 * Base styles: a plain vertical list of every milestone (phones, no JS,
 * reduced motion). .is-enhanced (view.js): the section pins for a short
 * scroll step per milestone; the purple line grows to the year in view;
 * only the active milestone is shown. Milestones cross-fade softly: the
 * outgoing one drifts up and fades, the incoming one rises in, unblurs
 * and its photo settles from a slight zoom.
 *
 * Ring marker (image pill and active year): white outline circle with a
 * purple dot outlined in white (design reference "Circle 9").
 *
 * @package GagaMuller
 */

.gm-msc {
	--gm-msc-dim: rgb(255 255 255 / 0.32);
	--gm-msc-line: rgb(255 255 255 / 0.18);
	--gm-msc-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--gm-msc-in: 700ms;
	--gm-msc-out: 380ms;

	background:
		radial-gradient(ellipse 80% 55% at 75% 110%, rgb(114 21 244 / 0.6) 0%, rgb(114 21 244 / 0) 70%),
		var(--gm-color-black);
	color: var(--gm-color-white);
}

.gm-msc__inner {
	display: flex;
	flex-direction: column;
	gap: var(--gm-space-32);
}

/* ---- Base: plain list ------------------------------------------------ */

.gm-msc__rail {
	display: none;
}

.gm-msc__items {
	position: relative;
	display: grid;
	gap: var(--gm-space-40);
	margin: 0;
	padding: 0 0 0 var(--gm-space-24);
	border-left: 1px solid var(--gm-msc-line);
	list-style: none;
}

.gm-msc__item {
	display: grid;
	gap: var(--gm-space-16);
}

.gm-msc__item-year {
	margin: 0;
	color: var(--gm-color-light-purple);
	font-family: var(--gm-font-heading);
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
	font-weight: var(--gm-weight-bold);
	line-height: 1;
}

.gm-msc__pill {
	position: relative;
	width: min(100%, 36rem); /* 576 */
	aspect-ratio: 2.15 / 1;
	overflow: hidden;
	border: 1px solid rgb(255 255 255 / 0.22);
	border-radius: 999px;
	background: rgb(255 255 255 / 0.06);
}

.gm-msc__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Several markers (e.g. United States and Canada): smaller rings. */
.gm-msc__pill--multi .gm-msc__pill-ring {
	width: clamp(2.75rem, 2.3rem + 1vw, 3.5rem);
}

/* Ring marker inside the pill's left end (or where a marker sets it). */
.gm-msc__pill-ring {
	position: absolute;
	top: 50%;
	left: 19%;
	width: clamp(4.5rem, 3.6rem + 2vw, 6rem); /* 72 → 96 */
	aspect-ratio: 1;
	border: 2px solid var(--gm-color-white);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.gm-msc__pill-ring::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1rem;
	height: 1rem;
	box-sizing: border-box;
	border: 2px solid var(--gm-color-white);
	border-radius: 50%;
	background: var(--gm-color-purple);
	content: "";
	transform: translate(-50%, -50%);
}

.gm-msc__copy {
	display: grid;
	gap: var(--gm-space-12);
	max-width: 28rem;
}

.gm-msc__title {
	margin: 0;
	color: var(--gm-color-white);
	font-family: var(--gm-font-heading);
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);
	font-weight: var(--gm-weight-bold);
	line-height: 1.12;
}

.gm-msc__text {
	margin: 0;
	color: var(--gm-color-on-dark-strong);
	font-size: var(--gm-text-body-lg);
	line-height: 1.45;
}

/* ---- Enhanced: pinned scroll timeline -------------------------------- */

.gm-msc.is-enhanced {
	padding-block: 0;
}

/* A short scroll step (~32% of the viewport) per milestone after the
 * first, so the section is not much taller than the screen. */
.gm-msc.is-enhanced .gm-msc__track {
	height: calc(100vh + (var(--gm-msc-count) - 1) * 32vh);
}

/* view.js keeps the page in place itself when the section collapses, so
 * the browser's own scroll anchoring must not correct it a second time. */
html:has(.gm-msc.is-enhanced),
html:has(.gm-msc.is-enhanced) body {
	overflow-anchor: none;
}

/* After one full pass (view.js): one screen, no replay on the way back. */
.gm-msc.is-enhanced.is-done .gm-msc__track {
	height: 100vh;
}

.gm-msc.is-done .gm-msc__years button {
	cursor: pointer;
}

.gm-msc.is-enhanced .gm-msc__sticky {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	height: 100vh;
	overflow: hidden;
}

.gm-msc.is-enhanced .gm-msc__inner {
	width: 100%;
}

.gm-msc.is-enhanced .gm-msc__body {
	display: grid;
	grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr);
	gap: clamp(2rem, 1rem + 3.5vw, 4.5rem);
	align-items: center;
}

/* Rail: line + years. */
.gm-msc.is-enhanced .gm-msc__rail {
	position: relative;
	display: block;
}

.gm-msc__line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0.6875rem;
	width: 1px;
	background: var(--gm-msc-line);
}

.gm-msc__line-fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--gm-msc-fill, 0px);
	background: linear-gradient(180deg, rgb(114 21 244 / 0.15), var(--gm-color-purple) 45%, var(--gm-color-light-purple));
	transition: height 800ms var(--gm-msc-ease);
}

.gm-msc__years {
	display: flex;
	flex-direction: column;
	gap: clamp(0.625rem, 0.3rem + 1vh, 1.125rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gm-msc__year {
	position: relative;
	padding-left: 2.5rem;
}

/* Small tick on the line for every year. */
.gm-msc__year::before {
	position: absolute;
	top: 50%;
	left: 0.6875rem;
	width: 5px;
	height: 5px;
	box-sizing: border-box;
	border-radius: 50%;
	background: var(--gm-msc-line);
	content: "";
	transform: translate(-50%, -50%);
	transition:
		background-color 600ms var(--gm-msc-ease),
		width 600ms var(--gm-msc-ease),
		height 600ms var(--gm-msc-ease);
}

.gm-msc__year-button {
	padding: 0;
	border: 0;
	background: none;
	color: rgb(255 255 255 / var(--gm-msc-alpha, 0.3));
	cursor: pointer;
	font-family: var(--gm-font-heading);
	font-size: 1.125rem;
	font-weight: var(--gm-weight-bold);
	line-height: 1;
	letter-spacing: 0.02em;
	transition:
		color 600ms var(--gm-msc-ease),
		font-size 600ms var(--gm-msc-ease);
}

.gm-msc__year.is-past::before {
	background: var(--gm-color-light-purple);
}

/* Active year: large white with the ring marker on the line. */
.gm-msc__year.is-active .gm-msc__year-button {
	color: var(--gm-color-white);
	font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
}

.gm-msc__year.is-active::before {
	width: 22px;
	height: 22px;
	border: 2px solid var(--gm-color-white);
	background: radial-gradient(circle, var(--gm-color-purple) 0 3px, var(--gm-color-white) 3.5px 5px, transparent 5.5px);
}

/* Stage: milestones stacked in one cell, only the active one visible. */
.gm-msc.is-enhanced .gm-msc__items {
	grid-template-areas: "stage";
	padding: 0;
	border: 0;
}

.gm-msc.is-enhanced .gm-msc__item {
	grid-area: stage;
	grid-template-columns: minmax(0, 36rem) minmax(0, 1fr);
	gap: clamp(1.5rem, 1rem + 2vw, 3rem);
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-14px);
	transition:
		opacity var(--gm-msc-out) ease-in,
		transform var(--gm-msc-out) ease-in,
		visibility 0s linear var(--gm-msc-out);
}

/* Incoming: starts as the outgoing one is half faded (soft overlap). */
.gm-msc.is-enhanced .gm-msc__item.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition:
		opacity var(--gm-msc-in) var(--gm-msc-ease) 180ms,
		transform var(--gm-msc-in) var(--gm-msc-ease) 180ms,
		visibility 0s linear 0s;
}

.gm-msc.is-enhanced .gm-msc__item:not(.is-active) {
	transform: translateY(-14px);
}

/* Elements of the incoming milestone settle one after another. */
.gm-msc.is-enhanced .gm-msc__image {
	transform: scale(1.08);
	filter: blur(6px);
	transition:
		transform 1100ms var(--gm-msc-ease),
		filter 700ms var(--gm-msc-ease);
}

.gm-msc.is-enhanced .gm-msc__item.is-active .gm-msc__image {
	transform: none;
	filter: none;
	transition-delay: 180ms;
}

.gm-msc.is-enhanced .gm-msc__copy {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity 300ms ease-in,
		transform 300ms ease-in;
}

.gm-msc.is-enhanced .gm-msc__item.is-active .gm-msc__copy {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--gm-msc-in) var(--gm-msc-ease) 300ms,
		transform var(--gm-msc-in) var(--gm-msc-ease) 300ms;
}

.gm-msc.is-enhanced .gm-msc__item-year {
	display: none;
}

@media (max-width: 1199px) {
	.gm-msc.is-enhanced .gm-msc__item {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gm-msc__line-fill,
	.gm-msc__year::before,
	.gm-msc__year-button {
		transition: none;
	}
}