/* Two equal copies meet at precisely half the track, so the loop never jumps. */
.gold-ribbon > .ribbon-track {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: max-content;
  min-width: 0;
  gap: 0;
  padding: 0;
  animation: ribbon-scroll 26s linear infinite;
  will-change: transform;
}

.gold-ribbon .ribbon-group {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-around;
  width: max-content;
  min-width: 100vw;
  gap: 40px;
  padding: 16px 20px;
  white-space: nowrap;
}

.gold-ribbon .ribbon-group > * {
  flex: 0 0 auto;
}

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

html.motion-paused .gold-ribbon > .ribbon-track {
  animation-play-state: paused;
}

@media (max-width: 760px) {
  .gold-ribbon .ribbon-group {
    gap: 26px;
    padding: 15px 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gold-ribbon > .ribbon-track {
    animation: none;
    will-change: auto;
  }
}