/*
 * M3 Expressive Loading Indicator — morphing de forma contínua.
 * Spec: https://m3.material.io/components/loading-indicator/overview
 * Cores: tokens --md-sys-color-*
 */

.m3-loading-indicator {
  --m3-li-size: 48px;
  --m3-li-shape: 38px;
  --m3-li-indicator: var(--md-sys-color-primary, #00B793);
  --m3-li-container: var(--md-sys-color-primary-container, #E6FAF6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--m3-li-size);
  height: var(--m3-li-size);
  flex-shrink: 0;
}

.m3-loading-indicator--small {
  --m3-li-size: 36px;
  --m3-li-shape: 28px;
}

.m3-loading-indicator--medium {
  --m3-li-size: 48px;
  --m3-li-shape: 38px;
}

.m3-loading-indicator--large {
  --m3-li-size: 64px;
  --m3-li-shape: 50px;
}

.m3-loading-indicator__track {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.m3-loading-indicator--contained .m3-loading-indicator__track {
  background: var(--m3-li-container);
  border-radius: 999px;
}

.m3-loading-indicator__shape {
  width: var(--m3-li-shape);
  height: var(--m3-li-shape);
  background: var(--m3-li-indicator);
  /* spring-ish: overshoot suave */
  animation:
    m3-li-morph 2.4s cubic-bezier(0.34, 1.4, 0.64, 1) infinite,
    m3-li-spin 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  will-change: border-radius, transform;
}

/* Sequência de formas arredondadas (inspirada no morph M3 Expressive) */
@keyframes m3-li-morph {
  0% {
    border-radius: 50%;
  }
  14% {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  }
  28% {
    border-radius: 58% 42% 38% 62% / 48% 62% 38% 52%;
  }
  42% {
    border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
  }
  56% {
    border-radius: 68% 32% 55% 45% / 35% 65% 35% 65%;
  }
  70% {
    border-radius: 32% 68% 45% 55% / 65% 35% 65% 35%;
  }
  84% {
    border-radius: 48% 52% 62% 38% / 42% 58% 42% 58%;
  }
  100% {
    border-radius: 50%;
  }
}

@keyframes m3-li-spin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(90deg) scale(1.06);
  }
  50% {
    transform: rotate(180deg) scale(0.94);
  }
  75% {
    transform: rotate(270deg) scale(1.06);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .m3-loading-indicator__shape {
    animation: m3-li-pulse 1.2s ease-in-out infinite;
    border-radius: 40% 60% 55% 45% / 55% 40% 60% 45%;
  }

  @keyframes m3-li-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(0.92); }
  }
}