/*
 * components/loader.css
 *
 * What:  Global loading overlay — full-screen, semi-transparent backdrop
 *        with the brand logo at the centre and a spinning brand-red
 *        ring around it.
 *
 *        Two modes:
 *          • Fullscreen   — covers the viewport while a request is in
 *                            flight. Driven by /js/ui/loader.js via
 *                            window.EatNDealUi.showLoader() / hideLoader().
 *          • Inline       — small variant for buttons / list cards.
 *                            Apply class `.loader-spinner` directly to
 *                            an inline element (no overlay, just the
 *                            ring).
 *
 * Why:   PWA needs a consistent "we're working on it" affordance. Native
 *        progress UI looks generic; the branded ring + logo reads as
 *        "EatNDeal is doing something" and reinforces brand recognition.
 *
 * Used:  Imported by views/_layout.ejs alongside the other component
 *        CSS. Markup mount is views/partials/loader.ejs.
 */

/* ───────────────────────────────────────────────────────────────
 * Full-screen overlay
 * ─────────────────────────────────────────────────────────────── */

.app-loader {
    position: fixed;
    inset: 0;
    /* Above the modal (--z-modal: 100) so a long upload or
     * redirect-in-flight blocks all interaction. Below browser
     * chrome (system UI) which is OS-level and outside our z-stack. */
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 160ms ease;
}
.app-loader[aria-hidden="false"] {
    pointer-events: auto;
    opacity: 1;
}

/* Soft white wash with a backdrop blur so the page peeks through
 * just enough to remind the user where they were. Backdrop-filter
 * lacks support in some older browsers; the rgba fallback below the
 * filter is still readable on its own. */
.app-loader__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.72);
    backdrop-filter: saturate(160%) blur(4px);
    -webkit-backdrop-filter: saturate(160%) blur(4px);
}

/* Card containing the spinner + logo + label. Sized for desktop;
 * shrunk via the mobile @media block below. The card itself has no
 * background — it's just a layout box centred over the backdrop. */
.app-loader__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
}

/* Ring + logo are stacked using a relative wrapper. The ring is the
 * spinning border; the logo sits at the centre with a gentle pulse. */
.app-loader__ringwrap {
    position: relative;
    width: 120px;
    height: 120px;
    display: grid;
    place-items: center;
}

.app-loader__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    /* Brand-red ring with a transparent top arc — that gap is what
     * makes it visually obvious the ring is rotating. 4 px feels
     * solid on desktop without being chunky. */
    border: 4px solid var(--color-primary-soft);
    border-top-color: var(--color-primary);
    animation: app-loader-spin 800ms linear infinite;
}

/* Subtle inner ring travelling the opposite direction — adds depth
 * without distracting from the logo. */
.app-loader__ring--inner {
    inset: 12px;
    border-width: 3px;
    border-color: transparent;
    border-bottom-color: var(--color-primary-dark);
    animation: app-loader-spin 1200ms linear infinite reverse;
}

.app-loader__logo {
    /* Slightly smaller than the inner ring so the rings sit clearly
     * around it. Drop-shadow lifts the logo off the backdrop and
     * keeps it readable when the user's underlying page is busy. */
    width: 64px;
    height: 64px;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(229, 37, 42, 0.25));
    animation: app-loader-pulse 1400ms ease-in-out infinite;
}

.app-loader__label {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-primary-dark);
    letter-spacing: 0.02em;
}

/* ───────────────────────────────────────────────────────────────
 * Inline spinner — drop-in for buttons / cards
 * Usage: <span class="loader-spinner" role="status" aria-label="Loading"></span>
 * Optional sizes: .loader-spinner--sm   (16 px ring)
 *                  .loader-spinner--lg   (40 px ring)
 * ─────────────────────────────────────────────────────────────── */

.loader-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 2.5px solid var(--color-primary-soft);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: app-loader-spin 700ms linear infinite;
    vertical-align: middle;
}
.loader-spinner--sm { width: 16px; height: 16px; border-width: 2px; }
.loader-spinner--lg { width: 40px; height: 40px; border-width: 3px; }

/* On a coloured button (e.g. .btn--primary) we want the spinner to
 * be white-on-transparent — flip the colours when nested. */
.btn .loader-spinner {
    border-color: rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
}

/* ───────────────────────────────────────────────────────────────
 * Mobile shrink — keeps the loader proportional to small screens.
 * The container card scales down 25 %; ring + logo follow.
 * ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .app-loader__ringwrap { width: 92px; height: 92px; }
    .app-loader__ring     { border-width: 3px; }
    .app-loader__ring--inner { inset: 10px; border-width: 2.5px; }
    .app-loader__logo     { width: 48px; height: 48px; }
    .app-loader__label    { font-size: 0.88rem; }
}

/* ───────────────────────────────────────────────────────────────
 * Reduced motion — users who've asked for less animation get a
 * static logo + ring, no spinning / pulsing.
 * ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .app-loader__ring,
    .app-loader__ring--inner,
    .app-loader__logo,
    .loader-spinner {
        animation: none;
    }
}

/* ───────────────────────────────────────────────────────────────
 * Keyframes
 * ─────────────────────────────────────────────────────────────── */
@keyframes app-loader-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes app-loader-pulse {
    0%, 100% { transform: scale(1);    opacity: 1;   }
    50%      { transform: scale(0.92); opacity: 0.85; }
}