/* EMERGE Marquee Pills — structural + brand-default styles.
   Most visual properties are controlled via Elementor's Style tab;
   the values below are fallbacks so the widget looks correct out of the box. */

.emp-marquee-wrapper {
	--emp-ink: #16231F;
	--emp-paper: #EDE7D8;
	--emp-brass: #B0842E;
	--emp-fade-width: 80px;
	position: relative;
	overflow: hidden;
	width: 100%;
}

.emp-marquee-viewport {
	position: relative;
	overflow: hidden;
	width: 100%;
}

/* Edge fade via mask — works over any background, no color matching required. */
.emp-marquee-wrapper[data-emp-fade="yes"] .emp-marquee-viewport {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--emp-fade-width),
		#000 calc(100% - var(--emp-fade-width)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--emp-fade-width),
		#000 calc(100% - var(--emp-fade-width)),
		transparent 100%
	);
}

.emp-marquee-track {
	display: flex;
	align-items: center;
	width: max-content;
	gap: 16px;
	will-change: transform;
	animation: emp-marquee-left var(--emp-marquee-duration, 30s) linear infinite;
}

.emp-marquee-wrapper[data-emp-direction="right"] .emp-marquee-track {
	animation-name: emp-marquee-right;
}

.emp-marquee-wrapper[data-emp-pause-hover="yes"]:hover .emp-marquee-track {
	animation-play-state: paused;
}

.emp-marquee-set {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-shrink: 0;
}

@keyframes emp-marquee-left {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@keyframes emp-marquee-right {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}

.emp-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	background-color: var(--emp-paper);
	color: var(--emp-ink);
	border: 1px solid rgba(22, 35, 31, 0.2);
	border-radius: 999px;
	padding: 10px 20px;
	text-decoration: none;
	white-space: nowrap;
	line-height: 1;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

a.emp-pill {
	cursor: pointer;
}

.emp-pill-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--emp-brass);
	line-height: 0;
}

.emp-pill-icon svg {
	width: 1em;
	height: 1em;
}

.emp-pill-text {
	display: inline-block;
	font-family: 'Inter', sans-serif;
	font-size: 14.5px;
	font-weight: 500;
}

.emp-marquee-wrapper :focus-visible {
	outline: 2px solid var(--emp-brass);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.emp-marquee-track {
		animation: none !important;
		transform: none !important;
	}
	.emp-marquee-set[aria-hidden="true"] {
		display: none;
	}
}