/* ============================================================
   TOP NAVIGATION PROGRESS BAR
   Slim, app-style loading indicator shown while a page is being
   navigated to, so a tap always gives immediate feedback.
   ============================================================ */

.sg-progress {
    position: fixed;
    top: var(--sg-safe-top, 0px);
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1200;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
    contain: layout style;
}

.sg-progress.is-visible {
    opacity: 1;
}

.sg-progress-bar {
    height: 100%;
    width: 0;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(90deg, #1677ff 0%, #4f9dff 55%, #86c5ff 100%);
    box-shadow: 0 0 10px rgba(22, 119, 255, 0.6), 0 1px 2px rgba(22, 119, 255, 0.35);
    transition: width 0.22s ease;
}

.sg-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.65) 100%);
    border-radius: inherit;
}

/* The bottom navigation item that was tapped pulses until the next page
   paints, so a tap always feels acknowledged. */
.sg-nav-pending .bnav-icon i,
.sg-nav-pending .bnav-icon svg {
    animation: sgNavPulse 0.9s ease-in-out infinite;
    color: #1677ff;
}

@keyframes sgNavPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.86); }
}

@media (prefers-reduced-motion: reduce) {
    .sg-progress-bar,
    .sg-progress {
        transition: none;
    }

    .sg-nav-pending .bnav-icon i,
    .sg-nav-pending .bnav-icon svg {
        animation: none;
    }
}