/* ==========================================================================
   Logo Carousel - Infinite Scroll Animation
   ========================================================================== */

.trust-logos-section {
  width: 100%;
  padding-top: var(--space-6);
  padding-bottom: var(--space-16);
  overflow: hidden;
}

.trust-logos-section .container {
  display: flex;
  flex-direction: column;
}

.trust-logos-section .hero-label {
  margin-bottom: var(--space-10);
}

/* Carousel container with mask gradient for fade edges */
.logo-carousel {
  width: 100%;
  overflow: hidden;
  position: relative;
  /* Mask for fade effect on edges */
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 5%,
    black 95%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 5%,
    black 95%,
    transparent 100%
  );
}

/* Animated track */
.logo-carousel-track {
  display: flex;
  align-items: center;
  gap: var(--space-20);
  width: max-content;
  animation: scroll-logos 50s linear infinite;
}

.logo-carousel-track img {
  flex-shrink: 0;
  height: 45px;
  width: auto;
  opacity: 0.9;
  transition: opacity var(--transition-fast);
}

.logo-carousel-track img:hover {
  opacity: 1;
}

/* Ralph Lauren logo is wider, scale it down */
.logo-carousel-track img[alt="Ralph Lauren"] {
  height: 32px;
}

/* Keyframes for infinite scroll */
@keyframes scroll-logos {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Pause animation on hover */
.logo-carousel:hover .logo-carousel-track {
  animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   Responsive Adjustments
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .logo-carousel-track img {
    height: 40px;
  }

  .logo-carousel-track {
    gap: var(--space-16);
  }
}

@media (max-width: 768px) {
  .trust-logos-section {
    padding-bottom: var(--space-10);
  }

  .logo-carousel-track img {
    height: 35px;
  }

  .logo-carousel-track {
    gap: var(--space-12);
    animation-duration: 35s;
  }
}

@media (max-width: 480px) {
  .trust-logos-section .hero-label {
    margin-bottom: var(--space-6);
  }

  .logo-carousel-track img {
    height: 28px;
  }

  .logo-carousel-track {
    gap: var(--space-8);
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .logo-carousel-track {
    animation: none;
  }
}