/**
 * Infinite Marquee – frontend styles
 */

.oc-marquee {
	--oc-marquee-duration: 40s;
	--oc-marquee-gap: 28px;
	--oc-marquee-accent: #6b7a67;
	position: relative;
	width: 100%;
	overflow: hidden;
	background-color: #f3f1ec;
	border-top: 1px solid #6b7a67;
	border-bottom: 1px solid #6b7a67;
	box-sizing: border-box;
}

.oc-marquee *,
.oc-marquee *::before,
.oc-marquee *::after {
	box-sizing: border-box;
}

.oc-marquee__viewport {
	width: 100%;
	overflow: hidden;
}

.oc-marquee__track {
	display: flex;
	width: max-content;
	align-items: center;
	will-change: transform;
	animation: oc-marquee-scroll var(--oc-marquee-duration) linear infinite;
}

.oc-marquee.is-reverse .oc-marquee__track {
	animation-name: oc-marquee-scroll-reverse;
}

.oc-marquee.is-paused-hover:hover .oc-marquee__track {
	animation-play-state: paused;
}

.oc-marquee.is-static .oc-marquee__track {
	animation: none;
}

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

.oc-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--oc-marquee-gap) * 0.55);
	flex-shrink: 0;
	white-space: nowrap;
	color: #3a3a3a;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.4;
}

.oc-marquee__diamond {
	display: inline-block;
	color: var(--oc-marquee-accent);
	font-size: 9px;
	line-height: 1;
	transform: translateY(-0.05em);
}

.oc-marquee__text {
	display: inline-block;
}

@keyframes oc-marquee-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(calc(-1 * var(--oc-marquee-shift, 50%)));
	}
}

@keyframes oc-marquee-scroll-reverse {
	from {
		transform: translateX(calc(-1 * var(--oc-marquee-shift, 50%)));
	}
	to {
		transform: translateX(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.oc-marquee__track {
		animation: none;
	}
}