/* =========================================================================
   LOOKBOOK — défilement automatique infini (adapté du composant React
   "image-auto-slider"). Les photos avancent seules en boucle, bords estompés,
   zoom au survol. Le ruban se met en pause quand la souris est dessus.
   ========================================================================= */

/* Mode auto : on masque le scroll manuel et on estompe les bords */
.lookbook-scroller[data-auto] {
  overflow: hidden;
  scroll-snap-type: none;
  cursor: default;
  padding-bottom: 0;
  -webkit-mask: linear-gradient(
    90deg,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask: linear-gradient(
    90deg,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

/* Le ruban qui défile (contient les vignettes + leur duplicata) */
.lookbook-marquee {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: lookbook-scroll 55s linear infinite;
}
@media (min-width: 768px) {
  .lookbook-marquee {
    gap: 2rem;
  }
}

/* Pause au survol pour laisser le temps de regarder */
.lookbook-scroller[data-auto]:hover .lookbook-marquee {
  animation-play-state: paused;
}

@keyframes lookbook-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Zoom doux au survol d'une vignette */
.lookbook-item__img {
  transition: transform 0.4s ease;
}
.lookbook-item:hover .lookbook-item__img {
  transform: scale(1.05);
}

/* Accessibilité : pas d'animation si l'utilisateur l'a désactivée */
@media (prefers-reduced-motion: reduce) {
  .lookbook-marquee {
    animation: none;
  }
}