@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: 200ms ease both vt-fade-out;
}

::view-transition-new(root) {
    animation: 280ms ease both vt-fade-in;
}

@keyframes vt-fade-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-6px); }
}

@keyframes vt-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

:root {
    --nprogress-height:         2px;

    --nprogress-glow-color:     #ffffff;
    --nprogress-glow-blur:      6px;

    --nprogress-shimmer-speed:  1.8s;

    --nprogress-track-color:    180, 180, 180;
    --nprogress-track-opacity:  0.20;

    --nprogress-fade-speed:     0.5s;

    --nprogress-ease:           cubic-bezier(0.28, 0.08, 0.18, 1);
    --nprogress-ease-speed:     0.38s;
}

/* Track — full-width background behind the bar */
#nprogress-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 100vw;
    height: var(--nprogress-height);
    background: rgba(var(--nprogress-track-color), var(--nprogress-track-opacity));
    border-radius: 0 2px 2px 0;
    pointer-events: none;
}

#nprogress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: var(--nprogress-height);
    z-index: 99999;
    background: var(--primary-color);
    background-size: 300% 100%;
    border-radius: 0 2px 2px 0;
    /* box-shadow: 0 0 var(--nprogress-glow-blur) var(--nprogress-glow-color); */
    opacity: 0;
    pointer-events: none;

    transition:
        width   var(--nprogress-ease-speed) var(--nprogress-ease),
        opacity var(--nprogress-fade-speed)  ease;

    animation: nprogress-shimmer var(--nprogress-shimmer-speed) linear infinite;
    animation-play-state: paused;
}

#nprogress-bar.active {
    opacity: 1;
    animation-play-state: running;
}

@keyframes nprogress-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}