/*
 * Slide indicator — counter "01 / 05" + dual progress bars.
 * Used by the hero slideshow.
 */

.liv-slide-indicator {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--liv-paper);
}

.liv-slide-indicator__num {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--4xl);
	font-weight: 500;
	line-height: 1;
}

.liv-slide-indicator__total {
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	color: var(--liv-ink-300);
}

.liv-slide-indicator__bars {
	display: flex;
	gap: 4px;
	margin-top: 0.75rem;
	width: clamp(200px, 22vw, 320px);
}
.liv-slide-indicator__bar {
	flex: 1;
	height: 2px;
	background: var(--liv-ink-500);
	border: 0;
	position: relative;
	overflow: hidden;
}
.liv-slide-indicator__bar[data-active="true"]::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--liv-leaf-500);
	transform-origin: left center;
	animation: liv-bar-fill var(--liv-slide-duration, 6s) linear forwards;
}
.liv-slide-indicator__bar[data-played="true"] { background: var(--liv-leaf-500); }

@keyframes liv-bar-fill {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
	.liv-slide-indicator__bar[data-active="true"]::after { animation: none; transform: scaleX(1); }
}