/* ─────────────────────────────────────────────────────────────
   GTD Desco — Our Story.

   WHAT WAS WRONG

   THE PAGE HAD NO <h1>. `#our-story-banner` was an empty <div>
   with a background-image and a forced 622px height — a picture
   with no heading on it and nothing for a screen reader or a
   search engine to read as the page's title.

   `#contact-us-block` was used TWICE: once as a hand-rolled div
   holding a single <h2>, and again as the real closing CTA
   include forty lines later. Same id, twice, on one page.

   THE STORY. Nine `.story-row` slabs, alternating sides by hand
   with `.right-text-styles` and `.left-title-h2`, inside a
   section carrying `our-story-main-content` — an id used on
   four other sections of this theme. Nothing said it was a
   sequence. Three of the nine carry a real year in the heading
   — "2019 - GTD WAS FORMED", "2022 - LAUNCHED TO U.S. MARKET" —
   and the page set them at exactly the same size as the rest.

   WHAT THIS DOES

   Draws the line. One spine, a node at every station, and the
   years pulled out of the headings that already held them and
   set at the size a date deserves.

   THE MOMENT

   The spine draws as the section is scrolled through, and each
   station arrives from the side it sits on — so nine slabs
   become one movement down the page.
   ───────────────────────────────────────────────────────────── */

.gtd-tl {
	--s-red:   var(--gtd-red, #c60000);
	--s-ink:   var(--gtd-ink, #101d1d);
	--s-quiet: #5c6666;
	--s-line:  rgba(16, 29, 29, .14);
	--s-ease:  cubic-bezier(.16, 1, .3, 1);
	--s-node:  18px;

	padding-block: clamp(3rem, 7vw, 6rem);
}

.gtd-tl__head {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 1.75rem);
	margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.gtd-tl__headRule {
	flex: none;
	display: block;
	width: clamp(2.5rem, 6vw, 4.5rem);
	height: 3px;
	background: var(--s-red);
	transform-origin: left;
}

.gtd-tl__headTitle {
	margin: 0;
	/* !important answers css/type.css's `h2 { … !important }`. */
	font-size: clamp(1.35rem, 1.05rem + .95vw, 2.1rem) !important;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.03em;
	text-transform: uppercase;
	color: var(--s-ink) !important;
}

/* ── the line ────────────────────────────────────────────────── */

.gtd-tl__list {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: clamp(3rem, 7vw, 7rem);
}

.gtd-tl__spine {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 3px;
	margin-left: -1.5px;
	background: var(--s-red);
	transform: scaleY(1);
	transform-origin: top;
}

/* ── a station ───────────────────────────────────────────────── */

.gtd-tl__station {
	position: relative;
	list-style: none;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: clamp(3rem, 7vw, 7rem);
	align-items: center;
}

/* Odd stations put the words left, even ones put them right. */
/*
 * The panel moves toward the line; the TYPE never does. Right-aligned body
 * copy gives every line a ragged left edge and makes the reader hunt for the
 * start of it — the same mistake the equipment rows made before P5l.
 */
.gtd-tl__station--a .gtd-tl__panel  { grid-column: 1; grid-row: 1; justify-self: end; }
.gtd-tl__station--a .gtd-tl__figure { grid-column: 2; grid-row: 1; }
.gtd-tl__station--b .gtd-tl__figure { grid-column: 1; grid-row: 1; }
.gtd-tl__station--b .gtd-tl__panel  { grid-column: 2; grid-row: 1; }

/*
 * The node sits ON the line, not near it. Square, because nothing on this site
 * is round.
 */
.gtd-tl__node {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--s-node);
	height: var(--s-node);
	margin: calc(var(--s-node) / -2) 0 0 calc(var(--s-node) / -2);
	background: var(--s-red);
	z-index: 1;
}

.gtd-tl__panel {
	min-width: 0;
	max-width: 46ch;
	text-align: left;
}

.gtd-tl__year {
	margin: 0 0 .35rem;
	font-size: clamp(2.6rem, 1.4rem + 3.9vw, 6.5rem) !important;
	font-weight: 900;
	line-height: .82;
	letter-spacing: -.05em;
	color: var(--s-red) !important;
	font-variant-numeric: tabular-nums;
}

.gtd-tl__title {
	margin: 0 0 clamp(.85rem, 1.8vw, 1.25rem);
	/* !important answers css/type.css's `h3 { … !important }`. */
	font-size: clamp(1.5rem, 1rem + 1.5vw, 2.9rem) !important;
	font-weight: 900;
	line-height: .96;
	letter-spacing: -.035em;
	text-transform: uppercase;
	color: var(--s-ink) !important;
	text-wrap: balance;
}

.gtd-tl__text p {
	margin: 0 0 1em;
	font-size: clamp(.98rem, .94rem + .28vw, 1.15rem) !important;
	line-height: 1.66;
	color: #23302f !important;
}

.gtd-tl__text p:last-child { margin-bottom: 0; }

.gtd-tl__text p { max-width: 100%; }

.gtd-tl__figure {
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: #e9ebeb;
}

.gtd-tl__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .8s var(--s-ease);
}

