/* =============================================================================
   marketplace-loader.css
   (wwwroot/css/marketplace-loader.css)
   -----------------------------------------------------------------------------
   Marketplace branded loader — shown during navigation INTO /marketplace and
   /marketplace/register (armed by the dropdown rows in marketplace-header.js,
   plus an auto-trigger on direct entry to a marketplace URL).

   Visual concept: "the storefront opens for business".
     • Sunset-orange sun rises behind a charcoal storefront silhouette
     • Awning ribs paint in with the orange→cyan brand gradient
     • A cyan scan-beam sweeps across the storefront (echoing the header
       glyph's signature scan line — same brand language)
     • Three sky-blue verified-tick badges pop in one after another above
       the awning ("listings being verified")
     • A cloud-white shape drifts across the top
     • Wordmark resolves: "Ikhayalami" with the SKY-BLUE dot on the first "i",
       "Marketplace" with the SUNSET-ORANGE dot on its "i" — direct brand spec

   Palette — STRICT brand tokens, nothing new:
     --mpl-ink            #0E0E11   wordmark + storefront silhouette strokes
     --mpl-ink-soft       #1A1A1F   secondary text
     --mpl-orange         #F58220   the sun, register accent
     --mpl-orange-warm    #F89622   sun gradient stop
     --mpl-sky            #56C4F8   verified tick fill, "i" dot on Ikhayalami
     --mpl-sky-deep       #3FA9D9   wave detail
     --mpl-cloud          #F4F6F9   cloud, ambient soft-grey
     --mpl-cream          #FFFCF7   warm-white canvas (NOT pure white — feels
                                    like morning light, suits a marketplace)

   Namespaced under .mpl-* to coexist with:
     .loader-*  — generic site loader (white canvas)
     .tpl-*     — tenant+ loader (dark canvas)
     .mp-*      — marketplace landing view
   ============================================================================= */

.mpl-overlay {
    /* Tokens scoped to the overlay so child selectors stay short */
    --mpl-ink: #0E0E11;
    --mpl-ink-soft: #1A1A1F;
    --mpl-orange: #F58220;
    --mpl-orange-warm: #F89622;
    --mpl-sky: #56C4F8;
    --mpl-sky-deep: #3FA9D9;
    --mpl-cloud: #F4F6F9;
    --mpl-cream: #FFFCF7;

    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Warm cream → soft sky horizon. NOT pure white — gives the canvas a
       morning-light quality that fits "the marketplace opening for business". */
    background:
        radial-gradient(circle at 50% 78%, rgba(86, 196, 248, 0.10), transparent 55%),
        radial-gradient(circle at 50% 30%, rgba(245, 130, 32, 0.06), transparent 60%),
        linear-gradient(180deg, var(--mpl-cream) 0%, #FBF7F0 70%, #F4F1EA 100%);
    color: var(--mpl-ink);
    font-family: 'Outfit', 'DM Sans', system-ui, sans-serif;
    opacity: 1;
    transition: opacity 320ms cubic-bezier(.22, 1, .36, 1);
    overflow: hidden;
}

.mpl-overlay.mpl-hidden {
    opacity: 0;
    pointer-events: none;
}

/* ── Faint horizon line — defines a "ground" the storefront sits on ─── */
.mpl-overlay::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 64%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(14, 14, 17, 0.08) 25%,
        rgba(14, 14, 17, 0.12) 50%,
        rgba(14, 14, 17, 0.08) 75%,
        transparent 100%);
    pointer-events: none;
}

