/* /var/www/relyn/static_src/css/clients.css */

.clients-section {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 40px 24px 80px;
}

.clients-shell {
  position: relative;
  width: 100%;
  max-width: 1874px;
  overflow: hidden;
  padding: 20px 0;

  /* ✅ Fade width (controls how wide the side fade is) */
  --fade-w: 160px;

  /* ✅ Logo spacing inside the group */
  --logo-gap: 20px;

  /*
    ✅ PERFECT BLEND FIX:
    Fade the CONTENT using a mask, not a colored overlay.
    This does NOT touch or change your background at all.
  */
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) var(--fade-w),
    rgba(0, 0, 0, 1) calc(100% - var(--fade-w)),
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) var(--fade-w),
    rgba(0, 0, 0, 1) calc(100% - var(--fade-w)),
    rgba(0, 0, 0, 0) 100%
  );

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* ✅ Remove the old overlay gradients (they cause the black band) */
.clients-shell::before,
.clients-shell::after {
  content: none;
}

.clients-rows {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.client-row {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/*
  ✅ IMPORTANT:
  Track must have NO gap between groups to keep the seam perfect.
  Spacing is inside each group so group widths remain identical.
*/
.client-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 0;

  /* JS sets these */
  --shift: 1000px;
  --dur: 20s;

  animation-duration: var(--dur);
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.client-track-group {
  display: flex;
  align-items: center;
  gap: var(--logo-gap);

  /* creates spacing between groups while keeping seam math perfect */
  padding-right: var(--logo-gap);

  flex: 0 0 auto;
}

/* ✅ Reduced logo size a bit (all breakpoints, unless overridden) */
.client-logo {
  width: 76px;
  height: 68px;
  object-fit: contain;
  filter: grayscale(0.1);
  opacity: 0.95;

  transform: translateZ(0);
  backface-visibility: hidden;
  flex: 0 0 auto;
}

/* Direction */
.client-track[data-marquee="left"] {
  animation-name: marquee-left;
}

.client-track[data-marquee="right"] {
  animation-name: marquee-right;
}

/* ✅ Pixel-perfect seam: move exactly ONE group width (set by JS) */
@keyframes marquee-left {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(calc(-1 * var(--shift)), 0, 0); }
}

@keyframes marquee-right {
  0% { transform: translate3d(calc(-1 * var(--shift)), 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .client-track {
    animation: none !important;
    transform: none !important;
  }
}

@media (max-width: 768px) {
  .clients-shell {
    --fade-w: 80px;
    --logo-gap: 16px;
  }

  .client-logo {
    width: 70px;
    height: 62px;
  }
}

@media (max-width: 480px) {
  .clients-section {
    padding: 32px 16px 64px;
  }

  .clients-shell {
    --fade-w: 60px;
    --logo-gap: 14px;
  }

  .client-logo {
    width: 66px;
    height: 58px;
  }
}