/**
 * The loader — the Trace mark over a frosted wash (Design.md §2.1 Motion,
 * §11.10). THE one loading animation on the network: the configurator boot,
 * the rebuild wash and the room planner's 3D build all draw this mark.
 *
 * Built by core/src/replicad-shared/runtime/ProgressBar.js (and reached from
 * classic scripts through window.CoreLoaderOverlay). Those rules used to be an
 * injected `<style>` plus inline cssText carrying raw hexes, an undefined
 * `--mm-accent` with a Corn fallback and a bare `z-index: 100`; they moved here
 * onto the Theme's tokens (efficiency #561). Registered as the `core-loader`
 * handle and pulled in as a dep of core-configurator, which the room planner's
 * sheets depend on too.
 *
 * tests/js/Core/progress-bar-loader.test.js reads this file off disk and pins
 * the loop numbers and the width/stroke pairing below.
 *
 * @package Make_My_Core
 */

/* --- The frosted wash every loader sits on (§11.10) ---
   Translucent Paper plus a backdrop blur, across the whole area being loaded.
   The room planner's `.core-room-3d-preview__progress` (core-room.css) restates
   the same two values. */

.replicad-loading-overlay,
.replicad-rebuild-badge {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in oklch, var(--paper) 72%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* Boot overlay — holds engine start through first model, swallows pointer
   events while it does. */
.replicad-loading-overlay {
    flex-direction: column;
    z-index: var(--z-sticky);
    font-family: var(--font-sans);
}

/* Rebuild wash — one step under the boot overlay, and lets pointer events
   through so the toolbars stay usable underneath. */
.replicad-rebuild-badge {
    border-radius: inherit;
    z-index: calc(var(--z-sticky) - 1);
    pointer-events: none;
}

.replicad-loading-body {
    width: 80%;
    max-width: 280px;
    text-align: center;
}

/* Status line — a customer reads it on the wash, so Ink Soft (§3.3). */
.replicad-loading-text {
    margin-bottom: var(--sp-2);
    font-size: var(--fs-14);
    color: var(--ink-soft);
}

/* Byte track — hidden until real byte counts arrive (ProgressBar.js). */
.replicad-progress-track {
    width: 100%;
    height: 6px;
    margin-top: var(--sp-1);
    overflow: hidden;
    border-radius: var(--r-xs);
    background: var(--rule);
}

.replicad-progress-fill {
    width: 0;
    height: 100%;
    border-radius: var(--r-xs);
    background: var(--ink);
    transition: width var(--dur-fast) var(--ease);
}

.replicad-loading-detail {
    margin-top: var(--sp-2);
    font-size: var(--fs-12);
    color: var(--ink-muted);
}

/* --- The Trace mark ---
   Loop: 0.22/0.78 dash, dashoffset 1 → 0, 1.9s linear infinite — seamless, no
   visible restart. The ghost track sits at .18 of Ink.

   The widths are the old single-device numbers scaled by the ratio of the two
   viewBoxes, 641.31/366.42: 96 → 168 and 32 → 56. Both devices are 279.46
   units tall, so stroke-width 7 and 16 carry over untouched. Change a width
   without the matching stroke and the trace thins out. */

@keyframes replicad-loading-loop {
    to { stroke-dashoffset: 0; }
}

.replicad-loading-mark {
    display: block;
    width: 168px;
    max-width: 100%;
    height: auto;
    margin: 0 auto var(--sp-3);
    color: var(--ink);
}

.replicad-loading-mark__track {
    fill: none;
    stroke: currentColor;
    stroke-width: 7;
    opacity: 0.18;
}

/* The head follows the site accent — or the configurator's own module accent,
   which Core_Brand_Accents scopes onto the configurator root. */
.replicad-loading-mark__head {
    fill: none;
    stroke: var(--accent);
    stroke-width: 7;
    stroke-dasharray: 0.22 0.78;
    stroke-dashoffset: 1;
    animation: replicad-loading-loop 1.9s linear infinite;
}

.replicad-loading-mark--sm {
    width: 56px;
    margin: 0;
}

.replicad-loading-mark--sm .replicad-loading-mark__track,
.replicad-loading-mark--sm .replicad-loading-mark__head {
    stroke-width: 16;
}

/* Reduced motion: hold the mark static — the full outline in the accent —
   rather than looping. Deliberately explicit here, not left to main.css's
   global reset: that reset zeroes the duration, which would park the head at
   its start dash rather than show the whole outline. */
@media (prefers-reduced-motion: reduce) {
    .replicad-loading-mark__head {
        animation: none;
        stroke-dasharray: none;
        stroke-dashoffset: 0;
    }
}