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

.loader {
    position: absolute;
    inset: 0;
    width:  var(--loader-size, 2.75rem);
    height: var(--loader-size, 2.75rem);
    margin: auto;
    border-radius: 50%;
    border: 3px solid var(--loader-track, rgba(255, 255, 255, .2));
    border-top-color: var(--loader-color, #fff);
    /* paused by default: animatie start vers bij activate, geen CPU-waste idle */
    animation: spin var(--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-loading] > .loader {
    animation-play-state: running;
    opacity: 1;
}

@keyframes 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. */
    .loader { animation-duration: 1.5s; }
}