/* ================================================================
   HYL Logistics - Carousel CSS
   Contains: Auto-scrolling References Logo Carousel
   ================================================================ */

.references-section {
  background: white;
}

.carousel-container {
  margin-top: var(--section-content-mt);
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
}

.carousel-track {
  display: flex;
  gap: var(--spacing-lg);
  animation: scroll 30s linear infinite;
}

.carousel-track:hover {
  animation-play-state: paused;
}

.carousel-item {
  flex: 0 0 auto;
  width: 200px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm);
  background: var(--color-bg-light);
  border-radius: var(--border-radius);
  filter: grayscale(100%);
  opacity: 0.7;
  transition: var(--transition-fast);
}

.carousel-item:hover {
  filter: grayscale(0%);
  opacity: 1;
}

.carousel-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Animation */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-200px * 6 - var(--spacing-lg) * 6));
  }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .carousel-item {
    width: 150px;
    height: 75px;
  }

  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-150px * 6 - var(--spacing-lg) * 6));
    }
  }
}