/*
 * Discovery Marquee — premium editorial scroll strip.
 * Self-contained: reuses global tokens only, no new palette/radius/shadow system.
 */

.bgm-marquee {
	position: relative;
	overflow: hidden;
	border-block: var(--bgm-border-width) solid var(--bgm-color-premium-border);
	background: linear-gradient(180deg, var(--bgm-color-premium-surface) 0%, var(--bgm-color-premium-surface-deep) 100%);
}

.bgm-marquee-track {
	display: flex;
	width: max-content;
	transform: translate3d(0, 0, 0);
	will-change: transform;
}

.bgm-marquee-set {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	padding-block: 1rem;
}

.bgm-marquee-item {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: var(--bgm-space-4);
	padding-inline-end: var(--bgm-space-4);
	color: var(--bgm-color-premium-text-muted);
	font-family: var(--bgm-font-heading);
	font-size: var(--bgm-text-xs);
	font-weight: var(--bgm-weight-extrabold);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}

.bgm-marquee-spark {
	width: 0.85em;
	height: 0.85em;
	flex-shrink: 0;
	fill: var(--bgm-color-sparkle);
	stroke: none;
	filter:
		drop-shadow(0 0 3px var(--bgm-color-sparkle-glow))
		drop-shadow(0 0 8px rgb(244 203 107 / 0.12));
}

@media (max-width: 1024px) {
	.bgm-marquee-set {
		padding-block: 0.85rem;
	}

	.bgm-marquee-item {
		gap: var(--bgm-space-3);
		padding-inline-end: var(--bgm-space-3);
		font-size: var(--bgm-text-2xs);
	}
}

@media (max-width: 480px) {
	.bgm-marquee-set {
		padding-block: 0.7rem;
	}

	.bgm-marquee-item {
		gap: var(--bgm-space-2);
		padding-inline-end: var(--bgm-space-2);
		letter-spacing: 0.03em;
	}

	.bgm-marquee-spark {
		width: 0.75em;
		height: 0.75em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bgm-marquee-track {
		transform: none !important;
	}
}