/* The service timeline bridges the hero into the first connected step. */
.live-bar-partial {
	--live-bar-partial-accent: var(--color-blueprint);
	display: block;
	margin: 0 0 0 var(--service-process-indent);
	padding: 1rem;

	/* Reset timeline positioning so each service callout can occupy normal document flow. */
	.live-bar__callout {
		position: relative;
		inset: auto;
		left: auto;
		display: grid;
		width: 100%;
		grid-template-columns: max-content minmax(0, 1fr);
		align-items: center;
		column-gap: 1rem;
		transform: none;

		.live-bar__number {
			justify-self: start;
		}
	}

	.live-bar__callout--test-fit {
		--live-bar-accent: var(--color-jasmine);
	}

	.live-bar__callout--enrollment {
		--live-bar-accent: var(--color-burnt-sienna);
	}

	&--test-fit {
		--live-bar-partial-accent: var(--color-jasmine--darker);
	}

	&--enrollment {
		--live-bar-partial-accent: var(--color-burnt-sienna);
	}
}

.live-bar,
.live-bar-partial {
	.live-bar__label {
		margin: 0;
		color: var(--color-porcelain);
		font-size: clamp(0.68rem, 3vw, 0.82rem);
		font-weight: 800;
		letter-spacing: 0.025em;
		line-height: 1.1;
		text-transform: uppercase;
	}

	.live-bar__number {
		position: relative;
		z-index: 2;
		display: block;
		width: max-content;
		justify-self: end;
		margin: 0;
		color: var(--color-jasmine);
		font-size: clamp(4rem, 20vw, 5.25rem);
		font-weight: 820;
		letter-spacing: -0.09em;
		line-height: 0.72;
		text-align: right;
	}

	.live-bar__unit {
		display: block;
		margin-top: 0.35rem;
		color: var(--color-jasmine);
		font-size: clamp(0.72rem, 3.2vw, 0.9rem);
		font-weight: 800;
		letter-spacing: 0.055em;
		line-height: 1;
		text-transform: uppercase;
	}

	/* Each callout owns a live timestamp for its independently updated service level. */
	.live-bar__updated {
		display: flex;
		align-items: center;
		gap: 0.35rem;
		margin-top: 0.55rem;
		color: var(--color-porcelain);
		font-size: clamp(0.48rem, 2.2vw, 0.58rem);
		font-weight: 700;
		line-height: 1.1;
		text-transform: uppercase;
	}

	/* The pulsing dot keeps each timestamp feeling current without adding visual noise. */
	.live-bar__updated::before {
		width: 0.42rem;
		height: 0.42rem;
		flex: 0 0 auto;
		border-radius: 50%;
		background: var(--color-porcelain);
		content: "";
		animation: live-bar-pulse 3s ease-in-out infinite;
	}

	/* The selected load sequence reveals the number before its supporting copy. */
	.live-bar__number {
		opacity: 0;
		transform: translateX(-0.5rem) scale(0.72);
		transform-origin: right center;
		animation: live-bar-number-hop-in 620ms cubic-bezier(0.16, 1, 0.3, 1) 1250ms forwards;
	}

	.live-bar__callout--enrollment .live-bar__number {
		animation: live-bar-number-drop-in 720ms cubic-bezier(0.16, 1, 0.3, 1) 1250ms forwards;
	}

	.live-bar__callout-body {
		position: relative;
		z-index: 1;
		display: flex;
		min-width: 0;
		flex-direction: column;
		align-items: flex-start;
		opacity: 0;
		transform: translateX(-2rem);
		animation: live-bar-copy-in 650ms cubic-bezier(0.16, 1, 0.3, 1) 1900ms forwards;
	}
}

