/* Umoji Studio Asset Sync: 2026-09-12-r1 */
/**
 * ==============================================================================
 * UMOJI STUDIO — CLIENT LOGOS PURE RUNNING MARQUEE COMPONENT
 * ==============================================================================
 * Features:
 * - Pure Running Logos (Continuous uninterrupted horizontal stream)
 * - 100% Mathematically Seamless Infinite Loop (zero glitch, zero stutter)
 * - Zero hover disruption (no scale, no color pop, no pausing)
 * - Smooth, subtle hairline top & bottom borders (#ededed)
 * - Hardware accelerated will-change: transform
 * - Masked side fade edge gradients (soft dissolve on left & right borders)
 * - Understated monochrome logo aesthetic
 */

.light-clients {
  position: relative;
  width: 100%;
  padding: 38px 0;
  margin: 3rem 0;
  background-color: var(--bg-body);
  overflow: hidden;
}

.light-clients__container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* --------------------------------------------------------------------------
 * Infinite Marquee Track & Shell
 * -------------------------------------------------------------------------- */
.light-clients__marquee-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 4px 0;
  /* Soft Edge Dissolve Masks */
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.light-clients__track {
  display: flex;
  width: max-content;
  gap: 60px;
  user-select: none;
  pointer-events: none;
}

.light-clients__group {
  display: flex;
  align-items: center;
  gap: 60px;
  flex-shrink: 0;
  animation: lightClientsMarquee 80s linear infinite;
  will-change: transform;
}

@keyframes lightClientsMarquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-100% - 60px));
  }
}

/* --------------------------------------------------------------------------
 * Individual Client Logo Card (Natural Colors, Larger Proportions)
 * -------------------------------------------------------------------------- */
.light-clients__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  min-width: 155px;
  height: 68px;
  background: transparent;
  flex-shrink: 0;
  pointer-events: none;
  cursor: default;
}

.light-clients__img {
  width: auto;
  max-width: 175px;
  object-fit: contain;
  /* Natural Brand Color - No Dark / Grayscale Filter */
  filter: none;
  opacity: 1;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* --------------------------------------------------------------------------
 * Tablet Responsive (769px - 1024px)
 * -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .light-clients {
    padding: 28px 0;
    margin: 2.5rem 0;
  }

  .light-clients__track,
  .light-clients__group {
    gap: 48px;
  }

  @keyframes lightClientsMarquee {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(calc(-100% - 48px));
    }
  }

  .light-clients__item {
    min-width: 130px;
    height: 58px;
    padding: 6px 14px;
  }

  .light-clients__img {
    max-width: 145px;
  }
}

/* --------------------------------------------------------------------------
 * Mobile Responsive (<= 768px)
 * -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .light-clients {
    padding: 22px 0;
    margin: 2rem 0;
  }

  .light-clients__container {
    padding: 0 16px;
  }

  .light-clients__marquee-wrapper {
    mask-image: linear-gradient(to right, transparent, black 7%, black 93%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 7%, black 93%, transparent);
    padding: 2px 0;
  }

  .light-clients__track,
  .light-clients__group {
    gap: 36px;
  }

  @keyframes lightClientsMarquee {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(calc(-100% - 36px));
    }
  }

  .light-clients__group {
    animation-duration: 48s;
  }

  .light-clients__item {
    min-width: 110px;
    height: 50px;
    padding: 4px 10px;
  }

  .light-clients__img {
    max-width: 120px;
  }
}