/* Ampera · Laiko juosta / Projekto ritmas (Figma 1103:1957 desktop, 1103:6853 mobile).
   Desktop: horizontal two-tone axis (past = juoda, future = #B3B5B8) with milestone
   capsules alternating above/below, 1px stems + 5px ticks, 14px endpoint squares
   and big year labels at the ends. Mobile: vertical left rail, stacked capsules
   with 32px connectors, everything dark.
   Non-token colors from Figma (no theme.json preset exists): #F0F4FF capsule
   background, #B3B5B8 future/muted grey. */

/* Animatable capsule marker width. Registering it lets the finale "opening"
   interpolate --tl-mw smoothly, and because the marker width AND the capsule
   anchor both derive from it, the frame blooms symmetrically from the tick
   (chip eases left, label eases right) with the stem staying pinned. Browsers
   without @property just snap to the final width — still fully functional. */
@property --tl-mw {
	syntax: "<length>";
	inherits: true;
	initial-value: 74px;
}

.ampera-timeline {
	padding-block: clamp(80px, 6.67vw, 96px);
	color: var(--wp--preset--color--juoda);
}

.ampera-timeline__inner {
	max-width: 1296px;
	margin-inline: auto;
	padding-inline: 72px;
}

.ampera-timeline__heading {
	margin: 0 0 clamp(56px, 5.56vw, 80px);
	text-align: center;
	font-family: var(--wp--preset--font-family--telegraf);
	font-weight: 800;
	font-size: clamp(30px, 4vw, 48px);
	line-height: 1.3;
	color: var(--wp--preset--color--juoda);
}

.ampera-timeline__placeholder {
	opacity: 0.5;
	text-align: center;
}

/* ---- Layout frame (desktop anchors at 1440 vw / 1296 inner) ----
   Entry capsule 96 tall; axis sits 76px below the top entry row; bottom entry
   row starts 75px below the axis (Figma y0 / y172 / y247). */
.ampera-timeline__list {
	position: relative;
	--tl-entry-h: clamp(80px, 6.67vw, 96px);
	--tl-chip-w: clamp(100px, 9.17vw, 132px);
	--tl-marker: clamp(28px, 2.57vw, 37px); /* client 2026-08-03 (PDF task 3): blue blocks 50% smaller */
	--tl-axis: calc(var(--tl-entry-h) + 76px);
	height: calc(var(--tl-axis) + 75px + var(--tl-entry-h));
}

/* Axis rail: muted (future) base line + dark past segment that draws on. */
.ampera-timeline__rail {
	position: absolute;
	left: 0;
	right: 0;
	top: var(--tl-axis);
	height: 1px;
	background: #b3b5b8;
}

.ampera-timeline__rail-past {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: var(--tl-split, 100%);
	background: var(--wp--preset--color--juoda);
}

/* Endpoint squares (14px, centred on the axis). */
.ampera-timeline__cap {
	position: absolute;
	width: 14px;
	height: 14px;
	top: calc(var(--tl-axis) - 6.5px);
	background: var(--wp--preset--color--juoda);
}

.ampera-timeline__cap--start {
	left: 60px;
}

.ampera-timeline__cap--end {
	right: 61px;
	background: #b3b5b8;
}

/* Endpoint year labels: start below-left (dark), end above-right (muted). */
.ampera-timeline__year {
	position: absolute;
	margin: 0;
	font-family: var(--wp--preset--font-family--telegraf);
	font-weight: 800;
	font-size: clamp(24px, 2.5vw, 36px);
	line-height: clamp(32px, 2.78vw, 40px);
	white-space: nowrap;
	color: var(--wp--preset--color--juoda);
}

.ampera-timeline__year--start {
	left: 32px;
	top: calc(var(--tl-axis) + 17px);
}

.ampera-timeline__year--end {
	right: 48px;
	top: calc(var(--tl-axis) - 16px - clamp(32px, 2.78vw, 40px));
	color: #b3b5b8;
}