.live-bar {
	position: relative;
	padding: 1.15rem 1.25rem 1.35rem;
	color: var(--color-porcelain);
	background-color: var(--color-blueprint);
	overflow: visible;
	margin: 1rem 0 0 0;

	.live-bar__callout {
		position: absolute;
		z-index: 4;
		left: 50%;
		display: grid;
		width: min(72vw, 17rem);
		min-width: 0;
		grid-template-columns: 2rem minmax(0, 1fr);
		align-items: center;
		column-gap: 1rem;
		transform: translateX(-1rem);
	}

	.live-bar__callout--test-fit {
		--live-bar-accent: var(--color-jasmine);
		bottom: calc(100% + 0.55rem);
	}

	.live-bar__callout--enrollment {
		--live-bar-accent: var(--color-jasmine);
		top: calc(100% + 0.55rem);
	}

	/* Opposing marker-owned leaders separate nearby dates without crossing. */
	.live-bar__timeline {
		position: relative;
		padding: 4.45rem 0 4.45rem;
	}

	.live-bar__ticks {
		position: relative;
		display: grid;
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		grid-template-rows: auto;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.live-bar__ticks::before {
		position: absolute;
		top: 0.5rem;
		right: 0;
		left: 0;
		height: 2px;
		background: var(--color-porcelain);
		content: "";
		transform: scaleX(0);
		transform-origin: left center;
		animation: live-bar-rule-draw 800ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}

	.live-bar__tick {
		position: relative;
		display: flex;
		min-width: 0;
		flex-direction: column;
		align-items: center;
		color: var(--color-porcelain);
		font-size: clamp(0.58rem, 2.8vw, 0.72rem);
		font-weight: 750;
		line-height: 1;
	}

	.live-bar__tick::before {
		width: 2px;
		height: 1rem;
		background: var(--color-porcelain);
		content: "";
		opacity: 0;
		transform: scaleY(0);
		transform-origin: bottom center;
		animation: live-bar-measure-in 320ms cubic-bezier(0.22, 1, 0.36, 1) 650ms forwards;
	}

	.live-bar__tick--test-fit {
		color: var(--color-porcelain);
	}

	.live-bar__tick--enrollment {
		color: var(--color-porcelain);
	}

	.live-bar__tick-label {
		position: relative;
		z-index: 3;
		margin-top: 0.35rem;
		padding: 0 0.1rem;
		opacity: 0;
		transform: translateY(-0.25rem);
		animation: live-bar-measure-in 320ms cubic-bezier(0.22, 1, 0.36, 1) 650ms forwards;
	}

	/* A milestone group stays centered even if two services share the same day. */
	.live-bar__milestones {
		position: absolute;
		z-index: 2;
		top: 0;
		left: 50%;
		display: flex;
		gap: 0.15rem;
		transform: translateX(-50%);
		opacity: 0;
		animation: live-bar-marker-in 420ms cubic-bezier(0.22, 1, 0.36, 1) 1050ms forwards;
	}

	.live-bar__marker {
		position: relative;
		width: 1.1rem;
		height: 1.1rem;
		flex: 0 0 auto;
		border: 2px solid currentColor;
		border-radius: 50%;
		background: var(--color-porcelain);
	}

	.live-bar__marker::before {
		position: absolute;
		left: 50%;
		width: 1px;
		background: var(--color-porcelain);
		content: "";
	}

	.live-bar__marker::after {
		position: absolute;
		inset: 0.2rem;
		border-radius: 50%;
		background: currentColor;
		content: "";
	}

	.live-bar__marker--test-fit {
		color: var(--color-porcelain);
	}

	.live-bar__marker--test-fit::before {
		bottom: calc(100% - 1px);
		height: 0.75rem;
		transform: scaleY(0);
		transform-origin: bottom center;
		animation: live-bar-leader-hop 360ms cubic-bezier(0.16, 1, 0.3, 1) 1000ms forwards;
	}

	.live-bar__marker--enrollment {
		color: var(--color-porcelain);
	}

	.live-bar__marker--enrollment::before {
		top: calc(100% - 1px);
		height: 1.45rem;
		transform: scaleY(0);
		transform-origin: top center;
		animation: live-bar-leader-drop 520ms cubic-bezier(0.16, 1, 0.3, 1) 980ms forwards;
	}

}

@keyframes live-bar-pulse {
	0%,
	100% {
		box-shadow: 0 0 0 0 color-mix(in oklch, var(--color-jasmine), transparent 45%);
	}
	50% {
		box-shadow: 0 0 0 0.25rem color-mix(in oklch, var(--color-jasmine), transparent 100%);
	}
}

/* These keyframes move the timeline through point, measure, label, and live. */
@keyframes live-bar-rule-draw {
	to {
		transform: scaleX(1);
	}
}

@keyframes live-bar-measure-in {
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes live-bar-marker-in {
	0% {
		opacity: 0;
		transform: translateX(-50%) scale(0.55);
	}
	65% {
		opacity: 1;
		transform: translateX(-50%) scale(1.08);
	}
	100% {
		opacity: 1;
		transform: translateX(-50%) scale(1);
	}
}

@keyframes live-bar-leader-hop {
	0% {
		transform: scaleY(0);
	}
	75% {
		transform: scaleY(1.12);
	}
	100% {
		transform: scaleY(1);
	}
}

@keyframes live-bar-leader-drop {
	0% {
		transform: scaleY(0);
	}
	70% {
		transform: scaleY(1.12);
	}
	100% {
		transform: scaleY(1);
	}
}

@keyframes live-bar-number-hop-in {
	0% {
		opacity: 0;
		transform: translateY(1.25rem) translateX(-0.5rem) scale(0.72);
	}
	58% {
		opacity: 1;
		transform: translateY(-0.28rem) translateX(0) scale(1.04);
	}
	78% {
		transform: translateY(0.1rem) translateX(0) scale(0.98);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

@keyframes live-bar-number-drop-in {
	0% {
		opacity: 0;
		transform: translateY(-1.25rem) translateX(-0.5rem) scale(0.72, 0.78);
	}
	38% {
		opacity: 1;
		transform: translateY(0.45rem) translateX(0) scale(1, 1.08);
	}
	62% {
		transform: translateY(-0.12rem) translateX(0) scale(1, 0.96);
	}
	82% {
		transform: translateY(0.08rem) translateX(0) scale(1, 1.03);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

@keyframes live-bar-copy-in {
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.live-bar,
	.live-bar-partial {
		.live-bar__updated::before {
			animation: none;
		}

		.live-bar__ticks::before,
		.live-bar__tick::before,
		.live-bar__tick-label,
		.live-bar__milestones,
		.live-bar__marker--test-fit::before,
		.live-bar__marker--enrollment::before,
		.live-bar__number,
		.live-bar__callout-body {
			opacity: 1;
			transform: none;
			animation: none;
		}
	}
}