/* Announcement bar: pine strip, gold dot separators. Long text scrolls (JS adds .is-scrolling). */
.announcement {
	--dir: 1;
	background: var(--pine);
	color: var(--on-pine);
	font-size: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); /* 12px phone -> 13px desktop */
	font-weight: 500;
	line-height: 1.5;
	min-block-size: 2.125rem; /* 34px phone, 36px desktop */
	display: flex;
	align-items: center;
	overflow: hidden;
	padding-inline: max(1rem, env(safe-area-inset-left), env(safe-area-inset-right));
}
[dir="rtl"] .announcement { --dir: -1; }

.announcement__track {
	display: flex;
	inline-size: 100%;
	justify-content: center;
}

.announcement__list {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}

.announcement__item + .announcement__item::before,
.announcement__clone .announcement__item:first-child::before {
	content: "";
	display: inline-block;
	inline-size: 3px;
	block-size: 3px;
	border-radius: 50%;
	background: var(--gold);
	margin-inline-end: 0.625rem;
	vertical-align: middle;
}

/* Overflowing: run as a seamless marquee */
.announcement.is-scrolling .announcement__track {
	inline-size: max-content;
	justify-content: flex-start;
	animation: announcement-scroll var(--announcement-duration, 20s) linear infinite;
}
.announcement.is-scrolling .announcement__list { padding-inline-end: 0.625rem; }

@media (min-width: 64rem) {
	.announcement { min-block-size: 2.25rem; }
	.announcement__list { gap: 0.875rem; }
	.announcement__item + .announcement__item::before, .announcement__clone .announcement__item:first-child::before { margin-inline-end: 0.875rem; }
	.announcement.is-scrolling .announcement__list { padding-inline-end: 0.875rem; }
}

@keyframes announcement-scroll {
	to { transform: translateX(calc(-50% * var(--dir))); }
}

@media (hover: hover) {
	.announcement.is-scrolling:hover .announcement__track { animation-play-state: paused; }
}

@media (prefers-reduced-motion: reduce) {
	.announcement.is-scrolling { overflow-x: auto; }
	.announcement.is-scrolling .announcement__track { animation: none; }
	.announcement__clone { display: none; }
}