/* 011 — Morph Loader
   Une seule forme qui morphe : cercle → carré arrondi → galet triangulaire
   → transition organique → cercle. Le gradient conique tourne en continu
   dans un pseudo-élément surdimensionné, masqué par la forme.
   Morph : période P. Flux du gradient : 2P linéaire → boucle continue sur 2P.
   Note : border-radius est animé ici — c'est la mécanique même du morph,
   sur un unique élément de 84 px (coût négligeable). */

.morph-loader {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.morph-loader__shape {
  position: relative;
  width: 84px;
  height: 84px;
  overflow: hidden;
  border-radius: 50%;
  animation: morph-loader-morph var(--morph-loader-period, 3.8s)
    cubic-bezier(0.65, 0, 0.35, 1) infinite;
  filter: drop-shadow(0 10px 26px rgba(124, 140, 255, 0.3));
  filter: drop-shadow(0 10px 26px color-mix(in srgb, var(--ml-accent, #7c8cff) 32%, transparent));
}

/* nappe de gradient surdimensionnée, en rotation lente et continue */
.morph-loader__shape::before {
  content: "";
  position: absolute;
  inset: -55%;
  background: conic-gradient(
    var(--ml-accent, #7c8cff),
    var(--ml-accent-2, #2dd4bf),
    var(--ml-accent, #7c8cff)
  );
  animation: morph-loader-flux calc(var(--morph-loader-period, 3.8s) * 2) linear infinite;
}

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

/* 0% et 100% strictement identiques (360deg ≡ 0deg) → aucun saut au loop.
   L'easing s'applique entre chaque étape : la forme « se pose » sur chaque état. */
@keyframes morph-loader-morph {
  0% {
    border-radius: 50%;
    transform: rotate(0deg) scale(1);
  }
  30% {
    border-radius: 26%;
    transform: rotate(120deg) scale(0.9);
  }
  64% {
    border-radius: 50% 50% 16% 16% / 80% 80% 20% 20%;
    transform: rotate(240deg) scale(1.06);
  }
  84% {
    border-radius: 62% 38% 46% 54% / 48% 62% 38% 52%;
    transform: rotate(300deg) scale(0.97);
  }
  100% {
    border-radius: 50%;
    transform: rotate(360deg) scale(1);
  }
}

@keyframes morph-loader-flux {
  to {
    transform: rotate(360deg);
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .morph-loader__shape,
  .morph-loader__shape::before,
  .morph-loader__label {
    animation: none;
  }

  /* état statique : cercle gradient, toujours élégant */
  .morph-loader__label {
    opacity: 0.8;
  }
}