/* 010 — Metaball Loader
   Blobs en orbite qui fusionnent avec le noyau via un filtre SVG goo.
   Période globale : --metaball-loader-period (3.6s). Rotation = période,
   oscillation radiale = période / 2 (alternate) → boucle sans couture. */

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

/* svg porteur du filtre goo — aucune emprise visuelle */
.metaball-loader__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.metaball-loader__stage {
  position: relative;
  width: 120px;
  height: 120px;
  filter: url(#goo-metaball-loader) drop-shadow(0 0 18px rgba(124, 140, 255, 0.28));
  filter: url(#goo-metaball-loader)
    drop-shadow(0 0 18px color-mix(in srgb, var(--ml-accent, #7c8cff) 30%, transparent));
}

/* noyau central qui respire */
.metaball-loader__core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: var(--ml-accent, #7c8cff);
  animation: metaball-loader-pulse var(--metaball-loader-period, 3.6s)
    cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* cadre orbital : rotation continue, linéaire */
.metaball-loader__orbit {
  position: absolute;
  inset: 0;
  animation: metaball-loader-spin var(--metaball-loader-period, 3.6s) linear infinite;
}

.metaball-loader__orbit:nth-child(2) {
  animation-delay: calc(var(--metaball-loader-period, 3.6s) / -3);
}

.metaball-loader__orbit:nth-child(3) {
  animation-delay: calc(var(--metaball-loader-period, 3.6s) / -3 * 2);
}

/* blob satellite : va-et-vient radial vers le noyau */
.metaball-loader__blob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: var(--ml-accent, #7c8cff);
  animation: metaball-loader-swing calc(var(--metaball-loader-period, 3.6s) / 2)
    cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

.metaball-loader__orbit:nth-child(2) .metaball-loader__blob {
  background: var(--ml-accent-2, #2dd4bf);
  animation-delay: calc(var(--metaball-loader-period, 3.6s) / -3);
}

.metaball-loader__orbit:nth-child(3) .metaball-loader__blob {
  animation-delay: calc(var(--metaball-loader-period, 3.6s) / -3 * 2);
}

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

@keyframes metaball-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes metaball-loader-swing {
  from {
    transform: translateX(6px);
  }
  to {
    transform: translateX(38px);
  }
}

@keyframes metaball-loader-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.28);
  }
}

@keyframes metaball-loader-breathe {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .metaball-loader__core,
  .metaball-loader__orbit,
  .metaball-loader__blob,
  .metaball-loader__label {
    animation: none;
  }

  /* pose statique : cluster goo en triangle, toujours lisible comme loader */
  .metaball-loader__orbit:nth-child(2) {
    transform: rotate(120deg);
  }

  .metaball-loader__orbit:nth-child(3) {
    transform: rotate(240deg);
  }

  .metaball-loader__blob {
    transform: translateX(24px);
  }

  .metaball-loader__label {
    opacity: 0.8;
  }
}