/* Keep the current page visible while navigation is pending. */
#preloader {
    inset: 0 auto auto 0 !important;
    width: 100%;
    height: 3px;
    overflow: hidden;
    background: transparent !important;
    pointer-events: none;
    opacity: 1;
    transition: opacity 180ms ease;
}

#preloader::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 35%;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(90deg, #71bdff, #1765ce);
    box-shadow: 0 0 10px rgba(40, 119, 220, .35);
    animation: voicer-loading-progress 1.2s ease-in-out infinite;
}

#preloader.preloader-hide { opacity: 0; }
body.voicer-page-leaving #preloader { opacity: 1 !important; }
body.voicer-page-leaving #page { opacity: .78; }
#page { transition: opacity 160ms ease; }

@keyframes voicer-loading-progress {
    from { transform: translateX(-110%); }
    to { transform: translateX(300%); }
}

@media (prefers-reduced-motion: reduce) {
    #preloader::before { animation: none; }
    #preloader, #page { transition: none; }
}