:root {
    --page-loader-primary: #2563eb;
    --page-loader-accent: #60a5fa;
}

.page-transition-loader {
    --page-progress: 0;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2147483647;
    height: 3px;
    overflow: visible;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-100%);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.page-transition-loader.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.page-transition-loader__bar {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: 0 0 0 999px;
    background: linear-gradient(90deg, #93c5fd 0%, var(--page-loader-accent) 38%, var(--page-loader-primary) 100%);
    box-shadow: 0 1px 8px rgba(37, 99, 235, .5);
    transform: scaleX(var(--page-progress));
    transform-origin: right center;
    transition: transform .28s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
}

.page-transition-loader__bar::after {
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: 0;
    width: 42px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .92));
    box-shadow: 0 0 12px rgba(96, 165, 250, .9);
    content: '';
}

.page-transition-loader.is-completing .page-transition-loader__bar {
    transition-duration: .15s;
}

.dark .page-transition-loader__bar {
    background: linear-gradient(90deg, #60a5fa 0%, #3b82f6 45%, #2563eb 100%);
    box-shadow: 0 1px 10px rgba(59, 130, 246, .72);
}

@media (max-width: 640px) {
    .page-transition-loader { height: 2.5px; }
    .page-transition-loader__bar::after { width: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    .page-transition-loader,
    .page-transition-loader__bar {
        transition-duration: .01ms !important;
    }
}