/* MaxiMind · variant D “Nhịp thở & tia nhỏ”. Canonical period: 2.4 seconds. */
.mm-loader {
  color: var(--mm-loader-ink, var(--mm-accent));
  display: block;
  overflow: visible;
  flex: none;
}
.mm-loader--16 { width: 16px; height: 16px; }
.mm-loader--24 { width: 24px; height: 24px; }
.mm-loader--48 { width: 48px; height: 48px; }
.mm-loader--96 { width: 96px; height: 96px; }
.mm-loader .mm-loader__ink { animation: mm-loader-breathe 2.4s ease-in-out infinite; }
.mm-loader .mm-loader__base { opacity: 1; }
.mm-loader .mm-loader__still-dot { display: none; }
.mm-loader--16 .mm-loader__spark,
.mm-loader--24 .mm-loader__spark { display: none; }
@keyframes mm-loader-breathe { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes mm-loader-dot-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
/* Explicit preview/app override; OS preference always takes precedence. */
.mm-loader--reduced .mm-loader__dot,
.mm-loader--reduced .mm-loader__reaction { display: none; }
.mm-loader--reduced .mm-loader__ink { animation: none; }
.mm-loader--reduced .mm-loader__still-dot {
  display: block;
  animation: mm-loader-dot-pulse 2s ease-in-out infinite;
}
.mm-loader--paused, .mm-loader--paused * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .mm-loader .mm-loader__dot, .mm-loader .mm-loader__reaction { display: none; }
  .mm-loader .mm-loader__ink { animation: none; }
  .mm-loader .mm-loader__still-dot {
    display: block;
    animation: mm-loader-dot-pulse 2s ease-in-out infinite;
  }
}

/* Inline markup: one small composited HTML layer; the mm glyph stays rasterized. */
.mm-loader--compositor {
  will-change: transform, opacity;
  transform-origin: center;
  animation: mm-loader-compositor-breathe 2.4s ease-in-out infinite;
}
.mm-loader--compositor > .mm-loader__glyph { display: block; width: 100%; height: 100%; }
@keyframes mm-loader-compositor-breathe {
  0%, 100% { transform: scale(.94); opacity: .65; }
  50% { transform: scale(1); opacity: 1; }
}
/* Even reduced motion keeps gentle opacity feedback, without spatial motion. */
.mm-loader--compositor.mm-loader--reduced { animation-name: mm-loader-compositor-shimmer; }
@keyframes mm-loader-compositor-shimmer {
  0%, 100% { opacity: .65; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  /* Phi's rule: Reduce Motion shows a static mm mark. */
  .mm-loader--compositor { animation: none; }
}