/* =====================================================================
   App boot splash — shown on the Blazor host page (_Host.cshtml) while
   the SignalR circuit boots and MainLayout renders. Covers the blank
   (non-prerendered) shell, then fades out while the shell panels animate
   in (see "Panel reveal" section).

   Flat, project-agnostic loader: a percentage counter + thin progress
   bar, driven by the host script. No shadows, glows, or gradients — the
   flat PostHog palette via the theme tokens (backoffice-theme.css). The
   host page always boots in light mode, so the default :root tokens apply.
   ===================================================================== */

.bo-splash {
    position: fixed;
    inset: 0;
    z-index: 2147483000; /* above the app + reconnect modal during boot */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bo-bg, #F2F2EF);
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

    .bo-splash.bo-splash--hidden {
        opacity: 0;
        visibility: hidden;
    }

.bo-splash__box {
    width: 260px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    font-family: 'Inter', system-ui, sans-serif;
}

/* Percentage readout. */
.bo-splash__percent {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-weight: 600;
    font-size: 3.1rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--bo-text, #1D1F27);
    font-variant-numeric: tabular-nums;
}

.bo-splash__pct {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--bo-text-muted, #5F5F59);
}

/* Thin flat progress bar. */
.bo-splash__bar {
    height: 4px;
    width: 100%;
    background: var(--bo-border, rgba(0, 0, 0, 0.09));
    border-radius: 2px;
    overflow: hidden;
}

.bo-splash__bar-fill {
    height: 100%;
    width: 0;
    background: var(--bo-primary, #1D4ED8);
    border-radius: 2px;
    transition: width 0.18s linear;
}

.bo-splash__caption {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    padding-left: 0.28em; /* balance trailing letter-spacing */
    color: var(--bo-text-muted, #5F5F59);
}

/* =====================================================================
   Panel reveal — when the splash hands off, #bo-app-root gets the
   `bo-app-reveal` class and the shell panels animate in, staggered. The
   delays are tuned to start as the splash finishes fading (~0.4s) so the
   slide-in is actually visible. The host script removes the class once
   the animations finish.
   ===================================================================== */
/* Target our own .bo-sidebar (inside the drawer) rather than the MudDrawer
   root, so the slide never fights Mud's own drawer transform. */
#bo-app-root.bo-app-reveal .bo-sidebar {
    animation: bo-reveal-left 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: 0.35s;
}

#bo-app-root.bo-app-reveal .bo-breadcrumb {
    animation: bo-reveal-down 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: 0.5s;
}

#bo-app-root.bo-app-reveal .mud-main-content .mud-container {
    animation: bo-reveal-rise 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: 0.62s;
}

@keyframes bo-reveal-left {
    from { opacity: 0; transform: translateX(-28px); }
    to   { opacity: 1; transform: none; }
}

@keyframes bo-reveal-down {
    from { opacity: 0; transform: translateY(-18px); }
    to   { opacity: 1; transform: none; }
}

@keyframes bo-reveal-rise {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}

/* --- Reduced motion: swap the slide for a gentle opacity fade ------- */
@media (prefers-reduced-motion: reduce) {
    #bo-app-root.bo-app-reveal .bo-sidebar,
    #bo-app-root.bo-app-reveal .bo-breadcrumb,
    #bo-app-root.bo-app-reveal .mud-main-content .mud-container {
        animation: bo-reveal-fade 0.5s ease both;
    }

    #bo-app-root.bo-app-reveal .bo-breadcrumb { animation-delay: 0.12s; }
    #bo-app-root.bo-app-reveal .mud-main-content .mud-container { animation-delay: 0.24s; }
}

@keyframes bo-reveal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}