/* ==========================================================================
   Section: Feature ticker (marquee band)
   Figma: Home EN 4081:33189 — gradient #01B2AF → #00143C (values verbatim
   from the node; #01B2AF is the drawn gradient stop, 1-off from the MintPay
   token), white Poppins Bold 32/40, 22px teal stars, gap 24, height 86.
   RTL: marquee direction reversed in rtl.css.
   ========================================================================== */

.mada-ticker {
	background: linear-gradient(to right, #01B2AF, #00143C);
	overflow: hidden;
	padding-block: 23px;                       /* (86 − 40) / 2 */
}

.mada-ticker__track {
	display: flex;
	inline-size: max-content;
	animation: mada-ticker-scroll 40s linear infinite;
}

.mada-ticker__seq {
	display: flex;
	align-items: center;
	gap: var(--space-7);                        /* 24 */
	padding-inline-end: var(--space-7);         /* gap continuity at the seam */
}

.mada-ticker__item {
	font-weight: var(--fw-bold);
	font-size: 32px;                            /* Figma: headline-large 32/40 */
	line-height: 40px;
	color: #FFFFFF;
	white-space: nowrap;
}

.mada-ticker__star {
	flex: 0 0 auto;
}

@keyframes mada-ticker-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* RTL: the track overflows to the LEFT (row starts at the right edge), so it
   must translate +50% → 0, not the reverse-played LTR keyframes (which push
   the whole track out of view). */
@keyframes mada-ticker-scroll-rtl {
	from { transform: translateX(50%); }
	to   { transform: translateX(0); }
}
[dir="rtl"] .mada-ticker__track {
	animation-name: mada-ticker-scroll-rtl;
}

/* Accessibility: no motion → static centered row (as drawn in Figma). */
@media (prefers-reduced-motion: reduce) {
	.mada-ticker__track {
		animation: none;
		inline-size: 100%;
		justify-content: center;
	}
	.mada-ticker__seq[aria-hidden="true"] { display: none; }
}