.ticker-section {
  --ticker-duration: 28s;
  --ticker-gap: 12px;
  height: 72px;
  overflow: hidden;
  background: var(--site-paper);
  border-bottom: 1px solid var(--site-line);
}

.ticker-viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ticker-track {
  display: flex;
  width: max-content;
  height: 100%;
  margin: 0;
  padding: 12px 0;
  animation: ticker-marquee var(--ticker-duration) linear infinite;
  will-change: transform;
}

.ticker-group {
  display: flex;
  flex: 0 0 auto;
  margin: 0;
  padding: 0 var(--ticker-gap) 0 0;
  gap: var(--ticker-gap);
  list-style: none;
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 48px;
  padding: 12px 18px 12px 14px;
  gap: 8px;
  border-radius: 999px;
  font-family: var(--site-font);
  font-size: 24px;
  font-weight: var(--site-weight-semibold);
  letter-spacing: -0.055em;
  line-height: 1;
  transition: transform 180ms var(--site-ease-out);
}

.ticker-item img {
  display: block;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

@keyframes ticker-marquee {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.ticker-section[data-page-hidden] .ticker-track {
  animation-play-state: paused;
}

@media (hover: hover) and (pointer: fine) {
  .ticker-viewport:hover .ticker-track,
  .ticker-viewport:focus-within .ticker-track {
    animation-play-state: paused;
  }

  .ticker-item:hover {
    transform: translateY(-2px);
  }
}

.ticker-item--purple {
  background: var(--site-purple-bg);
  color: var(--site-purple-ink);
}

.ticker-item--blue {
  background: var(--site-blue-bg);
  color: var(--site-blue-ink);
}

.ticker-item--lime {
  background: var(--site-lime-bg);
  color: var(--site-lime-ink);
}

.ticker-item--cyan {
  background: var(--site-cyan-bg);
  color: var(--site-cyan-ink);
}

@media (max-width: 800px) {
  .ticker-item {
    font-size: 19px;
  }
}

@media (max-width: 520px) {
  .ticker-section {
    height: 72px;
    min-height: 72px;
  }

  .ticker-track {
    padding: 12px 0;
  }

  .ticker-group {
    --ticker-gap: 8px;
  }

  .ticker-item {
    min-height: 34px;
    padding: 8px 12px 8px 10px;
    gap: 5px;
    font-size: 14px;
    letter-spacing: -0.03em;
  }

  .ticker-item img {
    width: 16px;
    height: 16px;
  }
}

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