/* ---------------------------------------------------------------------------
 * Pre-boot splash screen.
 *
 * Loaded from index.html BEFORE any Angular bundle, so it can use neither the
 * token layer (src/styles/tokens.scss) nor the Fuse theme custom properties —
 * both are emitted by the app's own stylesheet, which has not parsed yet.
 *
 * It therefore reads `assets/styles/brand.generated.css`, which
 * scripts/generate-brand-theme.mjs writes from the active environment's
 * `brandColor` and `brandLogoFile`. That file MUST be linked first in
 * index.html. Every colour below is a var() from it — this sheet carries no
 * literal of its own, which is what keeps it inside `check:tokens` (it was out
 * of scope until 2026-07-30, and that is how it kept the RETIRED pre-v3 brand
 * blue #1E96F7 through two identity passes, on the first screen every user
 * sees; its text colour was also #F9FAFB on an #f1f5f9 canvas — invisible).
 *
 * Hidden by FuseSplashScreenService on the first NavigationEnd, by adding
 * `.fuse-splash-screen-hidden` to <body>. Do not change that contract.
 * ------------------------------------------------------------------------- */

body fuse-splash-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--splash-canvas);
    color: var(--splash-text);
    font-family: 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    z-index: 999999;
    pointer-events: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* The tenant mark.
 *
 * A background-image, not an <img>, for two reasons. index.html is static, so an
 * `src` cannot vary per tenant — but `--splash-logo` can, which is what finally
 * makes the splash honour `environment.brandLogoFile` the way the sidebar and
 * the auth shell already did. And @fuse/styles/tailwind.scss puts
 * `img { width: 100% }` in its base layer, which turns a max-width/max-height
 * pair into a DEFINITE box and stretched the menuro wordmark to nearly twice its
 * aspect ratio in the sidebar (CLAUDE.md, 2026-07-30). `background-size: contain`
 * cannot do that: a 32x32 mark and a 140x36 wordmark both fit this box at their
 * own ratio. */
body fuse-splash-screen .splash-mark {
    width: min(180px, 55vw);
    height: 64px;
    background-image: var(--splash-logo);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* Lifts the mark off a flat canvas without drawing a container around it. */
    filter: drop-shadow(0 8px 24px var(--splash-shadow));
}

/* Indeterminate progress.
 *
 * Replaces three bouncing dots, which read as three loose objects rather than
 * one process and whose fill was the retired pre-v3 brand blue. A single rail
 * with a travelling highlight is the conventional indeterminate affordance, and
 * it takes the tenant's own colour. */
body fuse-splash-screen .splash-track {
    position: relative;
    width: 160px;
    height: 3px;
    border-radius: 999px;
    background-color: var(--brand-200);
    overflow: hidden;
}

body fuse-splash-screen .splash-track::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    border-radius: inherit;
    background-color: var(--brand-500);
    animation: fuse-splash-slide 1.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes fuse-splash-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

/* WCAG 2.3.3 / prefers-reduced-motion: no translation. The rail still signals
 * activity, via opacity alone — a wholly static splash gives no feedback that
 * anything is happening during a slow config fetch. */
@media (prefers-reduced-motion: reduce) {
    body fuse-splash-screen .splash-track::after {
        width: 100%;
        animation: fuse-splash-pulse 1.8s ease-in-out infinite;
    }
}

@keyframes fuse-splash-pulse {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 1; }
}

body:not(.fuse-splash-screen-hidden) {
    overflow: hidden;
}

body.fuse-splash-screen-hidden fuse-splash-screen {
    visibility: hidden;
    opacity: 0;
}