/* ── Drifting cloud — top-right, slow horizontal float ──────────────── */
/* A pure CSS cloud shape using a radial gradient mask. No image needed. */
.mpl-cloud {
    position: absolute;
    top: 14%;
    left: 0;
    width: 140px;
    height: 50px;
    background:
        radial-gradient(circle at 22% 60%, var(--mpl-cloud) 18px, transparent 19px),
        radial-gradient(circle at 42% 40%, var(--mpl-cloud) 24px, transparent 25px),
        radial-gradient(circle at 62% 50%, var(--mpl-cloud) 22px, transparent 23px),
        radial-gradient(circle at 80% 65%, var(--mpl-cloud) 16px, transparent 17px);
    opacity: 0.85;
    filter: drop-shadow(0 4px 8px rgba(14, 14, 17, 0.04));
    animation: mpl-cloud-drift 14s linear infinite;
    pointer-events: none;
}

/* Second cloud, lower-left, smaller, slower — adds depth */
.mpl-cloud-2 {
    position: absolute;
    top: 24%;
    left: 0;
    width: 90px;
    height: 34px;
    background:
        radial-gradient(circle at 25% 60%, var(--mpl-cloud) 12px, transparent 13px),
        radial-gradient(circle at 50% 40%, var(--mpl-cloud) 16px, transparent 17px),
        radial-gradient(circle at 75% 55%, var(--mpl-cloud) 11px, transparent 12px);
    opacity: 0.62;
    animation: mpl-cloud-drift 22s linear infinite;
    animation-delay: -6s;     /* starts mid-way through the loop */
    pointer-events: none;
}

@keyframes mpl-cloud-drift {
    0%   { transform: translateX(-20%); }
    100% { transform: translateX(120vw); }
}

/* ── The hero stage — sun + storefront + ticks ──────────────────────── */
.mpl-stage {
    position: relative;
    width: 280px;
    height: 220px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 2;
}

/* ── The sun — rises behind the storefront ─────────────────────────── */
.mpl-sun {
    position: absolute;
    left: 50%;
    bottom: 36%;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%,
            var(--mpl-orange-warm) 0%,
            var(--mpl-orange) 55%,
            #E0731A 100%);
    box-shadow:
        0 0 60px rgba(245, 130, 32, 0.35),
        0 0 120px rgba(245, 130, 32, 0.18),
        inset -8px -10px 20px rgba(196, 90, 18, 0.25);
    transform: translate(-50%, 40%) scale(0.6);
    opacity: 0;
    animation: mpl-sun-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards,
               mpl-sun-pulse 3.2s ease-in-out 1s infinite;
}

@keyframes mpl-sun-rise {
    0%   { transform: translate(-50%, 40%) scale(0.6); opacity: 0; }
    60%  { opacity: 1; }
    100% { transform: translate(-50%, 0%)   scale(1);   opacity: 1; }
}

@keyframes mpl-sun-pulse {
    0%, 100% { box-shadow: 0 0 60px  rgba(245, 130, 32, 0.35),
                          0 0 120px rgba(245, 130, 32, 0.18),
                          inset -8px -10px 20px rgba(196, 90, 18, 0.25); }
    50%      { box-shadow: 0 0 80px  rgba(245, 130, 32, 0.45),
                          0 0 160px rgba(245, 130, 32, 0.24),
                          inset -8px -10px 20px rgba(196, 90, 18, 0.25); }
}

/* Thin sun rays — appear after the sun lands */
.mpl-sun-rays {
    position: absolute;
    left: 50%;
    bottom: 36%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, 0%);
    opacity: 0;
    animation: mpl-rays-in 0.5s ease-out 0.85s forwards,
               mpl-rays-spin 24s linear 0.85s infinite;
    pointer-events: none;
}

