/* ---- BASE ---- */
.news-ticker-container {
  overflow: hidden;
  white-space: nowrap;
  position: relative;

  /* The magic: a transparent gradient mask */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Scrolling text */
.news-ticker {
  display: inline-block;
  animation: scroll-left 60s linear infinite;
  will-change: transform;
}

/* Pause when hovered */
.news-ticker-container:hover .news-ticker {
  animation-play-state: paused;
}

/* Items */
.news-item {
  display: inline-block;
  margin-right: 5rem;
  font-weight: 500;
  color: inherit; /* so it respects parent or theme color */
}

.news-ticker a {
  color: #ffc90c;
  text-decoration: underline;
}

.news-ticker a:hover {
  text-decoration: underline;
}

/* Animation keyframes */
@keyframes scroll-left {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* Optional: slow down on small screens */
@media (max-width: 768px) {
  .news-ticker {
    animation-duration: 20s;
  }
}