/* ============================================================
   RESTMIC LOADER
   Site-wide loader. Markup: partials/site/loader.htm
   Behaviour: assets/js/loader.js (RestmicLoader.show / hide)

   Two modes:
   - Section loader:   covers one element (e.g. a card)
   - Full-page loader: covers the whole screen (.is-fullpage)
   ============================================================ */

:root {
    --restmic-loader-brand: #1678a8;
    --restmic-loader-accent: #2ec4b6;
    --restmic-loader-track: rgba(22, 120, 168, 0.12);
    --restmic-loader-overlay: rgba(255, 255, 255, 0.86);
    --restmic-loader-text: #475569;
    --restmic-loader-size: 64px;
}


/* ------------------------------------------------------------
   PARENT OF A SECTION LOADER
   loader.js adds this class only when the element is not
   already positioned, so the overlay stays inside it.
   ------------------------------------------------------------ */

.restmic-loader-host {
    position: relative;
}


/* ------------------------------------------------------------
   OVERLAY
   ------------------------------------------------------------ */

.restmic-loader {
    position: absolute;
    inset: 0;
    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background: var(--restmic-loader-overlay);

    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);

    animation: restmic-loader-fade-in 0.2s ease;
}

/*
 * Section loader: show the logo near the top of the element and
 * keep it in view while scrolling (tall cards would otherwise
 * push a centred logo below the screen).
 */
.restmic-loader:not(.is-fullpage) {
    align-items: flex-start;

    padding-top: clamp(24px, 12vh, 140px);
}

.restmic-loader:not(.is-fullpage) .restmic-loader-box {
    position: sticky;
    top: 120px;
}

.restmic-loader.is-fullpage {
    position: fixed;
    z-index: 9999;
}


/* ------------------------------------------------------------
   CONTENT
   ------------------------------------------------------------ */

.restmic-loader-box {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 14px;

    text-align: center;
}

.restmic-loader-logo {
    position: relative;

    width: var(--restmic-loader-size);
    height: var(--restmic-loader-size);

    display: flex;
    align-items: center;
    justify-content: center;
}

/* Spinning ring around the logo */
.restmic-loader-ring {
    position: absolute;
    inset: -8px;

    border-radius: 50%;

    border: 3px solid var(--restmic-loader-track);
    border-top-color: var(--restmic-loader-brand);
    border-right-color: var(--restmic-loader-accent);

    animation: restmic-loader-spin 0.9s linear infinite;
}

.restmic-loader-image,
.restmic-loader-mark {
    width: 100%;
    height: 100%;

    border-radius: 50%;

    animation: restmic-loader-pulse 1.6s ease-in-out infinite;
}

.restmic-loader-image {
    display: block;

    object-fit: cover;
}

/* Fallback when no logo is set in Theme settings */
.restmic-loader-mark {
    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--restmic-loader-brand);

    color: #ffffff;

    font-size: 26px;
    font-weight: 700;
}

.restmic-loader-message {
    margin: 0;

    max-width: 280px;

    color: var(--restmic-loader-text);

    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
}


/* ------------------------------------------------------------
   ANIMATIONS
   ------------------------------------------------------------ */

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

@keyframes restmic-loader-pulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.92);
    }
}

@keyframes restmic-loader-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* Respect users who turn off animations in their OS */
@media (prefers-reduced-motion: reduce) {

    .restmic-loader,
    .restmic-loader-image,
    .restmic-loader-mark {
        animation: none;
    }

    .restmic-loader-ring {
        animation-duration: 2.4s;
    }

}