@import url('variables.css');

/* ============================================
   TESTIMONIALS / CLIENTS SECTION
   ============================================ */
.testimonials {
  width: 100%;
  padding-top: 80px;
  overflow: hidden;
  margin-bottom: 120px;
}

/* Header */
.testimonials__header {
  padding-left: 28px;
}

.testimonials__title {
  font-family: var(--sec-fontfamily);
  font-size: clamp(48px, 8vw, 112px);
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 2px;
  margin: 0 0 40px 0;
}

/* Infinite Slider */
.testimonials__slider {
  width: 100%;
  overflow: hidden;
}

.testimonials__track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: scroll-logos 30s linear infinite;
}

/* Logo Card */
.testimonials__card {
  flex-shrink: 0;
  width: 200px;
  aspect-ratio: 312 / 222;
  background: var(--surface-primary);
  border: 1px solid var(--border-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.testimonials__logo {
  max-width: 60%;
  max-height: 60%;
  object-fit: contain;
}

@keyframes scroll-logos {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50% - 8px));
  }
}

/* ============================================
   DESKTOP
   ============================================ */
@media (min-width: 1024px) {
  .testimonials__header {
    padding: 0 28px;
  }

  .testimonials__track {
    gap: 31px;
  }

  .testimonials__card {
    width: 312px;
  }

  @keyframes scroll-logos {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-50% - 15.5px));
    }
  }
}