/**
 * Company Carousel Styles
 * Custom animations for infinite scroll carousel
 */

/* Fade effect on edges */
.company-carousel__row {
  position: relative;
  padding-top: 0.15rem; /* Space for hover lift effect */
  padding-bottom: 0.15rem; /* Balance the spacing */
  overflow-x: hidden; /* Hide horizontal overflow */
  overflow-y: visible; /* Allow vertical overflow for hover effects */
}

.company-carousel__row::before,
.company-carousel__row::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 150px;
  z-index: 10;
  pointer-events: none;
}

.company-carousel__row::before {
  left: 0;
  background: linear-gradient(to right, white, transparent);
}

.company-carousel__row::after {
  right: 0;
  background: linear-gradient(to left, white, transparent);
}

/* Left to right animation */
.company-carousel__track--ltr {
  animation: scroll-ltr 600s linear infinite;
}

/* Right to left animation */
.company-carousel__track--rtl {
  animation: scroll-rtl 600s linear infinite;
}

@keyframes scroll-ltr {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes scroll-rtl {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

@media (max-width: 768px) {
  .company-carousel__track {
    gap: 1rem;
  }

  .company-carousel__track--ltr,
  .company-carousel__track--rtl {
    animation-duration: 400s;
  }

  .company-carousel__row::before,
  .company-carousel__row::after {
    width: 80px;
  }
}