/* ---- Milestone entries ---- */
.ampera-timeline__entries {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ampera-timeline__entry {
	position: absolute;
	display: flex;
	align-items: center;
	height: var(--tl-entry-h);
	left: var(--tl-x, 50%);
	/* Shift so the marker centre (chip + half marker) sits exactly on the tick. */
	margin-left: calc(-1 * var(--tl-anchor));
}

.ampera-timeline__entry--has-photo {
	--tl-mw: var(--tl-marker);
	--tl-anchor: calc(var(--tl-chip-w) + var(--tl-mw) / 2);
}

.ampera-timeline__entry--has-bar {
	--tl-anchor: calc(var(--tl-chip-w) + 3px);
}

.ampera-timeline__entry--above {
	top: 0;
}

.ampera-timeline__entry--below {
	top: calc(var(--tl-axis) + 75px);
}

/* Future milestones: capsule + marker fade to 50% (Figma group opacity); the
   stem/tick pseudos stay full-strength but muted grey, as in the design. */
.ampera-timeline__entry--future > .ampera-timeline__chip,
.ampera-timeline__entry--future > .ampera-timeline__marker {
	opacity: 0.5;
}

/* Stem: 1px vertical connector between capsule and axis (64px, small gaps). */
.ampera-timeline__entry::before {
	content: "";
	position: absolute;
	left: var(--tl-anchor);
	transform: translateX(-50%);
	width: 1px;
	height: 64px;
	background: var(--wp--preset--color--juoda);
}

.ampera-timeline__entry--above::before {
	top: calc(100% + 2px);
}

.ampera-timeline__entry--below::before {
	top: -66px;
}

/* Tick: 5px square on the axis under/over the marker centre. */
.ampera-timeline__entry::after {
	content: "";
	position: absolute;
	left: var(--tl-anchor);
	transform: translateX(-50%);
	width: 5px;
	height: 5px;
	background: var(--wp--preset--color--juoda);
}

.ampera-timeline__entry--above::after {
	top: calc(100% + 74px);
}

.ampera-timeline__entry--below::after {
	top: -77px;
}

.ampera-timeline__entry--future::before,
.ampera-timeline__entry--future::after {
	background: #b3b5b8;
}

/* ---- Capsule chips ---- */
.ampera-timeline__chip {
	box-sizing: border-box; /* Figma total width includes the inline padding. */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: var(--tl-chip-w);
	height: 100%;
	padding-inline: clamp(8px, 1.67vw, 24px);
	background: #f0f4ff;
	text-align: center;
	font-family: var(--wp--preset--font-family--telegraf);
	color: var(--wp--preset--color--juoda);
	flex-shrink: 0;
}

.ampera-timeline__chip--year {
	border-radius: var(--wp--custom--radius--pill) 0 0 var(--wp--custom--radius--pill);
}

.ampera-timeline__chip--label {
	border-radius: 0 var(--wp--custom--radius--pill) var(--wp--custom--radius--pill) 0;
	font-weight: 400;
	font-size: clamp(12px, 0.97vw, 14px);
	line-height: clamp(16px, 1.39vw, 20px);
}

.ampera-timeline__year-val {
	font-weight: 800;
	font-size: clamp(16px, 1.39vw, 20px);
	line-height: clamp(24px, 1.95vw, 28px);
	white-space: nowrap;
}

.ampera-timeline__quarter {
	font-weight: 800;
	font-size: clamp(12px, 0.97vw, 14px);
	line-height: clamp(16px, 1.39vw, 20px);
}

/* ---- Markers: icon block (active) or violet bar (future / no photo) ---- */
/* Open-stage marker: a violet block carrying the stage's Material Symbols
   icon (removed 2026-07-29, restored 2026-08-01 on the client's reversal).
   Same bloom choreography (--tl-mw animates the width). */
.ampera-timeline__marker--photo {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--tl-mw, var(--tl-marker));
	height: var(--tl-marker);
	background: var(--wp--preset--color--violetine);
	color: var(--wp--preset--color--juoda); /* icon ink on the violet block */
	overflow: hidden;
	flex-shrink: 0;
}

.ampera-timeline__marker--photo svg {
	width: clamp(24px, 2.23vw, 32px);
	height: clamp(24px, 2.23vw, 32px);
	flex-shrink: 0;
}

