/*
 * Sawatech Woo — Site Marquee Bar
 * Full-width announcement ticker that sits above the site header.
 */

/* ── Custom properties ─────────────────────────────────────────────────────── */
.site-marquee {
	--mqe-bg:       var(--color-primary, #ed1c24);
	--mqe-ink:      #fff;
	--mqe-gap:      clamp(2rem, 5vw, 4rem);
	--mqe-speed:    32s;
	--mqe-size:     clamp(.75rem, 1.1vw, .875rem);
	--mqe-sep-size: .3em;
	--mqe-shift:    -50%;
}

/* In RTL contexts, scroll the track in the opposite direction. */
:dir(rtl) .site-marquee,
html[dir="rtl"] .site-marquee {
	--mqe-shift: 50%;
}

/* ── Bar shell ─────────────────────────────────────────────────────────────── */
.site-marquee {
	position: relative;
	z-index: 200;
	display: flex;
	align-items: center;
	inline-size: 100%;
	block-size: clamp(2rem, 3vw, 2.5rem);
	overflow: hidden;
	background: var(--mqe-bg);
	color: var(--mqe-ink);
	font-size: var(--mqe-size);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	user-select: none;

	/* Pause when user prefers reduced motion */
	@media (prefers-reduced-motion: reduce) {
		overflow-x: auto;
		white-space: nowrap;
	}
}

/* Soft edge fades */
.site-marquee::before,
.site-marquee::after {
	content: '';
	position: absolute;
	inset-block: 0;
	z-index: 2;
	inline-size: 3rem;
	pointer-events: none;
}

.site-marquee::before {
	inset-inline-start: 0;
	background: linear-gradient(to inline-end, var(--mqe-bg), transparent);
}

.site-marquee::after {
	inset-inline-end: 0;
	background: linear-gradient(to inline-start, var(--mqe-bg), transparent);
}

/* ── Scrolling track ───────────────────────────────────────────────────────── */
.site-marquee__track {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 0;
	animation: mqe-scroll var(--mqe-speed) linear infinite;
	will-change: transform;
}

.site-marquee:hover .site-marquee__track,
.site-marquee:focus-within .site-marquee__track {
	animation-play-state: paused;
}

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

/* ── Individual item ───────────────────────────────────────────────────────── */
.site-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: var(--mqe-gap);
	padding-inline-end: var(--mqe-gap);
}

/* Separator dot between items */
.site-marquee__item::after {
	content: '';
	display: inline-block;
	inline-size: var(--mqe-sep-size);
	block-size: var(--mqe-sep-size);
	border-radius: 50%;
	background: rgba(255, 255, 255, .55);
	flex-shrink: 0;
}

/* ── Keyframe ──────────────────────────────────────────────────────────────── */
@keyframes mqe-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(var(--mqe-shift)); }
}