/* Ribbon: tilted accent-colored strip of category names that loops sideways (words and copies come from script.js) */

.ribbon {
  position: relative;
  z-index: 2;
  margin: -24px -10px 0;
  overflow: hidden;
  border-block: var(--line);
  background: var(--accent);
  color: var(--on-accent);
  transform: rotate(-1.6deg);
}
.ribbon-track { display: flex; width: max-content; padding: 14px 0; }
/* Each copy of the words ends with the same gap it has between items, so sliding one copy's width loops seamlessly */
.ribbon-group { display: flex; flex: 0 0 auto; align-items: center; gap: 26px; padding-right: 26px; }
.ribbon-track.is-looping .ribbon-group { animation: marquee 32s linear infinite; }
.ribbon-group span { font-family: var(--font-display); font-size: 1.25rem; white-space: nowrap; }
.ribbon-group .icon { width: 28px; --icon-fill: var(--color-2); }
/* Paused under the mouse; on phones a tap would leave it stuck paused */
@media (hover: hover) {
  .ribbon:hover .ribbon-group { animation-play-state: paused; }
}

@media (min-width: 681px) {
  .ribbon-group span { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ribbon-track.is-looping .ribbon-group { animation: none; }
}