.gtd-tl__station:hover .gtd-tl__img { transform: scale(1.03); }

/* ═════════════════════════════════════════════════════════════
   THE MOMENT
   ═════════════════════════════════════════════════════════════ */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {

		@keyframes gtdTlDraw  { from { transform: scaleY(0); } to { transform: scaleY(1); } }
		@keyframes gtdTlNode  { from { transform: scale(0); }  to { transform: scale(1); } }
		@keyframes gtdTlFromA { from { opacity: 0; transform: translate3d(-38px, 0, 0); } to { opacity: 1; transform: none; } }
		@keyframes gtdTlFromB { from { opacity: 0; transform: translate3d( 38px, 0, 0); } to { opacity: 1; transform: none; } }

		/*
		 * The line draws as the section is scrolled through, top to bottom.
		 * The range runs from the list entering the lower part of the viewport
		 * to its bottom leaving the upper part, which is as close as a
		 * scroll-driven range gets to "while you are reading it".
		 */
		/*
		 * `cover`, not `entry`/`exit`. This list is ~5,500px tall against a
		 * ~1,250px viewport, and an element taller than the viewport can never
		 * finish "entering" it — so an `entry 85%` range never resolves and the
		 * line sat at scaleY(0) for ever. `cover` is defined for any height:
		 * from the moment the section appears to the moment it is gone.
		 */
		.gtd-tl__spine {
			animation: gtdTlDraw linear both;
			animation-timeline: view();
			animation-range: cover 10% cover 90%;
		}

		.gtd-tl__node {
			animation: gtdTlNode linear both;
			animation-timeline: view();
			animation-range: entry 45% cover 8%;
		}

		/* Each station arrives from the side it sits on. */
		.gtd-tl__station--a .gtd-tl__panel,
		.gtd-tl__station--b .gtd-tl__figure {
			animation: gtdTlFromA linear both;
			animation-timeline: view();
			animation-range: entry 25% cover 12%;
		}
		.gtd-tl__station--a .gtd-tl__figure,
		.gtd-tl__station--b .gtd-tl__panel {
			animation: gtdTlFromB linear both;
			animation-timeline: view();
			animation-range: entry 25% cover 12%;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.gtd-tl__img { transition: none !important; }
}

/* ═════════════════════════════════════════════════════════════
   SMALLER SCREENS
   The line moves to the left edge and every station hangs off
   it the same way — alternating sides on a phone is just
   inconsistent indenting.
   ═════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
	.gtd-tl__list { gap: clamp(2.5rem, 6vw, 4rem); }

	.gtd-tl__spine { left: 7px; margin-left: 0; }

	.gtd-tl__station,
	.gtd-tl__station--a,
	.gtd-tl__station--b {
		grid-template-columns: minmax(0, 1fr);
		padding-left: clamp(2rem, 8vw, 3.25rem);
		row-gap: clamp(1.25rem, 3vw, 1.75rem);
	}

	.gtd-tl__station--a .gtd-tl__panel,
	.gtd-tl__station--b .gtd-tl__panel {
		grid-column: 1;
		grid-row: 1;
		text-align: left;
	}
	.gtd-tl__station--a .gtd-tl__figure,
	.gtd-tl__station--b .gtd-tl__figure {
		grid-column: 1;
		grid-row: 2;
	}

	.gtd-tl__station--a .gtd-tl__text p { margin-left: 0; }
	.gtd-tl__text p { max-width: 100%; }

	.gtd-tl__node {
		top: .55em;
		left: 7px;
		--s-node: 14px;
	}
}