.ampera-timeline__marker--bar {
	width: 6px;
	height: var(--tl-marker);
	background: var(--wp--preset--color--violetine);
	flex-shrink: 0;
}

/* ---- Entrance choreography (animations.js adds .is-in to the LIST once, as a
   single trigger; every hidden state lives ONLY under html.ampera-motion, so
   no-JS / reduced-motion shows the final state instantly). The whole sequence is
   driven off that one trigger and timed by per-entry custom properties baked in
   render.php:
     1. the axis draws left-to-right;
     2. as its leading edge passes each tick (--tl-appear), that capsule surfaces
        CLOSED — stem, tick, year chip, label and the thin bar all together, so
        pills and stages appear in one left-to-right sequence synced to the line;
     3. THE OPENING (--tl-open): once the line is complete and every capsule has
        settled, the open (active) milestones bloom — each bar widens into its
        photo frame — in a quick left-to-right ripple. That final beat is the
        payoff the sequence builds toward. ---- */
@media (prefers-reduced-motion: no-preference) {
	/* Heading: slow settle. */
	html.ampera-motion .ampera-timeline__heading {
		transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
	}
	html.ampera-motion .ampera-timeline__heading:not(.is-in) {
		opacity: 0;
		transform: translateY(24px);
	}

	/* Axis: the whole rail (muted base + dark past segment inside it) draws
	   left-to-right in one stroke once the list enters the viewport. Its duration
	   must stay in sync with $tl_rail_dur in render.php (currently 1.9s). */
	html.ampera-motion .ampera-timeline__rail {
		transform-origin: left center;
		transition: transform 1.9s cubic-bezier(0.45, 0, 0.2, 1);
	}
	html.ampera-motion .ampera-timeline__list:not(.is-in) .ampera-timeline__rail {
		transform: scaleX(0);
	}

	/* Endpoint squares + big year labels ride the line: start square early,
	   end square + far year land as the line completes. */
	html.ampera-motion .ampera-timeline__cap,
	html.ampera-motion .ampera-timeline__year {
		transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
	}
	html.ampera-motion .ampera-timeline__cap--start,
	html.ampera-motion .ampera-timeline__year--start {
		transition-delay: 0.1s;
	}
	html.ampera-motion .ampera-timeline__cap--end,
	html.ampera-motion .ampera-timeline__year--end {
		transition-delay: 1.75s;
	}
	html.ampera-motion .ampera-timeline__list:not(.is-in) .ampera-timeline__cap,
	html.ampera-motion .ampera-timeline__list:not(.is-in) .ampera-timeline__year {
		opacity: 0;
	}

	/* Stem + tick branch off the axis exactly as the line passes the milestone
	   (--tl-appear), above-entries growing upward, below-entries downward. */
	html.ampera-motion .ampera-timeline__entry::before {
		transition: transform 0.6s cubic-bezier(0.33, 0, 0.2, 1);
		transition-delay: var(--tl-appear, 0s);
	}
	html.ampera-motion .ampera-timeline__entry--above::before {
		transform-origin: center bottom;
	}
	html.ampera-motion .ampera-timeline__entry--below::before {
		transform-origin: center top;
	}
	html.ampera-motion .ampera-timeline__list:not(.is-in) .ampera-timeline__entry::before {
		transform: translateX(-50%) scaleY(0);
	}
	html.ampera-motion .ampera-timeline__entry::after {
		transition: opacity 0.4s ease;
		transition-delay: var(--tl-appear, 0s);
	}
	html.ampera-motion .ampera-timeline__list:not(.is-in) .ampera-timeline__entry::after {
		opacity: 0;
	}

	/* Capsule (year chip + label + closed bar) surfaces together with its stem,
	   as the line reaches it. */
	html.ampera-motion .ampera-timeline__entry {
		transition:
			opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
			transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
		transition-delay: var(--tl-appear, 0s);
	}
	html.ampera-motion .ampera-timeline__list:not(.is-in) .ampera-timeline__entry {
		opacity: 0;
		transform: translateY(12px);
	}

	/* THE OPENING (finale): after the line completes and every capsule is in, the
	   active markers bloom on --tl-open. --tl-mw drives BOTH the marker width and
	   the capsule anchor, so the 6px violet bar (border-box: at 6px the 6px border
	   IS the bar) widens into its 74px frame symmetrically from the tick — the
	   year chip eases left, the label eases right — while the icon fades through.
	   The active entry keeps its appear transition (opacity/transform on
	   --tl-appear) and adds the width bloom on --tl-open. */
	html.ampera-motion .ampera-timeline__entry--has-photo {
		transition:
			opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--tl-appear, 0s),
			transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--tl-appear, 0s),
			--tl-mw 1s cubic-bezier(0.16, 1, 0.3, 1) var(--tl-open, 2s);
	}
	html.ampera-motion .ampera-timeline__list:not(.is-in) .ampera-timeline__entry--has-photo {
		--tl-mw: 6px;
	}
	html.ampera-motion .ampera-timeline__icon {
		transition: opacity 0.8s ease;
		transition-delay: calc(var(--tl-open, 2s) + 0.2s);
	}
	html.ampera-motion .ampera-timeline__list:not(.is-in) .ampera-timeline__icon {
		opacity: 0;
	}
}

