/* ── Shared scrolling "values ticker" ─────────────────────────────────────
   Paired with src/shared/values-ticker.ts's renderValuesTicker(). Used by
   the hub page and the logged-out sign-in page -- one definition so it
   looks and behaves identically everywhere it's loaded. Uses --hb-navy
   (top-nav.css, loaded on every page this renders on) rather than the
   older --navy token hub.css/login.css each define their own copy of, so
   this doesn't depend on which of those two a given page happens to load. */

.hub-footer-ticker {
  overflow: hidden;
  width: 100%;
  margin-bottom: 7.2px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.hub-footer-ticker-track {
  display: flex;
  width: max-content;
  animation: hubFooterTickerScroll 38s linear infinite;
}

.hub-footer-ticker:hover .hub-footer-ticker-track {
  animation-play-state: paused;
}

.hub-footer-ticker-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.hub-footer-ticker-item {
  font-size: 11.7px;
  font-weight: 700;
  color: var(--hb-navy);
  white-space: nowrap;
  padding: 0 9px;
}

.hub-footer-ticker-dot {
  font-size: 11.7px;
  font-weight: 700;
  color: var(--hb-navy);
  opacity: 0.4;
}

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

@media (prefers-reduced-motion: reduce) {
  .hub-footer-ticker {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hub-footer-ticker-track {
    animation: none;
    width: auto;
  }
  .hub-footer-ticker-group {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 3.6px;
  }
  .hub-footer-ticker-group[aria-hidden='true'] {
    display: none;
  }
}