.endless-scroller {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Edge fade mask (adjust via --es-fade) */
  --es-fade: 18px;
}

.endless-scroller .es-viewport {
  width: 100%;
  overflow: hidden;
  /* Smooth edge fade using CSS mask (works in modern browsers) */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    black var(--es-fade),
    black calc(100% - var(--es-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    black var(--es-fade),
    black calc(100% - var(--es-fade)),
    transparent 100%
  );
}

.endless-scroller .es-track {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--es-gap, 24px);
  will-change: transform;
  transform: translateX(0);
  animation-name: es-scroll-left;
  animation-duration: var(--es-duration, 12s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

/* Direction handling */
.endless-scroller .es-track.es-dir-right {
  animation-name: es-scroll-right;
}
.endless-scroller .es-track.es-dir-left {
  animation-name: es-scroll-left;
}

/* Items stay their intrinsic size; content inside can be anything */
.endless-scroller .es-item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

/* Keyframes: move by exactly half the track, since it contains two identical halves */
@keyframes es-scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

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

/* Reduced motion: disable animation and allow manual scroll */
.endless-scroller.es-reduced .es-viewport {
  -webkit-mask-image: none;
  mask-image: none;
  overflow-x: auto;
}
.endless-scroller.es-reduced .es-track {
  animation: none !important;
}

/* Responsive typography helper (optional) */
.endless-scroller .es-item > * {
  max-width: 100%;
}