/*** Module: Timeline ***/

/* Timeline always paints the orange story band. */
.module.timeline {
	isolation: isolate;
	overflow-x: clip;
	padding-block: var(--module-spacing-large);
	position: relative;
	z-index: -1;
}

.module.timeline .container {
	z-index: 1;
}

/* Gradient on a ::before anchored to the section's bottom and extended 1000px
   up, so the darkest orange stays pinned at the foot while the fade bleeds past
   the top edge into whatever sits above (e.g. a no-background Large Statement),
   making them read as one continuous band — no visible seam at any height. */
.module.timeline::before {
	background: linear-gradient(180deg, #FF803E00 0%, var(--orange) 100%);
	bottom: 0;
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	right: 0;
	z-index: -1;
}

/* A Large Statement directly above sits inside the upward bleed; join them flush
   so the two read as one orange band with no page background between. */
.module.large-statement + .module.timeline {
	margin-top: 0;
}

.module.large-statement + .module.timeline::before {
	height: calc(100% + 1000px);
}

/** Intro — heading + body, left column **/

.module.timeline .intro {
	align-self: start;
	grid-column: 1 / span 6;
	position: sticky;
	top: calc(var(--header-height) + var(--module-spacing-medium));
}

.module.timeline .intro > * + * {
	margin-top: var(--text-spacing-small);
}

.module.timeline .highlight {
	color: var(--black);
}

/** Eras — year + milestone rows, right column **/

.module.timeline .eras {
	align-items: stretch;
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xsmall);
	grid-column: 8 / -1;
	list-style: none;
	margin: 0;
	padding: 0;
}

.module.timeline .era {
	align-items: center;
	background: var(--white);
	column-gap: var(--text-spacing-xsmall);
	display: flex;
	padding: var(--text-spacing-small) var(--text-spacing-small) var(--text-spacing-small) var(--text-spacing-xsmall);
}

/* Vertical year-range spine, reading bottom-to-top — decorative figure outside
   the type scale (cf. steps step-number). */
.module.timeline .year {
	flex-shrink: 0;
	font-size: calc(24rem / 16);
	font-weight: 700;
	letter-spacing: 3px;
	line-height: calc(32 / 24);
	opacity: 0.25;
	rotate: 180deg;
	text-transform: uppercase;
	writing-mode: vertical-rl;
}

.module.timeline .era .name,
.module.timeline .era .desc,
.module.timeline .era .desc p {
	margin: 0;
}

/** Style: centered — intro centred above a staggered, centre-line timeline; the
    year reads as a black eyebrow above each era and the white cards are dropped.
    Centre spine styled after the .steps track line. **/

.module.timeline.style-centered .container.grid {
	row-gap: var(--module-spacing-medium);
}

.module.timeline.style-centered .intro {
	grid-column: 2 / -2;
	position: static;
	text-align: center;
	top: auto;
}

/* Body stays two columns narrower than the wider heading, centred. */
.module.timeline.style-centered .intro .large-text {
	margin-inline: auto;
	max-width: calc(8 * var(--one-column-width) + 7 * var(--gap));
}

.module.timeline.style-centered .eras {
	gap: var(--module-spacing-small);
	grid-column: 2 / -2;
	position: relative;
}

.module.timeline.style-centered .era {
	align-items: stretch;
	background: none;
	flex-direction: column;
	gap: var(--text-spacing-xxsmall);
	padding: 0 var(--text-spacing-xlarge) 0 0;
	pointer-events: auto; /* data-jazzy-scroll otherwise gates the era until in view */
	position: relative;
	text-align: right;
	width: 50%;
}

.module.timeline.style-centered .era:nth-child(even) {
	margin-left: auto;
	padding: 0 0 0 var(--text-spacing-xlarge);
	text-align: left;
}

/* Dot pinned to the spine at the top of each era. */
.module.timeline.style-centered .era::before {
	background: var(--black);
	border-radius: 50%;
	content: "";
	height: 9px;
	position: absolute;
	right: -4.5px;
	top: 6.5px;
	transition: opacity .5s ease, transform .5s cubic-bezier(0.34, 1.56, 0.64, 1);
	width: 9px;
}

.module.timeline.style-centered .era:nth-child(even)::before {
	left: -4.5px;
	right: auto;
}

