@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--marquee-translate, -50%), 0, 0); }
}

.brxe-marquee-slider {
  overflow: hidden;
}

.brxe-marquee-slider .marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: var(--marquee-gap, 40px);
  will-change: transform;
  /* Hold animation until JS has measured and set --marquee-translate */
  animation: none;
}

/* JS adds .is-ready once --marquee-translate is set */
.brxe-marquee-slider.is-ready .marquee-track {
  animation: marquee-scroll var(--marquee-speed, 20s) linear infinite;
}

.brxe-marquee-slider.is-ready[data-direction="right"] .marquee-track {
  animation-direction: reverse;
}

.brxe-marquee-slider.is-ready[data-pause-on-hover="1"]:hover .marquee-track {
  animation-play-state: paused;
}

/* PHP copy wrappers are invisible to flexbox */
.brxe-marquee-slider .marquee-set {
  display: contents;
}

/* Builder: show items as a wrapping grid so they're easy to edit */
.brxe-marquee-slider.is-builder .marquee-track {
  flex-wrap: wrap;
}

.brxe-marquee-slider.is-builder .marquee-set {
  display: none;
}