/* mm-loader — generieke ring-spinner.
 *
 * Themable via CSS custom properties (op parent of ancestor):
 *   --mm-loader-size    default: 2.75rem
 *   --mm-loader-color   default: #fff        (draaiende boog)
 *   --mm-loader-track   default: rgba wit .2 (achtergrond-ring)
 *   --mm-loader-speed   default: 0.65s
 *
 * Activeer via `data-mm-loading` op het parent-element (doet loader.js).
 */

.mm-loader {
    position: absolute;
    inset: 0;
    width:  var(--mm-loader-size, 2.75rem);
    height: var(--mm-loader-size, 2.75rem);
    margin: auto;
    border-radius: 50%;
    border: 3px solid var(--mm-loader-track, rgba(255, 255, 255, .2));
    border-top-color: var(--mm-loader-color, #fff);
    /* paused by default: animatie start vers bij activate, geen CPU-waste idle */
    animation: mm-spin var(--mm-loader-speed, 0.65s) linear infinite;
    animation-play-state: paused;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-fast, 0.15s) ease-out;
    z-index: 1;
}

[data-mm-loading] > .mm-loader {
    animation-play-state: running;
    opacity: 1;
}

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

@media (prefers-reduced-motion: reduce) {
    /* Spinner draait door — loading is functioneel afhankelijk van herhaling.
       Langzamer (0.65s → 1.5s) zodat het minder intens aanvoelt. */
    .mm-loader { animation-duration: 1.5s; }
}