/**
 * Marquee — continuously scrolling text + icons.
 * Pure CSS animation. Two identical groups inside the track —
 * translateX(-50%) lands the second group exactly where the first started,
 * which is why the loop is seamless.
 */

.marquee {
	--marquee-duration: 40s;
	--marquee-gap: var(--space-6);

	position: relative;
	width: 100%;
	background: var(--color-white);
	padding-block: var(--space-2);
	overflow: hidden;
}

.marquee__track {
	display: flex;
	width: max-content;
	animation: mrwoo-marquee var(--marquee-duration) linear infinite;
	will-change: transform;
}

.marquee__group {
	display: flex;
	align-items: center;
	gap: var(--marquee-gap);
	flex-shrink: 0;
	padding-right: var(--marquee-gap);
}

.marquee__text {
	font-family: var(--font-heading);
	font-size: 2rem;             /* 32px */
	font-weight: var(--font-bold);
	line-height: var(--leading-normal);
	letter-spacing: -0.02em;
	color: var(--color-pink-shocking);
	white-space: nowrap;
}

.marquee__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.marquee__icon svg {
	display: block;
	height: 32px;
	width: auto;
}

/* Pause on hover for usability */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
	animation-play-state: paused;
}

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

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
	.marquee__track {
		animation: none;
	}
}

/* === Responsive === */
@media (max-width: 768px) {
	.marquee {
		--marquee-duration: 25s;
	}

	.marquee__text {
		font-size: 22px;
	}

	.marquee__icon svg {
		height: 28px;
	}
}