:root {
    --navigation-progress-color: #0077b6;
    --navigation-progress-highlight: #38bdf8;
}

html.page-booting {
    overflow: hidden;
}

html.page-booting body {
    min-height: 100vh;
}

html.page-booting body > :not(.navigation-progress) {
    visibility: hidden;
    opacity: 0;
}

html.page-booting :is(
    #root,
    #home-react-root,
    #hosting-react-root,
    #static-page-react-root,
    #organizations-react-root,
    #data-sources-react-root,
    #mapping-react-root,
    #dashboard-react-root,
    #portfolio-react-root,
    #access-profiles-react-root,
    #primavera-viewer-page,
    #timeview-page,
    #mta-page
):empty {
    min-height: 70vh;
}

.navigation-progress {
    position: fixed;
    z-index: 2147483647;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transform: translateZ(0);
    transition: opacity 180ms ease;
}

.navigation-progress__bar {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 4px;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            var(--navigation-progress-color) 0%,
            var(--navigation-progress-highlight) 72%,
            #b9efff 100%
        );
    box-shadow:
        0 0 12px rgba(0, 119, 182, 0.72),
        0 2px 5px rgba(56, 189, 248, 0.44);
    transform: translate3d(-100%, 0, 0);
    will-change: transform;
}

.navigation-progress__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(230px, 44vw, 430px);
    aspect-ratio: 700 / 130;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 10px 24px rgba(0, 119, 182, 0.16));
}

.navigation-progress__logo-ghost,
.navigation-progress__logo-fill {
    position: absolute;
    inset: 0;
    background: var(--navigation-progress-color);
    -webkit-mask: url('/assets/images/OnePlanX.png') center / contain no-repeat;
    mask: url('/assets/images/OnePlanX.png') center / contain no-repeat;
}

.navigation-progress__logo-ghost {
    opacity: 0.14;
}

.navigation-progress__logo-fill {
    background:
        linear-gradient(
            90deg,
            var(--navigation-progress-color) 0%,
            var(--navigation-progress-highlight) 52%,
            var(--navigation-progress-color) 100%
        );
    clip-path: inset(100% 0 0 0);
    will-change: clip-path;
}

.navigation-progress--active {
    opacity: 1;
}

.navigation-progress--active .navigation-progress__bar {
    animation: navigation-progress-loading 15s cubic-bezier(0.1, 0.5, 0.25, 1) forwards;
}

.navigation-progress--active .navigation-progress__logo-fill {
    animation: navigation-logo-filling 15s cubic-bezier(0.1, 0.5, 0.25, 1) forwards;
}

.navigation-progress--complete {
    opacity: 0;
    transition-delay: 120ms;
}

.navigation-progress--complete .navigation-progress__bar {
    transform: translate3d(0, 0, 0);
    transition: transform 180ms ease-out;
}

.navigation-progress--complete .navigation-progress__logo-fill {
    clip-path: inset(0 0 0 0);
    transition: clip-path 180ms ease-out;
}

@keyframes navigation-progress-loading {
    0% {
        transform: translate3d(-100%, 0, 0);
    }

    18% {
        transform: translate3d(-62%, 0, 0);
    }

    48% {
        transform: translate3d(-32%, 0, 0);
    }

    78% {
        transform: translate3d(-16%, 0, 0);
    }

    100% {
        transform: translate3d(-8%, 0, 0);
    }
}

@keyframes navigation-logo-filling {
    0% {
        clip-path: inset(100% 0 0 0);
    }

    18% {
        clip-path: inset(72% 0 0 0);
    }

    48% {
        clip-path: inset(42% 0 0 0);
    }

    78% {
        clip-path: inset(20% 0 0 0);
    }

    100% {
        clip-path: inset(8% 0 0 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .navigation-progress,
    .navigation-progress__bar,
    .navigation-progress__logo-fill {
        animation: none;
        transition: none;
    }

    .navigation-progress--active .navigation-progress__bar,
    .navigation-progress--active .navigation-progress__logo-fill {
        transform: translate3d(0, 0, 0);
    }

    .navigation-progress--active .navigation-progress__logo-fill {
        clip-path: inset(0 0 0 0);
    }

}