.mpl-sun-rays::before,
.mpl-sun-rays::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        conic-gradient(
            from 0deg,
            transparent 0deg, transparent 14deg,
            rgba(245, 130, 32, 0.18) 14deg, rgba(245, 130, 32, 0.18) 16deg,
            transparent 16deg, transparent 44deg,
            rgba(245, 130, 32, 0.18) 44deg, rgba(245, 130, 32, 0.18) 46deg,
            transparent 46deg, transparent 74deg,
            rgba(245, 130, 32, 0.18) 74deg, rgba(245, 130, 32, 0.18) 76deg,
            transparent 76deg, transparent 104deg,
            rgba(245, 130, 32, 0.18) 104deg, rgba(245, 130, 32, 0.18) 106deg,
            transparent 106deg, transparent 360deg
        );
    -webkit-mask: radial-gradient(circle, transparent 36%, #000 36.5%, #000 50%, transparent 50.5%);
            mask: radial-gradient(circle, transparent 36%, #000 36.5%, #000 50%, transparent 50.5%);
}

.mpl-sun-rays::after {
    transform: rotate(180deg);
    opacity: 0.7;
}

@keyframes mpl-rays-in {
    to { opacity: 1; }
}

@keyframes mpl-rays-spin {
    to { transform: translate(-50%, 0%) rotate(360deg); }
}

/* ── The storefront ─────────────────────────────────────────────────── */
.mpl-storefront {
    position: relative;
    width: 200px;
    height: 150px;
    z-index: 3;
}

.mpl-storefront svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Each stroked path draws itself in. Total budget: ~0.7s. */
.mpl-sf-body,
.mpl-sf-awning-band,
.mpl-sf-door,
.mpl-sf-window {
    stroke: var(--mpl-ink);
    fill: transparent;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: mpl-draw 0.55s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.mpl-sf-body         { stroke-width: 2.2;  animation-delay: 0.15s; }
.mpl-sf-awning-band  { stroke-width: 1.8;  animation-delay: 0.45s; }
.mpl-sf-window       { stroke-width: 1.6;  animation-delay: 0.65s; }
.mpl-sf-door         { stroke-width: 1.6;  animation-delay: 0.65s; }

@keyframes mpl-draw {
    to { stroke-dashoffset: 0; }
}

/* Body fill — a soft warm wash that appears AFTER the outline draws */
.mpl-sf-body-fill {
    fill: rgba(255, 252, 247, 0.85);
    opacity: 0;
    animation: mpl-fade-in 0.4s ease 0.5s forwards;
}

.mpl-sf-window-fill {
    fill: rgba(86, 196, 248, 0.10);
    opacity: 0;
    animation: mpl-fade-in 0.4s ease 0.9s forwards;
}

.mpl-sf-door-fill {
    fill: rgba(245, 130, 32, 0.10);
    opacity: 0;
    animation: mpl-fade-in 0.4s ease 0.9s forwards;
}

@keyframes mpl-fade-in { to { opacity: 1; } }

/* Awning ribs — painted in the orange→cyan brand gradient, stagger-revealed.
   Five strokes via stroke-dasharray on a single path. */
.mpl-sf-awning-ribs {
    stroke: url(#mplAwningGrad);
    stroke-width: 1.4;
    stroke-linecap: round;
    fill: none;
    opacity: 0;
    animation: mpl-fade-in 0.45s ease 0.7s forwards,
               mpl-ribs-shimmer 2.4s ease-in-out 1.1s infinite;
}

@keyframes mpl-ribs-shimmer {
    0%, 100% { opacity: 0.9; filter: none; }
    50%      { opacity: 1;   filter: drop-shadow(0 0 4px rgba(245, 130, 32, 0.4)); }
}

/* Door handle — a tiny cyan dot */
.mpl-sf-door-handle {
    fill: var(--mpl-sky);
    opacity: 0;
    animation: mpl-fade-in 0.3s ease 1.05s forwards;
}

/* ── Scan beam — horizontal cyan sweep across the storefront ───────── */
.mpl-sf-scan {
    stroke: var(--mpl-sky-deep);
    stroke-width: 1.6;
    stroke-linecap: round;
    fill: none;
    opacity: 0;
    filter: drop-shadow(0 0 4px rgba(86, 196, 248, 0.6));
    animation: mpl-scan-in 0.3s ease 1.1s forwards,
               mpl-scan-sweep 2.1s cubic-bezier(0.65, 0, 0.35, 1) 1.4s infinite;
}

@keyframes mpl-scan-in { to { opacity: 0.9; } }

@keyframes mpl-scan-sweep {
    0%   { transform: translateY(-12px); opacity: 0; }
    20%  { opacity: 0.9; }
    80%  { opacity: 0.9; }
    100% { transform: translateY(12px);  opacity: 0; }
}

/* ── Verified-tick badges — pop in above the storefront ─────────────── */
.mpl-ticks {
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 24px;
    z-index: 4;
}

.mpl-tick {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--mpl-sky);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 4px 10px rgba(86, 196, 248, 0.35),
        inset 0 -2px 4px rgba(63, 169, 217, 0.4);
    opacity: 0;
    transform: scale(0.4);
    position: relative;
    animation: mpl-tick-pop 0.45s cubic-bezier(0.34, 1.5, 0.64, 1) forwards;
}

.mpl-tick:nth-child(1) { animation-delay: 1.15s; }
.mpl-tick:nth-child(2) { animation-delay: 1.30s; }
.mpl-tick:nth-child(3) { animation-delay: 1.45s; }

/* The check mark inside each tick — inline SVG ::after replacement */
.mpl-tick svg {
    width: 12px;
    height: 12px;
    stroke: #fff;
    stroke-width: 2.4;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@keyframes mpl-tick-pop {
    0%   { opacity: 0; transform: scale(0.4); }
    60%  { opacity: 1; transform: scale(1.15); }
    100% { opacity: 1; transform: scale(1); }
}

/* Expanding ring pulse beneath each tick — fires once after pop */
.mpl-tick::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--mpl-sky);
    opacity: 0;
    animation: mpl-tick-ring 1.4s ease-out forwards;
}

.mpl-tick:nth-child(1)::before { animation-delay: 1.35s; }
.mpl-tick:nth-child(2)::before { animation-delay: 1.50s; }
.mpl-tick:nth-child(3)::before { animation-delay: 1.65s; }

@keyframes mpl-tick-ring {
    0%   { opacity: 0.7; transform: scale(1);   }
    100% { opacity: 0;   transform: scale(2.2); }
}

/* ── Wordmark ────────────────────────────────────────────────────────── */
/* Two-line treatment:
     · Line 1 — "Ikhayalami" with brand-spec dots (cyan first-I, orange last-I)
     · Line 2 — "Marketplace" subtitle in muted ink, slightly smaller */
.mpl-wordmark {
    margin-top: 30px;
    font-family: 'Outfit', 'DM Sans', system-ui, sans-serif;
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--mpl-ink);
    line-height: 1;
    z-index: 2;
    display: inline-block;
    text-align: center;
    opacity: 0;
    transform: translateY(8px);
    animation: mpl-word-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 1.0s forwards;
}

