/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Failproof Progress - MUI-style LinearProgress indeterminate
 *
 * Two overlapping bars with MUI timing/easing. Motion uses transform only
 * (translateX + scaleX) so the compositor can run it without layout thrash -
 * animating left/right is what made the bar look jittery.
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.fp-progress
{
    --fp-progress-color: #1266f1;
    --fp-progress-track: rgba(18, 102, 241, 0.12);
    --fp-progress-height: 4px;

    position: relative;
    width: 100%;
    height: var(--fp-progress-height);
    overflow: hidden;
    background: var(--fp-progress-track);
    border-radius: 0;
    /* Own layer so sibling layout (stepper panels) cannot dirty the paint */
    transform: translateZ(0);
    contain: layout style paint;
}

.fp-progress-bar
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--fp-progress-color);
    transform-origin: left center;
    /* Default = left-start pose so a frame before keyframes never paints full-width */
    transform: translateX(-35%) scaleX(0.35);
    will-change: transform;
    transition: none;
    backface-visibility: hidden;
}

/*
 * backwards fill: during bar2's 1.15s delay the 0% keyframe applies - without
 * it the bar sits at width:100% / no scale and reads as a solid blue track.
 */
.fp-progress.is-indeterminate .fp-progress-bar1,
.fp-progress-indeterminate .fp-progress-bar1
{
    animation: fp-progress-indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite backwards;
}

.fp-progress.is-indeterminate .fp-progress-bar2,
.fp-progress-indeterminate .fp-progress-bar2
{
    animation: fp-progress-indeterminate2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite backwards;
}

.fp-progress.is-toggleable:not(.is-active)
{
    height: 0;
    opacity: 0;
    pointer-events: none;
    /* Keep the layer; avoid animation start/stop thrash on show */
    visibility: hidden;
}

.fp-progress.is-toggleable:not(.is-active) .fp-progress-bar
{
    animation: none !important;
    transform: translateX(-35%) scaleX(0.35);
}

.fp-progress.is-toggleable.is-active
{
    height: var(--fp-progress-height);
    opacity: 1;
    visibility: visible;
}

/*
 * Approximate MUI left/right keyframes with transform (compositor-only).
 * scaleX ≈ visible dash width; translateX ≈ sweep across the track.
 */
@keyframes fp-progress-indeterminate1
{
    0%
    {
        transform: translateX(-35%) scaleX(0.35);
    }
    60%
    {
        transform: translateX(100%) scaleX(0.9);
    }
    100%
    {
        transform: translateX(100%) scaleX(0.9);
    }
}

@keyframes fp-progress-indeterminate2
{
    0%
    {
        transform: translateX(-200%) scaleX(0.55);
    }
    60%
    {
        transform: translateX(107%) scaleX(0.08);
    }
    100%
    {
        transform: translateX(107%) scaleX(0.08);
    }
}

@media (prefers-reduced-motion: reduce)
{
    .fp-progress.is-indeterminate .fp-progress-bar1,
    .fp-progress-indeterminate .fp-progress-bar1,
    .fp-progress.is-indeterminate .fp-progress-bar2,
    .fp-progress-indeterminate .fp-progress-bar2
    {
        animation: none;
    }

    .fp-progress.is-toggleable.is-active .fp-progress-bar1
    {
        transform: none;
        opacity: 0.55;
    }

    .fp-progress.is-toggleable.is-active .fp-progress-bar2
    {
        display: none;
    }
}