/* 012 — Dot Wave Loader
   Cinq points, une seule keyframe partagée, déphasages NÉGATIFS (aucune
   frame morte au premier cycle) : la vague voyage de gauche à droite.
   Léger rebond sous la ligne de base à 64 % pour un settle organique.
   Teinte : dégradé accent → accent-2 le long de la rangée (color-mix,
   avec fallback accent si non supporté). Glow via currentColor. */

.dot-wave-loader {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.dot-wave-loader__track {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 20px 4px 6px; /* headroom pour l'amplitude de la vague */
}

.dot-wave-loader__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  color: var(--ml-accent, #7c8cff);
  background: currentColor;
  box-shadow: 0 0 12px 0 currentColor;
  animation: dot-wave-loader-wave var(--dot-wave-loader-period, 1.4s)
    cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* déphasage : -0.1 période par point, du plus ancien (gauche) au plus récent */
.dot-wave-loader__dot:nth-child(1) {
  animation-delay: calc(var(--dot-wave-loader-period, 1.4s) * -0.4);
}

.dot-wave-loader__dot:nth-child(2) {
  color: color-mix(in oklab, var(--ml-accent, #7c8cff) 75%, var(--ml-accent-2, #2dd4bf));
  animation-delay: calc(var(--dot-wave-loader-period, 1.4s) * -0.3);
}

.dot-wave-loader__dot:nth-child(3) {
  color: color-mix(in oklab, var(--ml-accent, #7c8cff) 50%, var(--ml-accent-2, #2dd4bf));
  animation-delay: calc(var(--dot-wave-loader-period, 1.4s) * -0.2);
}

.dot-wave-loader__dot:nth-child(4) {
  color: color-mix(in oklab, var(--ml-accent, #7c8cff) 25%, var(--ml-accent-2, #2dd4bf));
  animation-delay: calc(var(--dot-wave-loader-period, 1.4s) * -0.1);
}

.dot-wave-loader__dot:nth-child(5) {
  color: var(--ml-accent-2, #2dd4bf);
}

.dot-wave-loader__label {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ml-muted, #8b91a3);
  animation: dot-wave-loader-breathe calc(var(--dot-wave-loader-period, 1.4s) * 2)
    ease-in-out infinite;
}

/* 0 % et 100 % identiques → boucle continue. Pic à 32 %, rebond à 64 %. */
@keyframes dot-wave-loader-wave {
  0%,
  100% {
    transform: translateY(0) scale(0.82);
    opacity: 0.4;
  }
  32% {
    transform: translateY(-16px) scale(1.12);
    opacity: 1;
  }
  64% {
    transform: translateY(2px) scale(0.94);
    opacity: 0.55;
  }
}

@keyframes dot-wave-loader-breathe {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dot-wave-loader__dot,
  .dot-wave-loader__label {
    animation: none;
  }

  /* vague figée : traînée d'opacité décroissante, toujours lisible */
  .dot-wave-loader__dot:nth-child(1) {
    opacity: 0.95;
  }

  .dot-wave-loader__dot:nth-child(2) {
    opacity: 0.8;
  }

  .dot-wave-loader__dot:nth-child(3) {
    opacity: 0.62;
  }

  .dot-wave-loader__dot:nth-child(4) {
    opacity: 0.48;
  }

  .dot-wave-loader__dot:nth-child(5) {
    opacity: 0.35;
  }

  .dot-wave-loader__label {
    opacity: 0.8;
  }
}