/* =========================================================
   Alliance Clients Slider — Front-end stylesheet
   Continuous right-to-left logo scroll with edge fade + pause-on-hover.
   ========================================================= */

.alliance-clients-slider {
  --alliance-logo-h: 48px;
  --alliance-scroll-dur: 40s;
  --alliance-logo-gap: 64px;

  position: relative;
  width: 100%;
  overflow: hidden;
  /* Fade in / out at the left and right edges */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 10%,
    #000 90%,
    transparent 100%
  );
          mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 10%,
    #000 90%,
    transparent 100%
  );
}

.alliance-clients-track {
  display: flex;
  width: max-content;
  animation: alliance-clients-scroll var(--alliance-scroll-dur) linear infinite;
  will-change: transform;
}

/* Pause on hover */
.alliance-clients-slider:hover .alliance-clients-track {
  animation-play-state: paused;
}

.alliance-clients-set {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.alliance-clients-logo {
  height: var(--alliance-logo-h);
  margin-right: var(--alliance-logo-gap);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.alliance-clients-logo img {
  height: 100%;
  width: auto;
  max-width: none; /* override theme defaults that cap width */
  display: block;
  -webkit-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
}

/* Right-to-left scroll: track translates from 0 to -50%
   (-50% = exactly one set width, since we render the set twice). */
@keyframes alliance-clients-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  .alliance-clients-track {
    animation: none;
    transform: none;
  }
  .alliance-clients-slider {
    overflow-x: auto;
  }
}