/* ==========================================================================
   The page loading bar - Product Management's (Content\snackbar.css there, "Loading
   indicators"), on every Boardwalk Accounts page. Scripts\bw-progress.js drives it.

   A 4px strip across the very top: a tinted lane with a segment travelling along it,
   in the page's own colour - Accounts' purple on the signed-in pages, the destination
   app's colour on a themed sign-in page (bw-account.css --main / --neighbour).
   ========================================================================== */
.page-progress {
    --pp-main: var(--bw-app, var(--main, #9f1ab1));
    --pp-2: var(--bw-app-2, var(--neighbour, #cc1ea1));
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    /* Above everything - dialogs, the page search, the top-bar widget's popups - so work
       in progress shows wherever the person is looking. */
    z-index: 2147483000;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    /* A tinted lane, so the strip reads as a progress bar between passes. */
    background: rgba(159, 26, 177, .2);
    background: color-mix(in srgb, var(--pp-main) 20%, transparent);
    transition: opacity .12s cubic-bezier(.4, 0, .2, 1);
}

    .page-progress.visible {
        opacity: 1;
    }

    /* Mostly solid, fading only at the very ends. */
    .page-progress::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 42%;
        background: linear-gradient(90deg, transparent 0%, var(--pp-main) 14%, var(--pp-2) 50%, var(--pp-main) 86%, transparent 100%);
        box-shadow: 0 1px 3px rgba(125, 20, 144, .25);
        /* linear: it travels one way and loops; an ease-out then a jump back reads as a stutter. */
        animation: pageProgressSlide 1.9s linear infinite;
    }

/* Ends exactly as the segment clears the right edge (100 / 42 x 100 = 238%). */
@keyframes pageProgressSlide {
    from { transform: translateX(-100%); }
    to   { transform: translateX(238%); }
}

@media (prefers-reduced-motion: reduce) {
    .page-progress::after {
        animation: none;
        width: 100%;
        background: var(--pp-main);
        opacity: .85;
    }
}