/* ==========================================================================
   About LGE — company timeline
   template-parts/lge-about-timeline.php, driven by assets/js/lge-about-timeline.js
   ==========================================================================
   Static (default): the milestones stand as a grid. This is what shows with
   no script, with reduced motion, and in a window too short to pin.

   Pinned (.is-pinned, added by the script): the stage holds under the menu
   while the page scrolls through the section, and the track pans left. The
   milestones sit in one row under a ground line. Above it the script draws
   a street in line art (.lge-timeline__sky): a crane puts up one building
   per milestone, with that year's story around it in yellow, each finished
   just as the yellow fill along the line reaches its year. The words lead:
   the year being built is repeated large beside the heading (.lge-timeline__card)
   and lit in the row, and the drawing stays a step quieter than the type.
   -------------------------------------------------------------------------- */

.lge-timeline {
	--tl-step: clamp(220px, 21vw, 300px);
	--tl-stem: clamp(14px, 3vh, 32px);
	--tl-dot: 12px;
}

.lge-timeline .lge-h-section { color: var(--lge-white); }

.lge-timeline__head .lge-eyebrow {
	display: block;
	margin-bottom: 18px;
}

/* The large caption only exists in the pinned layout. */
.lge-timeline__card { display: none; }

/* --------------------------------------------------------------------------
   Static grid
   -------------------------------------------------------------------------- */

.lge-timeline__viewport {
	box-sizing: border-box;
	max-width: var(--lge-max);
	margin: clamp(32px, 3.6vw, 52px) auto 0;
	padding: 0 var(--lge-gutter);
}

.lge-timeline__track {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
	gap: clamp(32px, 3.4vw, 48px) clamp(20px, 2.4vw, 36px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lge-timeline__event {
	position: relative;
	margin: 0;
	padding: 24px 0 0;
	border-top: 1px solid var(--lge-rule-on-dark);
}

/* The dot. */
.lge-timeline__event::after {
	content: "";
	position: absolute;
	top: calc(var(--tl-dot) / -2);
	left: 0;
	width: var(--tl-dot);
	height: var(--tl-dot);
	border-radius: 50%;
	background: var(--lge-yellow);
}

.lge-timeline__year {
	display: block;
	margin-bottom: 10px;
	font-family: var(--lge-font-display);
	font-weight: 600;
	font-size: clamp(36px, min(4.2vw, 6.4vh), 60px);
	line-height: 1;
	letter-spacing: -0.012em;
	font-variant-numeric: tabular-nums lining-nums;
	color: var(--lge-white);
	transition: color .3s var(--lge-ease);
}

.lge-timeline__text {
	margin: 0;
	max-width: 26ch;
	font-family: var(--lge-font-body);
	font-size: 16px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.85);
	transition: color .3s var(--lge-ease);
}

/* --------------------------------------------------------------------------
   Pinned
   -------------------------------------------------------------------------- */

/* The About page lets #page clip instead of scroll (lge-about-nav.php), so
   the stage below can stick under the main menu and the About tab bar. */

.lge-timeline.is-pinned {
	padding: 0;
	overflow: visible;
}

.lge-timeline.is-pinned .lge-timeline__stage {
	position: sticky;
	top: var(--tl-top, var(--lge-nav-h));
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--tl-top, var(--lge-nav-h)));
	height: calc(100svh - var(--tl-top, var(--lge-nav-h)));
	padding: clamp(28px, 6vh, 72px) 0 clamp(24px, 5vh, 56px);
	overflow: hidden;
}

/* .lge-wrap centres itself with auto margins, which in a flex column would
   also shrink it to its text; keep it the full content width. The heading
   sits left and the year being built right, on one baseline. */
.lge-timeline.is-pinned .lge-timeline__head {
	box-sizing: border-box;
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(20px, 4vw, 72px);
}

/* The year being built. Its caption box is always three lines tall, so the
   head (and with it the ground line the drawing is measured to) never
   changes height from one year to the next. */
.lge-timeline.is-pinned .lge-timeline__card {
	display: grid;
	grid-template-columns: auto minmax(0, 26ch);
	column-gap: clamp(14px, 1.4vw, 22px);
	align-items: end;
	flex: 0 1 auto;
	min-width: 0;
}

.lge-timeline__count {
	grid-column: 1 / -1;
	margin-bottom: 10px;
	font-family: var(--lge-font-body);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.14em;
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, 0.6);
}

.lge-timeline__card-year {
	font-family: var(--lge-font-display);
	font-weight: 600;
	font-size: clamp(44px, min(5.2vw, 8.4vh), 80px);
	line-height: 0.9;
	letter-spacing: -0.012em;
	font-variant-numeric: tabular-nums lining-nums;
	color: var(--lge-yellow);
}

.lge-timeline__card-text {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: calc(4em * 1.3);
	font-family: var(--lge-font-body);
	font-size: clamp(17px, 1.5vw, 22px);
	line-height: 1.3;
	color: var(--lge-white);
}

.lge-timeline__card.is-changing {
	animation: lge-tl-card .5s var(--lge-ease) both;
}

