/* BidSpot — Home page live activity ticker. Kept in its own stylesheet rather
   than dumped into main.css so it stays obvious which class belongs to it.
   Relies on css/variables.css being linked before this file in <head>. */

/* ============================================================
   Live activity ticker — a horizontal scroll strip of the most
   recent paid bids, from public.activity_feed. Real data only:
   if the feed is empty the whole element is `hidden` and takes
   no space, rather than an empty rail masquerading as activity.
   ============================================================ */
/* A class rule with `display` outranks [hidden]{display:none} from the UA
   stylesheet, so this needs to opt back in explicitly — without it, an empty
   feed still rendered an orphan "LIVE ACTIVITY" pill on the page. */
.activity-ticker[hidden] { display: none; }

.activity-ticker {
  max-width: 1240px;
  margin: 12px auto 0;
  padding: 0 28px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
}

.activity-ticker-label {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 12px;
  background: var(--accent-light);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-full);
}

.activity-ticker-label .pulse-dot { position: static; }

/* Marquee-style scroll of the item list. CSS-only via a duplicated content run
   inside .activity-ticker-track — set data-single-copy on the track element to
   disable the animation when there are too few items to fill the row.

   Keyframes translate by -50% because the JS emits the item list twice; a full
   loop of the first copy therefore looks continuous. */
.activity-ticker-track {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}

.activity-ticker-flow {
  display: inline-flex;
  gap: 24px;
  padding-left: 0;
  white-space: nowrap;
  animation: tickerScroll 60s linear infinite;
}

.activity-ticker:hover .activity-ticker-flow,
.activity-ticker-flow:focus-within {
  animation-play-state: paused;
}

.activity-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.activity-item strong {
  color: var(--text-primary);
  font-weight: 700;
}

.activity-item .activity-amount {
  color: var(--accent-primary);
  font-weight: 700;
}

.activity-item .activity-dot {
  color: var(--text-muted);
  margin: 0 2px;
}

.activity-item .activity-time {
  color: var(--text-muted);
  font-size: 0.76rem;
}

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

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

@media (max-width: 640px) {
  .activity-ticker { padding: 0 16px; flex-direction: column; align-items: stretch; gap: 8px; }
  .activity-ticker-label { align-self: flex-start; }
}