.mpl-wordmark-sub {
    margin-top: 6px;
    font-family: 'Outfit', 'DM Sans', system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(14, 14, 17, 0.55);
    z-index: 2;
    opacity: 0;
    transform: translateY(6px);
    animation: mpl-word-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) 1.3s forwards;
}

@keyframes mpl-word-in {
    to { opacity: 1; transform: translateY(0); }
}

/* The dotted letters — we wrap each target "i" so we can paint a custom
   coloured dot ABOVE the natural tittle. The underlying character is a
   regular i/I, so if CSS fails to load the wordmark still reads correctly. */
.mpl-i {
    position: relative;
    display: inline-block;
}

.mpl-i::after {
    content: '';
    position: absolute;
    /* Sized large enough to fully cover the natural tittle of a lowercase
       "i" at Outfit Bold scale, so the coloured dot reads as THE dot and
       there's no visible charcoal tittle showing through. */
    left: 50%;
    top: -0.06em;
    transform: translateX(-50%) scale(0);
    width: 0.32em;
    height: 0.32em;
    border-radius: 50%;
    /* A ring of cream around the disc blends it into the canvas where it
       overlaps with the natural tittle's surrounding area, making the
       coloured dot read cleanly. */
    animation: mpl-dot-in 0.4s cubic-bezier(0.34, 1.5, 0.64, 1) forwards;
    z-index: 1;
}

