/* ---------- CONFIG ---------- */
:root {
    --progress-height: 0.65rem;
    --progress-max-width: 65vw;
}

/* ---------- TRACK ---------- */
.progress-bar {
    width: 100%;
    max-width: var(--progress-max-width);
    height: var(--progress-height);
    margin: 1rem auto;

    background: var(--progress-bg-color-light);
    border-radius: calc(var(--progress-height) * 0.77);
    overflow: hidden;
    position: relative;

    box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.08);
    will-change: transform;
}

/* ---------- FILL ---------- */
.progress {
    width: 0%;
    height: 100%;
    position: relative;
    border-radius: inherit;

    background: linear-gradient(90deg,
            color-mix(in srgb, var(--progress-color-light) 25%, #fff) 0%,
            var(--progress-color-light) 50%,
            color-mix(in srgb, var(--progress-color-light) 15%, #000) 100%);
    background-size: 200% 100%;

    animation: progressAnimation 8s ease-out forwards;
}

/* ---------- NEURAL-MESH OVERLAY ---------- */
.progress::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--progress-color-light);
    filter: blur(0.375rem);
    opacity: 0.25;
    pointer-events: none;
}

.progress::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--progress-color-light);
    filter: blur(0.375rem);
    opacity: 0.25;
    pointer-events: none;
}

/* ---------- COMPLETED STATE ---------- */
.progress.completed {
    width: 100%;
    background: var(--progress-color-light);
}

.progress.completed::after {
    opacity: 0.4;
}

/* ---------- HEAD MOTION (sync with fill) ---------- */
@keyframes headAnimation {
    from {
        left: 0%;
    }

    to {
        left: 100%;
    }
}

/* ---------- ANIMATIONS ---------- */
@keyframes progressAnimation {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}