/*
 * Slider automatico de creadores (replica src/marketing_website/SliderCreators.tsx
 * + Scrolling.tsx del frontend). El frontend usa Swiper con loop + autoplay
 * continuo (speed=7000, delay=0). Aqui reemplazamos Swiper por CSS @keyframes
 * puro: cero JS, cero runtime cost, mismo efecto visual.
 *
 * Como funciona:
 * - El track contiene los 10 slides duplicados (20 en total) para crear el
 *   loop infinito: cuando la mitad 1 sale de pantalla, la mitad 2 ya esta
 *   visible. Al completar 50% de translateX, reiniciamos y parece continuo.
 * - La animacion dura 40s en desktop y 25s en mobile (mas rapido en pantallas
 *   chicas porque hay menos ancho que recorrer).
 * - pause on hover por usabilidad.
 */
.creators-slider {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.creators-slider__track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  animation: creators-slider-scroll 40s linear infinite;
}

.creators-slider:hover .creators-slider__track {
  animation-play-state: paused;
}

.creators-slider__slide {
  flex-shrink: 0;
  width: 340px;
}

@media (max-width: 768px) {
  .creators-slider__slide {
    width: 200px;
  }
  .creators-slider__track {
    animation-duration: 25s;
  }
}
@keyframes creators-slider-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .creators-slider__track {
    animation: none;
  }
}