/* 02-cites.css - P2. Every selector starts with .s-cites, per spec 4.4. */

.s-cites {
  padding: 24px 0 64px;
}

.s-cites__label {
  font: 400 14px/1.2 var(--font-sans);
  text-transform: none;
  margin-bottom: 16px;
}

.s-cites__marquee {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.s-cites__track {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
  animation: none;
}
.s-cites__track[aria-hidden="true"] {
  display: none;
}

.js .s-cites__marquee {
  overflow: hidden;
}
.js .s-cites__track {
  animation: s-cites-scroll 40s linear infinite;
}
.js .s-cites__track[aria-hidden="true"] {
  display: flex;
}
.js .s-cites__marquee.is-paused .s-cites__track {
  animation-play-state: paused;
}

@keyframes s-cites-scroll {
  to { transform: translateX(calc(-100% - 12px)); }
}

@media (prefers-reduced-motion: reduce) {
  .js .s-cites__track { animation: none; }
  .js .s-cites__track[aria-hidden="true"] { display: none; }
  .js .s-cites__marquee { overflow-x: auto; }
}

.s-cites__caption {
  margin-top: 10px;
  font-size: 12px;
}

@media (max-width: 809px) {
  .s-cites .chip {
    height: 30px;
    font-size: 13px;
  }
}