/* =========================================================
   Component — Marquee

   Two rails travelling against each other. The rail holds one set
   of chips in the markup and is duplicated by shell.js, because a
   seamless loop needs the content twice and writing it twice by
   hand means editing it twice forever.

   It is the only ambient motion in the system, so it is slow: fast
   marquees read as a banner ad. It stops on hover and on
   prefers-reduced-motion.
   ========================================================= */
.marquee {
  --marquee-duration: 64s;

  position: relative;
  display: flex;
  overflow: hidden;
  padding-block: var(--space-2);
  /* Fade both ends into the canvas so the chips arrive and leave
     instead of being cut by a hard edge. The #000 below is a
     stencil, not a colour: a mask reads only the alpha channel, so
     the value is "opaque here" and never paints. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.marquee__rail {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-3);
  padding-inline-end: var(--space-3);
  will-change: transform;
  animation: marquee-run var(--marquee-duration) linear infinite;
}

/*
   The travel has to flip with direction, and not for a cosmetic
   reason.

   A flex row lays its content out from the inline start, so in LTR
   the rail begins at x=0 and runs right: the window at [0, w] sits
   over the head of the rail, and walking it to -50% drags the rest
   of the content through that window. In RTL the same rail begins
   at x = w - railWidth — the window is over its *tail* — so the
   identical -50% walks the whole thing off-canvas to the left and
   the band renders empty.

   So RTL travels the other way, to +50%. Both halves of the rail
   are identical, so either end point lands on a frame matching the
   start and the loop stays seamless. Same shape as athar-crawl /
   athar-crawl-rtl in busy.css.
*/
@keyframes marquee-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

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

:root[dir="rtl"] .marquee__rail { animation-name: marquee-run-rtl; }

.marquee--reverse .marquee__rail { animation-direction: reverse; }

.marquee:hover .marquee__rail,
.marquee:focus-within .marquee__rail { animation-play-state: paused; }

.marquee__chip {
  flex: none;
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

/* Every third chip gets the brass hairline, so the rail has a
   rhythm instead of being one long grey ribbon. */
.marquee__chip:nth-child(3n) {
  border-color: var(--color-line-gold);
  color: var(--color-gold-text);
}

@media (prefers-reduced-motion: reduce) {
  .marquee__rail { animation: none; }
  .marquee {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .marquee::-webkit-scrollbar { display: none; }
}