/*
 * Alf Theme — Home Page Clients / Logo Bar Section
 * Figma node: 665:7176
 *
 * Infinite left-scrolling marquee.
 * The track contains the logo set twice; translateX(0 → -50%) loops seamlessly.
 */

/* ═══════════════════════════════════════════════════════════════════
   SECTION
   ═══════════════════════════════════════════════════════════════════ */
.clients {
  background-color: var(--color-bg);
  padding: 60px 0; /* no side padding — marquee runs full width */
  overflow: hidden; /* clip the scrolling track */
}

/* ═══════════════════════════════════════════════════════════════════
   VIEWPORT  — clips overflow, full section width
   ═══════════════════════════════════════════════════════════════════ */
.clients__viewport {
  width: 100%;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════
   TRACK  — flex row; width is naturally 2× one logo set
   Animation: translateX(0) → translateX(-50%)
   -50% of (2 sets) = exactly one full set width → seamless loop
   ═══════════════════════════════════════════════════════════════════ */
.clients__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  /* width is intrinsic (max-content); let it grow */
  width: max-content;
  animation: clients-scroll 28s linear infinite;
  will-change: transform;
}

/* Pause marquee when the user hovers — lets them read logos */
.clients__track:hover,
.clients__viewport:hover .clients__track {
  animation-play-state: paused;
}

/* ── Keyframe ───────────────────────────────────────────────────── */
@keyframes clients-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ═══════════════════════════════════════════════════════════════════
   DUPLICATE SET  — sits immediately after the first set in the track
   ═══════════════════════════════════════════════════════════════════ */
.clients__dupe {
  display: contents; /* transparent wrapper — children join the flex row */
}

/* ═══════════════════════════════════════════════════════════════════
   INDIVIDUAL LOGO
   ═══════════════════════════════════════════════════════════════════ */
.clients__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 32px; /* half of 64px gap, applied on both sides so edges match */
}

.clients__logo img {
  display: block;
  max-height: 70px;
  width: auto;
  object-fit: contain;
  user-select: none;
  pointer-events: none; /* prevent drag-stutter */
}

/* ═══════════════════════════════════════════════════════════════════
   ACCESSIBILITY — respect reduced-motion preference
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .clients__track {
    animation: none;
    /* fall back to a centred static row */
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
    width: 100%;
  }
  /* hide the duplicate set when animation is off */
  .clients__dupe {
    display: none;
  }
  .clients {
    padding: 60px var(--section-pad-x);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .clients {
    padding: 48px 0;
  }
  .clients__logo {
    padding: 0 24px;
  }
  .clients__logo img {
    max-height: 54px;
  }
  .clients__track {
    animation-duration: 22s;
  }
}

@media (max-width: 600px) {
  .clients {
    padding: 36px 0;
  }
  .clients__logo {
    padding: 0 18px;
  }
  .clients__logo img {
    max-height: 42px;
  }
  .clients__track {
    animation-duration: 18s;
  }
}