/**
 * =====================================================================
 * MARQUEE COMPONENT — STYLES
 * =====================================================================
 * Copied verbatim from the current static design system's ".strap"
 * rules (css/style.css) — full rebuild from the earlier ".marquee"/
 * ".marquee__track" version, which no longer matches any element in
 * the real stylesheet at all (see template.php's file header for why).
 *
 * @keyframes strap-scroll lives HERE (not global.css): unlike the
 * earlier "@keyframes marquee" this component used to share with
 * partners_marquee, "strap-scroll" is used by ONLY this one component
 * now — partners_marquee has its own separate "@keyframes
 * partners-scroll" instead (see that component's own style.css) — so
 * there's no cross-component-folder sharing concern here.
 * =====================================================================
 */

.strap {
  border-bottom: 1px solid var(--line);
  padding-block: 28px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
div.strap__track {
  display: flex; align-items: center; gap: 28px;
  width: max-content;
  animation: strap-scroll 46s linear infinite;
  font-family: var(--font-sans) !important; font-size: 18px; font-weight: 600;
  color: var(--ink-2);
}
.strap:hover .strap__track { animation-play-state: paused; }
.strap__track span { white-space: nowrap; display: inline-flex; align-items: center; gap: 28px; }
.strap__track span::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--red);
}
@keyframes strap-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .strap__track { animation: none; } }