/*
 * La Galga Gris · marquee-strip.css
 * Variantes (theme/size) y override del default que vive en components.css.
 */

.lgg-marquee {
	--lgg-marquee-duration: 40s;
	overflow: hidden;
	border-block: 1px solid var(--color-border-subtle);
	padding-block: var(--sp-3);
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	background: var(--color-bg-subtle);
	color: var(--color-ink-primary);
}

.lgg-marquee__track {
	display: inline-flex;
	gap: var(--sp-6);
	white-space: nowrap;
	width: max-content;
	animation: lgg-marquee var(--lgg-marquee-duration) linear infinite;
	will-change: transform;
}
.lgg-marquee:hover .lgg-marquee__track,
.lgg-marquee:focus-within .lgg-marquee__track { animation-play-state: paused; }

.lgg-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
}
.lgg-marquee__text {
	font-family: var(--font-display);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-heading);
	font-size: clamp(1rem, 1.6vw, 1.35rem);
	line-height: 1.1;
}
.lgg-marquee__bullet {
	width: 0.45rem; height: 0.45rem;
	border-radius: 50%;
	background: var(--color-accent);
	flex: 0 0 auto;
}

@keyframes lgg-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.lgg-marquee__track { animation: none; }
}

/* ── Sizes ──────────────────────────────────────────────────────── */
.lgg-marquee--sm { padding-block: var(--sp-2); }
.lgg-marquee--sm .lgg-marquee__text { font-size: 0.95rem; }
.lgg-marquee--sm .lgg-marquee__bullet { width: 5px; height: 5px; }

.lgg-marquee--lg { padding-block: var(--sp-5); }
.lgg-marquee--lg .lgg-marquee__text { font-size: clamp(1.5rem, 3vw, 2.5rem); }
.lgg-marquee--lg .lgg-marquee__bullet { width: 0.7rem; height: 0.7rem; }
.lgg-marquee--lg .lgg-marquee__track { gap: var(--sp-7); }

/* ── Themes ─────────────────────────────────────────────────────── */
.lgg-marquee--ink {
	background: var(--color-bg-inverse);
	color: var(--color-ink-inverse);
	border-color: color-mix(in srgb, var(--color-ink-inverse) 14%, transparent);
}
.lgg-marquee--ink .lgg-marquee__bullet { background: var(--color-accent); }

.lgg-marquee--accent {
	background: var(--color-accent);
	color: var(--color-ink-inverse);
	border-color: transparent;
}
.lgg-marquee--accent .lgg-marquee__bullet { background: var(--color-ink-inverse); }

.lgg-marquee--transparent {
	background: transparent;
	border-color: transparent;
}

/* ── Variante "ticker" minimalista (sin bullet, fontsize body) ──── */
.lgg-marquee--ticker .lgg-marquee__text {
	font-family: var(--font-body);
	font-weight: var(--fw-medium);
	font-size: var(--fz-small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}