/* ==================================================
	ANNOUNCEMENT BAR - Mobile First
================================================== */

.topbar {
	background: var(--black);
	padding: 0.5625rem 1.5rem;
	overflow: hidden;
}

.topbar-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	white-space: nowrap;
	animation: marquee 28s linear infinite;
}

@keyframes marquee {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

.topbar-inner span {
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65);
	padding: 0 1.5rem;
}

.topbar-inner .sep {
	font-size: 0.5625rem;
	color: rgba(255, 255, 255, 0.2);
}

/* ==================================================
	TABLET (min-width: 641px)
================================================== */

@media (min-width: 641px) {

	.topbar {
		padding: 0.625rem 2rem;
	}

	.topbar-inner span {
		font-size: 0.75rem;
	}

}

/* ==================================================
	DESKTOP (min-width: 901px)
================================================== */

@media (min-width: 901px) {

	.topbar-inner span {
		letter-spacing: 0.16em;
	}

}

/* ==================================================
	REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

	.topbar-inner {
		animation: none;
	}
}