/* Moothmaro logo loader: a light band sweeps across the logo while it breathes.
   Usage: <span class="mm-loader" role="status" aria-label="Loading"></span>
   Sizes: mm-loader-xs (16) / -sm (22) / default (48) / -lg (80) / -xl (112), or set --mm-loader-size.
   mm-loader-mono paints the logo in currentColor, for use on coloured buttons. */
.mm-loader {
  --mm-loader-size: 48px;
  display: inline-block;
  flex: none;
  width: var(--mm-loader-size);
  height: calc(var(--mm-loader-size) * 184 / 192);
  vertical-align: middle;
  -webkit-mask: url("../images/logo-loader.png") center / contain no-repeat;
          mask: url("../images/logo-loader.png") center / contain no-repeat;
  background:
    linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .75) 50%, transparent 65%) 150% 0 / 250% 100% no-repeat,
    url("../images/logo-loader.png") center / contain no-repeat;
  animation: mm-loader-shine 1.6s ease-in-out infinite, mm-loader-breathe 1.6s ease-in-out infinite;
}

.mm-loader-mono {
  background:
    linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .9) 50%, transparent 65%) 150% 0 / 250% 100% no-repeat,
    color-mix(in srgb, currentColor 70%, transparent);
}

.mm-loader-xs { --mm-loader-size: 16px; }
.mm-loader-sm { --mm-loader-size: 22px; }
.mm-loader-lg { --mm-loader-size: 80px; }
.mm-loader-xl { --mm-loader-size: 112px; }

.mm-loader-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 0;
  text-align: center;
}

@keyframes mm-loader-shine {
  from { background-position: 150% 0, center; }
  to { background-position: -50% 0, center; }
}

@keyframes mm-loader-breathe {
  50% { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .mm-loader { animation-duration: 3.2s; }
}