/**
 * Services page — Capabilities Marquee / ticker section.
 * Figma: node 550:341-343 — white background, large text scrolling ticker.
 */

:root {
	--sp-svc-marquee-pad-y: clamp(72px, calc(240 / var(--spaciefy-artboard) * 100vw), 240px);
	--sp-svc-marquee-label-size: var(--sp-svc-hero-eyebrow-size);
	--sp-svc-marquee-label-tracking: var(--sp-svc-hero-eyebrow-tracking);
	--sp-svc-marquee-content-gap: var(--sp-svc-hero-eyebrow-gap);
	--sp-svc-marquee-item-size: clamp(24px, calc(128.207 / var(--spaciefy-artboard) * 100vw), 128.207px);
	--sp-svc-marquee-item-lh: 1.43;
	--sp-svc-marquee-item-tracking: -0.02em;
	--sp-svc-marquee-item-gap: clamp(16px, calc(36 / var(--spaciefy-artboard) * 100vw), 36px);
	--sp-svc-marquee-dot-size: clamp(8px, calc(16 / var(--spaciefy-artboard) * 100vw), 16px);
	--sp-svc-marquee-speed: 35s;
}

.sp-svc-marquee {
	position: relative;
	background-color: var(--spaciefy-white);
	color: var(--spaciefy-black);
	padding: var(--sp-svc-marquee-pad-y) 0;
	overflow: hidden;
}

.sp-svc-marquee__inner {
	display: flex;
	flex-direction: column;
	gap: var(--sp-svc-marquee-content-gap);
	width: var(--spaciefy-container-width);
	max-width: var(--spaciefy-container);
	margin-left: auto;
	margin-right: auto;
}

.sp-svc-marquee__label {
	margin: 0;
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-svc-marquee-label-size);
	font-weight: 400;
	line-height: normal;
	letter-spacing: var(--sp-svc-marquee-label-tracking);
	text-transform: uppercase;
	color: #000;
	opacity: 0.4;
}

/* The full-width scrolling track — overflows the inner container */
.sp-svc-marquee__track-wrap {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	overflow: hidden;
}

.sp-svc-marquee__track {
	display: flex;
	align-items: baseline;
	gap: var(--sp-svc-marquee-item-gap);
	width: max-content;
	animation: sp-svc-marquee-scroll var(--sp-svc-marquee-speed) linear infinite;
	will-change: transform;
}

@keyframes sp-svc-marquee-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

.sp-svc-marquee__item {
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-svc-marquee-item-size);
	font-weight: 400;
	line-height: var(--sp-svc-marquee-item-lh);
	letter-spacing: var(--sp-svc-marquee-item-tracking);
	color: #000;
	opacity: 0.2;
	white-space: nowrap;
	user-select: none;
	transition: opacity 0.35s ease;
}

.sp-svc-marquee__item.is-active {
	opacity: 0.6;
}

/* Yellow dot separator between marquee items */
.sp-svc-marquee__dot {
	display: inline-block;
	flex-shrink: 0;
	width: var(--sp-svc-marquee-dot-size);
	height: var(--sp-svc-marquee-dot-size);
	border-radius: 50%;
	background-color: #f9cf0e;
	align-self: center;
}

/* Screen-reader only text */
.sp-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 1560px) {
	:root {
		--sp-svc-marquee-pad-y: clamp(48px, calc(140 / 1560 * 100vw), 140px);
	}
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	.sp-svc-marquee__track {
		animation: none;
	}
}