/* Row with button on the right */
.ticker-row {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* The scrolling viewport */
.ticker-viewport {
  flex: 1 1 auto;
  overflow: hidden;
  background: #0b0c10;   /* your colors */
  color: #dfe6ee;
  padding: 6px 0;
  border-radius: .35rem;
}

/* The track still animates inside the viewport */
.ticker-track {
  display: inline-flex;
  gap: 1.25rem;
  white-space: nowrap;
  will-change: transform;
  animation: ticker-scroll var(--dur, 30s) linear infinite;
}

/* Pause state applied to the ROW */
.ticker-row.is-paused .ticker-track { animation-play-state: paused; }

/* Optional: button styling; keep it from shrinking */
.ticker-btn {
  flex: 0 0 auto;
  font: 500 12px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  padding: .35rem .6rem;
  border: 1px solid #444; background: #1c1d22; color: #e8edf3;
  border-radius: .35rem; cursor: pointer;
}
.ticker-btn:focus { outline: 2px solid #7aa7ff; outline-offset: 2px; }

@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* content duplicated in JS */
}

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