/**
 * navigate-loader.css
 *
 * Defines the visual styles and animation for the top loading bar
 * used during page transitions via the View Transitions API.
 *
 * The loader is invisible by default and only appears in transition
 * states (`::view-transition-old()` / `::view-transition-new()`).
 *
 * The animation gives the illusion of progress by sliding a gradient
 * bar from left to right. It resets on each new page transition.
 *
 * Uses CSS variables defined in the browserux.css file 
 * (`/src/styles/browserux.css`).
 */

 /* Marks this element as a named transition participant */
.navigate-loader {
    view-transition-name: navigate-loader;
}

/* Styles applied only during the transition phase */
::view-transition-old(navigate-loader),
::view-transition-new(navigate-loader) {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--bux-page-bg) 0%,
        var(--bux-color-primary) 50%,
        var(--bux-page-bg) 100%
    );
    animation: loaderBar 1s infinite linear;
    z-index: 9999;
}

/* Simple sliding animation for the loader bar */
@keyframes loaderBar {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}