Logo Ticker

<!-- Duplicate the items for seamless loop -->
<div class="nuda-ticker" aria-hidden="true">
  <div class="nuda-ticker__track">
    <div class="nuda-ticker__item">Brand A</div>
    <div class="nuda-ticker__item">Brand B</div>
    <div class="nuda-ticker__item">Brand C</div>
    <div class="nuda-ticker__item">Brand D</div>
    <div class="nuda-ticker__item">Brand E</div>
    <!-- Duplicate for seamless loop -->
    <div class="nuda-ticker__item">Brand A</div>
    <div class="nuda-ticker__item">Brand B</div>
    <div class="nuda-ticker__item">Brand C</div>
    <div class="nuda-ticker__item">Brand D</div>
    <div class="nuda-ticker__item">Brand E</div>
  </div>
</div>

/* Logo Ticker
   Smooth scrolling brand/logo ticker with edge fade.
   Customize: --ticker-speed, --ticker-gap */

.nuda-ticker {
  --ticker-speed: 15s;
  --ticker-gap: 2rem;
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.nuda-ticker__track {
  display: flex;
  gap: var(--ticker-gap);
  width: max-content;
  animation: nuda-ticker-scroll var(--ticker-speed) linear infinite;
}

.nuda-ticker__item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.5rem 1.25rem;
  font-size: 0.85rem;
  color: #888;
  white-space: nowrap;
}

.nuda-ticker:hover .nuda-ticker__track {
  animation-play-state: paused;
}

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

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