/* ================= Mobile (Figma 1103:6853, 375 anchor) ================= */
@media (max-width: 900px) {
	.ampera-timeline__inner {
		padding-inline: 24px;
	}

	.ampera-timeline__heading {
		margin-bottom: 56px;
	}

	.ampera-timeline__list {
		--tl-entry-h: 80px;
		--tl-marker: 28px;
		--tl-chip-w: 100px;
		height: auto;
	}

	/* Vertical rail down the left edge; fully dark on mobile (rail-past spans
	   the whole line, drawing top-to-bottom). */
	.ampera-timeline__rail {
		left: 4px;
		right: auto;
		top: 32px;
		bottom: 32px;
		width: 1px;
		height: auto;
	}

	.ampera-timeline__rail-past {
		width: 100%;
	}

	.ampera-timeline__cap {
		width: 9px;
		height: 9px;
		left: 0;
		right: auto;
	}

	.ampera-timeline__cap--start {
		top: 48px;
	}

	.ampera-timeline__cap--end {
		top: auto;
		bottom: 48px;
		background: var(--wp--preset--color--juoda);
	}

	/* Year labels join the normal flow above/below the stack; both dark. */
	.ampera-timeline__year {
		position: static;
		display: block;
		font-size: 24px;
		line-height: 32px;
		color: var(--wp--preset--color--juoda);
	}

	.ampera-timeline__entries {
		display: flex;
		flex-direction: column;
		gap: 56px;
		margin: 57px 0 57px 51px;
	}

	.ampera-timeline__entry {
		position: relative;
		left: auto;
		margin-left: 0;
	}

	.ampera-timeline__entry--above,
	.ampera-timeline__entry--below {
		top: auto;
	}

	/* Connector: 32px horizontal line from the rail to the capsule. */
	.ampera-timeline__entry::before {
		left: -42px;
		top: calc(50% - 0.5px);
		transform: none;
		width: 32px;
		height: 1px;
	}

	/* Tick on the rail, centred on the entry. */
	.ampera-timeline__entry::after {
		left: -49px;
		top: calc(50% - 2.5px);
		transform: none;
	}

	/* Everything on the mobile rail is dark, future entries included. */
	.ampera-timeline__entry--future::before,
	.ampera-timeline__entry--future::after {
		background: var(--wp--preset--color--juoda);
	}
}

/* Mobile entrance: the vertical rail draws downward; connectors reach out. */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
	html.ampera-motion .ampera-timeline__rail {
		transform-origin: center top;
	}
	html.ampera-motion .ampera-timeline__entry--above::before,
	html.ampera-motion .ampera-timeline__entry--below::before {
		transform-origin: left center;
	}
	html.ampera-motion .ampera-timeline__list:not(.is-in) .ampera-timeline__entry::before {
		transform: scaleX(0);
	}
}