/* Connector from each dot down to the next (own height + the inter-era gap reaches
   the next dot's centre). The last era draws none, so the line stops at the final
   dot instead of overrunning its copy. Sits on the centre spine — the era's inner
   edge, mirrored for the even (right-hand) column. */
.module.timeline.style-centered .era:not(:last-child)::after {
	background: color-mix(in srgb, var(--black) 12%, transparent);
	content: "";
	height: calc(100% + var(--module-spacing-small));
	position: absolute;
	right: -1px;
	top: 11px;
	transform-origin: top;
	width: 2px;
}

.module.timeline.style-centered .era:nth-child(even):not(:last-child)::after {
	left: -1px;
	right: auto;
}

/* Year → black eyebrow above the copy (overrides the decorative vertical spine). */
.module.timeline.style-centered .year {
	color: var(--black);
	font-size: calc(13rem / 16);
	font-weight: 700;
	letter-spacing: 1.5px;
	line-height: calc(16 / 13);
	opacity: 1;
	rotate: none;
	text-transform: uppercase;
	writing-mode: horizontal-tb;
}

.module.timeline.style-centered .era .name {
	font-size: calc(24rem / 16);
	line-height: calc(30 / 24);
}

.module.timeline.style-centered .era .body > * + * {
	margin-top: var(--text-spacing-xxsmall);
}

/* Each era reveals as it scrolls into view: the dot pops onto the spine, its
   connector draws down toward the next dot, then the copy lifts in behind it.
   Motion-safe only — everything is visible by default for reduced-motion / no-JS. */
@media (prefers-reduced-motion: no-preference) {

	.module.timeline.style-centered .era[data-jazzy-scroll]::before {
		opacity: 0;
		transform: scale(0);
	}

	.module.timeline.style-centered .era[data-jazzy-scroll].animated-in::before {
		opacity: 1;
		transform: scale(1);
	}

	.module.timeline.style-centered .era[data-jazzy-scroll]:not(:last-child)::after {
		transform: scaleY(0);
		transition: transform .6s cubic-bezier(0.2, 0.8, 0.2, 1) .1s;
	}

	.module.timeline.style-centered .era[data-jazzy-scroll].animated-in:not(:last-child)::after {
		transform: scaleY(1);
	}

	/* Year, then body — a short cascade behind the dot. */
	.module.timeline.style-centered .era[data-jazzy-scroll] > * {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity .5s ease, transform .5s cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	.module.timeline.style-centered .era[data-jazzy-scroll] > .year {
		transition-delay: .08s;
	}

	.module.timeline.style-centered .era[data-jazzy-scroll] > .body {
		transition-delay: .16s;
	}

	.module.timeline.style-centered .era[data-jazzy-scroll].animated-in > * {
		opacity: 1;
		transform: none;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1100 - Mobile Header / Nav */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(1100rem / 16)) {

	.module.timeline .eras {
		grid-column: 7 / -1;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem / 16)) {

	.module.timeline .intro,
	.module.timeline .eras {
		grid-column: 1 / -1;
	}

	.module.timeline .intro {
		position: static;
	}

	.module.timeline .eras {
		margin-top: var(--text-spacing-large);
	}

	/* Centred variation collapses to a single left-aligned column with the spine
	   on the left. */
	.module.timeline.style-centered .intro,
	.module.timeline.style-centered .eras {
		grid-column: 1 / -1;
	}

	/* Intro body widens to match the (now full-width) heading. */
	.module.timeline.style-centered .intro .large-text {
		max-width: none;
	}

	.module.timeline.style-centered .era,
	.module.timeline.style-centered .era:nth-child(even) {
		margin-left: 0;
		padding: 0 0 0 var(--text-spacing-large);
		text-align: left;
		width: 100%;
	}

	.module.timeline.style-centered .era::before,
	.module.timeline.style-centered .era:nth-child(even)::before {
		left: 0;
		right: auto;
	}

	/* Spine moves to the left column — align the connector to the left-hand dots. */
	.module.timeline.style-centered .era:not(:last-child)::after,
	.module.timeline.style-centered .era:nth-child(even):not(:last-child)::after {
		left: 3.5px;
		right: auto;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem / 16)) {

	.module.timeline .eras {
		margin-top: var(--text-spacing-small);
	}

	/* Centred variation: intro heading + body go left-aligned on mobile. */
	.module.timeline.style-centered .intro {
		text-align: left;
	}

}