/**
 * Services route — cards, nav pills, scroll reveal, marquee
 * ---------------------------------------------------------------------------
 * Global tokens: `tokens/design-tokens.css`. Shared motion: `base/animations.css`.
 * Do not redefine `:root` here — it overrides the whole site when this sheet loads.
 */

/* --- Scroll reveal (JS adds `.visible` when in view) -------------------- */
.reveal {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
	opacity: 1;
	transform: translateY(0);
}
.reveal-delay-1 {
	transition-delay: 0.1s;
}
.reveal-delay-2 {
	transition-delay: 0.2s;
}
.reveal-delay-3 {
	transition-delay: 0.3s;
}
.reveal-delay-4 {
	transition-delay: 0.4s;
}
.reveal-delay-5 {
	transition-delay: 0.5s;
}
.reveal-delay-6 {
	transition-delay: 0.6s;
}

/* --- Horizontal filter pills (driving / rental / etc.) ------------------ */
.service-nav-pill.active {
	background: var(--secondary-color);
	color: var(--white-solid, #fff);
	border-color: var(--secondary-color);
}

/* --- Top accent bar animates on card hover ------------------------------- */
.service-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--secondary-color);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s ease;
	border-radius: 30px 30px 0 0;
	z-index: 10;
}
.service-card:hover::before {
	transform: scaleX(1);
}

/* --- Dotted line between “how it works” step circles -------------------- */
.process-connector {
	position: absolute;
	top: 22px;
	left: calc(50% + 28px);
	right: calc(-50% + 28px);
	height: 2px;
	background: repeating-linear-gradient(
		90deg,
		var(--cars2go-wizard-track) 0 8px,
		transparent 8px 16px
	);
}

/* --- Hero background: subtle parallax on capable browsers -------------- */
.hero-bg {
	background-attachment: fixed;
}

/* --- Stats ticker (speed differs from About page marquee track) -------- */
.marquee-track {
	animation: marquee 28s linear infinite;
}
.marquee-track:hover {
	animation-play-state: paused;
}