#page-loading-bar {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 3px;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 160ms ease;
}
#page-loading-bar span {
    display: block;
    height: 100%;
    background: var(--color-bg-light, #deadaa);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 250ms ease-out;
}
#page-loading-bar.is-loading { opacity: 1; }

/* Native cross-document transitions preserve normal Django navigation. */
@view-transition { navigation: auto; }
.nav-parent { view-transition-name: main-navigation; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 180ms; }
::view-transition-group(main-navigation) { animation-duration: 0s; }
::view-transition-old(main-navigation) { animation: none; }
::view-transition-new(main-navigation) { animation: none; }

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    #page-loading-bar, #page-loading-bar span { transition: none; }
}