/* ============================================================
   LS Timeline — widget styles
   Reproduces the site's vertical "story" timeline (About page):
   a thin connecting line with a small ring marker per item, each
   carrying a label, a title and a description. Scoped entirely
   under .ls-timeline so it never collides with the theme or other
   widgets. Every visual knob is a CSS custom property so the
   Style tab can drive it without extra selectors.
   ============================================================ */

.ls-timeline {
	--ls-timeline-line: rgba(244, 246, 245, .14);
	--ls-timeline-marker-size: 15px;
	--ls-timeline-marker-border: 2px;
	--ls-timeline-marker-color: #1A73E8;
	--ls-timeline-marker-fill: #05090D;
	--ls-timeline-item-gap: 44px;

	position: relative;
	max-width: 760px;
}

/* the connecting line, centered through the middle of the marker
   regardless of marker size */
.ls-timeline::before {
	content: "";
	position: absolute;
	left: calc(var(--ls-timeline-marker-size) / 2 - .5px);
	top: 8px;
	bottom: 8px;
	width: 1px;
	background: var(--ls-timeline-line);
}

.ls-timeline__item {
	position: relative;
	padding: 0 0 var(--ls-timeline-item-gap) calc(var(--ls-timeline-marker-size) + 29px);
}

.ls-timeline__item:last-child {
	padding-bottom: 0;
}

.ls-timeline__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: var(--ls-timeline-marker-size);
	height: var(--ls-timeline-marker-size);
	border-radius: 50%;
	background: var(--ls-timeline-marker-fill);
	border: var(--ls-timeline-marker-border) solid var(--ls-timeline-marker-color);
}

.ls-timeline__label {
	font-family: var(--ls-font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
	font-size: 11.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #E8A33D;
}

.ls-timeline__title {
	font-family: var(--ls-font-display, "Fraunces", Georgia, "Times New Roman", serif);
	font-size: 21px;
	font-weight: 500;
	color: #FFFFFF;
	margin: 8px 0 8px;
	line-height: 1.25;
}

.ls-timeline__desc {
	color: rgba(244, 246, 245, .62);
	font-size: 14.5px;
	line-height: 1.7;
	font-weight: 300;
	max-width: 520px;
	margin: 0;
}

/* ---------- scroll-in reveal, staggered per item ---------- */
/* JS sets --ls-d (a per-item delay) inline and toggles .in once the
   item enters the viewport; without JS/IntersectionObserver support
   items are simply visible from the start (see script.js fallback). */
.ls-timeline__item--reveal {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity .9s cubic-bezier(.22, .88, .3, 1), transform .9s cubic-bezier(.22, .88, .3, 1);
	transition-delay: var(--ls-d, 0s);
}

.ls-timeline__item--reveal.in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.ls-timeline__item--reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}