/* Marquee — infinite horizontal scrolling ticker
 * Full-width by design (no kombos-container); same intentional exception as Header/HeroSlider.
 * bg/text colors come from props via inline style on the <section> root.
 */

/* ── Section root ─────────────────────────────────────────────────────────── */

.cc_4vBO1nbhag_Toyi4LkXCy .kombos-marquee {
  /* Clip the scrolling track */
  overflow: hidden;
  /* Vertical breathing room */
  padding-block: 0.75rem;
}

/* ── Overflow viewport ────────────────────────────────────────────────────── */

.cc_4vBO1nbhag_Toyi4LkXCy .kombos-marquee__viewport {
  overflow: hidden;
}

/* ── Animated track — holds two identical groups end-to-end ──────────────── */

.cc_4vBO1nbhag_Toyi4LkXCy .kombos-marquee__track {
  display: flex;
  width: max-content;
  animation: cc_4vBO1nbhag_Toyi4LkXCy_kombos-marquee-scroll var(--marquee-duration, 30s) linear infinite;
}

/* Pause on hover for readability */
.cc_4vBO1nbhag_Toyi4LkXCy .kombos-marquee:hover .kombos-marquee__track {
  animation-play-state: paused;
}

/* ── Each group (primary + aria-hidden clone) ─────────────────────────────── */

.cc_4vBO1nbhag_Toyi4LkXCy .kombos-marquee__group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

/* ── Keyframe
 * Translating -50% of a 2-group (200%-wide) track lands exactly back at the
 * start of the primary group → seamless infinite loop with no visible jump.
 * ─────────────────────────────────────────────────────────────────────────── */

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

/* ── Accessibility: respect reduced-motion preference ────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .cc_4vBO1nbhag_Toyi4LkXCy .kombos-marquee__track {
    animation: none;
  }
}