/* ======================================================
   LUX WAVE — paillettes d'or : flux gauche→droite (en boucle)
   + flottement individuel naturel & aléatoire de chaque paillette
   ====================================================== */
.lux-wave {
  width: 100%;
  height: clamp(90px, 12vw, 170px);
  margin: clamp(1rem, 3vw, 2.75rem) 0;
  overflow: hidden;
  pointer-events: none;
}

/* Le calque entier défile lentement de gauche à droite, sans couture
   (motif dupliqué -> translate -50% = un tour exact) */
.lux-wave__svg {
  display: block;
  width: 200%;
  height: 100%;
  filter: drop-shadow(0 0 5px rgba(228, 193, 120, 0.4));
  animation: luxConvey 26s linear infinite;
}
@keyframes luxConvey {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Chaque paillette dérive aussi pour elle-même (direction/amplitude/durée
   /délai propres, définis inline) et scintille -> mouvement organique */
.lux-wave__spark {
  transform-box: fill-box;
  transform-origin: center;
  animation: luxFloat var(--dur, 4s) ease-in-out infinite;
}
@keyframes luxFloat {
  0%   { translate: 0 0;                       opacity: 0.18; }
  50%  { translate: var(--dx, 0) var(--dy, 0); opacity: 1; }
  100% { translate: 0 0;                       opacity: 0.18; }
}

@media (prefers-reduced-motion: reduce) {
  .lux-wave__svg { animation: none; }
  .lux-wave__spark { animation: none; opacity: 0.75; translate: 0 0; }
}
