/* Client Marquee — CSS-driven seamless tracks (2× content, -50% loop)
   Motion math is ALWAYS LTR — never inherit page RTL. */
.cm-wall {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--cm-row-gap);
  width: 100%;
  overflow: hidden;
  touch-action: pan-y;
  direction: ltr !important;
  unicode-bidi: isolate;
}

.cm-row {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  opacity: 1 !important;
  transform: none !important;
  direction: ltr !important;
  unicode-bidi: isolate;
}

.cm-row.is-dragging {
  cursor: grabbing;
}

.cm-track {
  display: flex;
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--cm-gap);
  width: max-content;
  backface-visibility: hidden;
  direction: ltr !important;
  unicode-bidi: isolate;
  transform: translate3d(0, 0, 0);
}

.cm-track.is-running {
  will-change: transform;
}

html[dir="rtl"] .cm-wall,
html[dir="rtl"] .cm-row,
html[dir="rtl"] .cm-track,
html[lang="ar"] .cm-wall,
html[lang="ar"] .cm-row,
html[lang="ar"] .cm-track {
  direction: ltr !important;
  unicode-bidi: isolate;
}

html[dir="rtl"] .cm-track,
html[lang="ar"] .cm-track {
  flex-direction: row !important;
}

.cm-track[data-motion="-1"].is-running {
  animation: cm-marquee-rtl var(--cm-dur, 40s) linear infinite;
}

.cm-track[data-motion="1"].is-running {
  animation: cm-marquee-ltr var(--cm-dur, 45s) linear infinite;
}

.cm-track.is-paused,
.cm-track.is-dragging {
  animation-play-state: paused !important;
}

@keyframes cm-marquee-rtl {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@keyframes cm-marquee-ltr {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@media (hover: hover) and (pointer: fine) {
  .cm-row:hover .cm-track.is-running {
    animation-play-state: paused;
  }
  .cm-row:hover .cm-card:hover {
    transform: translate3d(0, -6px, 0);
    filter: brightness(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cm-track.is-running {
    animation: none !important;
    transform: translate3d(0, 0, 0) !important;
  }
}