/* First I (capital, no tittle) — cyan/sky-blue dot sits above the cap line */
.mpl-i--sky {
    /* Capital I has no descender into x-height; nudge the dot up further */
}
.mpl-i--sky::after {
    top: -0.36em;
    background: var(--mpl-sky);
    box-shadow:
        0 0 0 2px var(--mpl-cream),
        0 0 10px rgba(86, 196, 248, 0.55);
    animation-delay: 1.25s;
}

/* Last i (lowercase) — sun-orange dot replaces the natural tittle */
.mpl-i--orange::after {
    background: var(--mpl-orange);
    box-shadow:
        0 0 0 2px var(--mpl-cream),
        0 0 10px rgba(245, 130, 32, 0.55);
    animation-delay: 1.4s;
}

@keyframes mpl-dot-in {
    to { transform: translateX(-50%) scale(1); }
}

/* ── Tagline ────────────────────────────────────────────────────────── */
.mpl-tagline {
    margin-top: 10px;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(14, 14, 17, 0.42);
    z-index: 2;
    opacity: 0;
    animation: mpl-fade-in 0.4s ease 1.5s forwards;
}

/* ── Progress hairline — bottom of viewport ─────────────────────────── */
.mpl-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: rgba(14, 14, 17, 0.05);
    overflow: hidden;
    z-index: 5;
}

.mpl-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg,
        var(--mpl-orange)    0%,
        var(--mpl-orange-warm) 35%,
        var(--mpl-sky)       70%,
        var(--mpl-sky-deep) 100%);
    box-shadow: 0 0 8px rgba(245, 130, 32, 0.35);
    transition: width 220ms cubic-bezier(.22, 1, .36, 1);
}

/* ── Footer credit ──────────────────────────────────────────────────── */
.mpl-credit {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.62rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(14, 14, 17, 0.28);
    z-index: 5;
    white-space: nowrap;
    opacity: 0;
    animation: mpl-fade-in 0.4s ease 1.6s forwards;
}

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .mpl-overlay *,
    .mpl-overlay *::before,
    .mpl-overlay *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.1s !important;
    }
    .mpl-overlay {
        transition: opacity 200ms linear !important;
    }
    /* Snap final-state visibility so reduced-motion users still see the
       full composition, just without motion. */
    .mpl-sun,
    .mpl-sf-body-fill,
    .mpl-sf-window-fill,
    .mpl-sf-door-fill,
    .mpl-sf-awning-ribs,
    .mpl-sf-door-handle,
    .mpl-sf-scan,
    .mpl-tick,
    .mpl-wordmark,
    .mpl-wordmark-sub,
    .mpl-tagline,
    .mpl-credit {
        opacity: 1 !important;
        transform: none !important;
    }
    .mpl-sf-body,
    .mpl-sf-awning-band,
    .mpl-sf-door,
    .mpl-sf-window {
        stroke-dashoffset: 0 !important;
    }
    .mpl-i::after { transform: translateX(-50%) scale(1) !important; }
}

/* ── Small phones ───────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .mpl-stage {
        width: 240px;
        height: 190px;
    }
    .mpl-sun {
        width: 110px;
        height: 110px;
    }
    .mpl-sun-rays {
        width: 170px;
        height: 170px;
    }
    .mpl-storefront {
        width: 170px;
        height: 130px;
    }
    .mpl-ticks {
        gap: 18px;
    }
    .mpl-tick {
        width: 18px;
        height: 18px;
    }
    .mpl-tick svg {
        width: 10px;
        height: 10px;
    }
    .mpl-wordmark {
        font-size: 1.5rem;
        margin-top: 22px;
    }
    .mpl-wordmark-sub {
        font-size: 0.78rem;
        letter-spacing: 0.16em;
    }
    .mpl-tagline {
        font-size: 0.62rem;
    }
}