/**
 * BV Core — horizontal milestone timeline.
 * Values from the Blue Vineyard Figma design.
 *
 * Base styles are the mobile / no-JS / reduced-motion experience: a native
 * horizontal swipe strip. When GSAP is active the script adds
 * `.bv-timeline--pinned` and drives the track's transform instead.
 */

.bv-timeline {
	--bv-blue: #2455dd;
	--bv-blue-lighter: #d3ddf8;
	--bv-blue-light: #91aaee;
	--bv-card: #eaf0ff;
	--bv-ink: #212b36;
	--bv-muted: #637381;
	--bv-line: #e5e8eb;

	color: var(--bv-ink);
	font-family: "Archivo", inherit;
}

.bv-timeline *,
.bv-timeline *::before,
.bv-timeline *::after {
	box-sizing: border-box;
}

/* Viewport / track. */

.bv-timeline__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.bv-timeline__viewport::-webkit-scrollbar {
	display: none;
}

.bv-timeline__track {
	display: inline-flex;
	gap: 18px;
	padding: 4px;
	will-change: transform;
}

/* Card. */

.bv-timeline__card {
	flex: 0 0 450px;
	width: 450px;
	max-width: 84vw;
	min-height: 277px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 20px;
	border-radius: 24px;
	background: var(--bv-card);
	scroll-snap-align: start;
	transition: background-color 0.4s ease, color 0.4s ease;
}

.bv-timeline__card-head {
	display: flex;
	align-items: center;
	gap: 16px;
}

.bv-timeline__icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	color: var(--bv-blue-light);
	transition: color 0.4s ease;
}

.bv-timeline__icon svg {
	display: block;
	width: 32px;
	height: 32px;
}

.bv-timeline__title {
	margin: 0;
	font-size: 24px;
	line-height: 36px;
	font-weight: 500;
	color: var(--bv-ink);
	transition: color 0.4s ease;
}

.bv-timeline__desc {
	margin: 0;
	font-size: 20px;
	line-height: 30px;
	font-weight: 400;
	color: var(--bv-muted);
	transition: color 0.4s ease;
}

/* Active milestone. */

.bv-timeline__card.is-active {
	background: var(--bv-blue);
}

.bv-timeline__card.is-active .bv-timeline__title {
	color: #fff;
}

.bv-timeline__card.is-active .bv-timeline__desc {
	color: var(--bv-blue-lighter);
}

.bv-timeline__card.is-active .bv-timeline__icon {
	color: #fff;
}

/* Progress line + dots. */

.bv-timeline__progress {
	position: relative;
	margin-top: 40px;
	padding: 0 4px;
}

.bv-timeline__line {
	position: absolute;
	top: 6px;
	left: 4px;
	right: 4px;
	height: 4px;
	border-radius: 999px;
	background: var(--bv-line);
	overflow: hidden;
}

.bv-timeline__line-fill {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: var(--bv-blue);
	transition: width 0.3s ease;
}

.bv-timeline__dots {
	position: relative;
	display: flex;
	justify-content: space-between;
}

.bv-timeline__dot {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--bv-line);
	transition: background-color 0.3s ease, transform 0.3s ease;
}

.bv-timeline__dot.is-active {
	background: var(--bv-blue);
}

/* GSAP pinned mode (desktop) — natural height, no full-screen layout. */

.bv-timeline--pinned .bv-timeline__viewport {
	overflow: hidden;
	scroll-snap-type: none;
}

.bv-timeline--pinned .bv-timeline__track {
	transform: translateX(0);
	will-change: transform;
}