/* EB Infinite Marquee — front-end styles.
   Every visual property is a CSS variable so the Elementor
   controls (or the shortcode) can override them per-instance. */

.eb-marquee {
	/* Defaults — match the Edgar Berlanga design */
	--eb-font-size: clamp(28px, 5vw, 64px);
	--eb-letter-spacing: 0.35em;
	--eb-color: #C8102E;
	--eb-separator: "\2013";
	--eb-separator-gap: 0.75em;
	--eb-speed: 25s;
	--eb-direction: normal;
	--eb-pause-on-hover: paused;
	--eb-bg: #333333;
	--eb-border-color: #C8102E;
	--eb-border-width: 1px;
	--eb-padding-y: 18px;
	--eb-edge-fade: 60px;

	overflow: hidden;
	background: var(--eb-bg);
	border-top: var(--eb-border-width) solid var(--eb-border-color);
	border-bottom: var(--eb-border-width) solid var(--eb-border-color);
	padding: var(--eb-padding-y) 0;
	white-space: nowrap;
	position: relative;
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--eb-edge-fade),
		#000 calc(100% - var(--eb-edge-fade)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--eb-edge-fade),
		#000 calc(100% - var(--eb-edge-fade)),
		transparent 100%
	);
}

.eb-marquee__track {
	display: inline-flex;
	animation: eb-scroll var(--eb-speed) linear infinite;
	animation-direction: var(--eb-direction);
	will-change: transform;
}

.eb-marquee:hover .eb-marquee__track {
	animation-play-state: var(--eb-pause-on-hover);
}

.eb-marquee__group {
	display: inline-flex;
	flex-shrink: 0;
}

.eb-marquee__item {
	font-size: var(--eb-font-size);
	letter-spacing: var(--eb-letter-spacing);
	text-transform: uppercase;
	color: var(--eb-color);
	line-height: 1.1;
	padding-right: var(--eb-separator-gap);
}

.eb-marquee__item::after {
	content: var(--eb-separator);
	padding-left: var(--eb-separator-gap);
	color: var(--eb-color);
}

@keyframes eb-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); } /* exactly one group width = seamless loop */
}

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