@keyframes lge-tl-card {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

/* Below desktop the row carries the words; the card keeps only the count. */
@media (max-width: 1023px) {
	.lge-timeline.is-pinned .lge-timeline__card { display: block; flex: none; }
	.lge-timeline__card-year,
	.lge-timeline__card-text { display: none; }
	.lge-timeline__count { display: block; margin: 0 0 6px; white-space: nowrap; }
}

.lge-timeline.is-pinned .lge-timeline__viewport {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	max-width: none;
	margin: clamp(16px, 3vh, 40px) 0 0;
	padding: 0;
}

/* One row of milestones under the ground line; the drawing fills the rest. */
.lge-timeline.is-pinned .lge-timeline__track {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	box-sizing: border-box;
	width: max-content;
	padding: 0 var(--tl-pad-r, var(--lge-gutter)) 0 var(--tl-pad-l, var(--lge-gutter));
	grid-template-columns: none;
	grid-template-rows: minmax(0, 1fr) auto;
	grid-auto-columns: var(--tl-step);
	gap: 0;
	will-change: transform;
}

/* The ground line, and the yellow fill that runs along it to the build front. */
.lge-timeline.is-pinned .lge-timeline__track::before,
.lge-timeline.is-pinned .lge-timeline__track::after {
	content: "";
	position: absolute;
	top: calc(var(--tl-ground, 60%) - 0.5px);
	left: 0;
	right: 0;
	height: 1px;
	background: rgba(255, 255, 255, 0.22);
	pointer-events: none;
}

.lge-timeline.is-pinned .lge-timeline__track::after {
	top: calc(var(--tl-ground, 60%) - 1px);
	height: 2px;
	background: var(--lge-yellow);
	transform: scaleX(var(--tl-fill, 0));
	transform-origin: 0 50%;
}

/* Milestones still to come are quieter, finished ones a little brighter,
   and the year being built is at full strength with a halo on its dot. */
.lge-timeline.is-pinned .lge-timeline__event {
	z-index: 1;
	grid-row: 2;
	grid-column: var(--col);
	padding: calc(var(--tl-stem) + 16px) 28px 0 0;
	border: 0;
	opacity: 0.55;
	transition: opacity .45s var(--lge-ease);
}

/* The stem from the line down to the year. */
.lge-timeline.is-pinned .lge-timeline__event::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: var(--tl-stem);
	background: rgba(255, 255, 255, 0.32);
}

/* The dot on the line: hollow until the fill reaches it. */
.lge-timeline.is-pinned .lge-timeline__event::after {
	left: calc(var(--tl-dot) / -2 + 0.5px);
	background: var(--lge-cool-black);
	box-shadow: inset 0 0 0 2px var(--lge-yellow);
	transition: background-color .3s var(--lge-ease), box-shadow .3s var(--lge-ease);
}

.lge-timeline.is-pinned .lge-timeline__event.is-reached { opacity: 0.72; }
.lge-timeline.is-pinned .lge-timeline__event.is-reached::after { background: var(--lge-yellow); }
.lge-timeline.is-pinned .lge-timeline__event.is-current { opacity: 1; }
.lge-timeline.is-pinned .lge-timeline__event.is-current .lge-timeline__year { color: var(--lge-yellow); }
.lge-timeline.is-pinned .lge-timeline__event.is-current .lge-timeline__text { color: var(--lge-white); }
.lge-timeline.is-pinned .lge-timeline__event.is-current::after {
	box-shadow: inset 0 0 0 2px var(--lge-yellow), 0 0 0 6px rgba(253, 175, 63, 0.22);
}

/* --------------------------------------------------------------------------
   The street (drawn by the script, pinned layout only)
   --------------------------------------------------------------------------
   Every stroke has pathLength 1 and its own window (--s to --e) of its
   building's progress (--b); it draws itself across that window. A
   building is soft yellow while it goes up and settles to a quiet white
   when done; its frame fades back once the walls close it in. The year's
   own story stays yellow. */

.lge-timeline__sky {
	position: absolute;
	top: 0;
	left: 0;
	overflow: visible;
	pointer-events: none;
}

.lge-timeline__sky path {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.25;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.lge-timeline__sky .bld {
	color: rgba(255, 255, 255, 0.42);
	transition: color .6s var(--lge-ease);
}

.lge-timeline__sky .bld.is-building { color: rgba(253, 175, 63, 0.82); }

.lge-timeline__sky .ln {
	stroke-dasharray: 1 1;
	stroke-dashoffset: calc(1 - clamp(0, (var(--b, 0) - var(--s)) / (var(--e) - var(--s)), 1));
}

/* The design before the build: a faint dashed outline of the building,
   gone once its walls are up. */
.lge-timeline__sky .plan {
	stroke-dasharray: 3 5;
	opacity: calc(0.32 * (1 - clamp(0, (var(--b, 0) - 0.3) / 0.4, 1)));
}

/* The walls fill as they close, hiding the frame and the backdrop behind. */
.lge-timeline__sky path.shell {
	fill: var(--lge-cool-black);
	fill-opacity: clamp(0, (var(--b, 0) - 0.4) / 0.3, 1);
}

.lge-timeline__sky .ph-scene { opacity: 0.4; }

/* Each year's own story stays yellow once its building is done. */
.lge-timeline__sky .accent { color: rgba(253, 175, 63, 0.92); }

.lge-timeline__sky .ph-frame {
	opacity: calc(1 - 0.7 * clamp(0, (var(--b, 0) - 0.55) / 0.3, 1));
}

.lge-timeline__sky text {
	fill: currentColor;
	font-family: var(--lge-font-body);
	font-weight: 700;
	letter-spacing: 0.08em;
	opacity: clamp(0, (var(--b, 0) - var(--s)) / (var(--e) - var(--s)), 1);
}

.lge-timeline__sky .crane { color: rgba(253, 175, 63, 0.78); }

@media (max-height: 760px) {
	.lge-timeline__text {
		font-size: 15px;
		line-height: 1.4;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lge-timeline__event,
	.lge-timeline__event::after,
	.lge-timeline__year,
	.lge-timeline__text { transition: none; }
	.lge-timeline__card.is-changing { animation: none; }
}

/* A year with more than one milestone: one line each (2014, 2023). */
.lge-timeline__line { display: block; }
.lge-timeline__line + .lge-timeline__line { margin-top: .4em; }