/**
 * WPI Instant — Router Styles
 *
 * Location: public_html/css/wpi-router.css
 *
 * Small file — just the transition effects for SPA content swaps.
 * The progress bar itself is styled inline by the JS for reliability.
 */

/* Fade transition — default */
.wpi-transition-out {
    opacity: 0.3;
    transition: opacity 150ms ease-out;
}

.wpi-transition-in {
    animation: wpi-fade-in 150ms ease-out;
}

@keyframes wpi-fade-in {
    from { opacity: 0.3; }
    to   { opacity: 1;   }
}

/* Progress bar shimmer effect (optional polish) */
#wpi-progress-bar {
    background-image: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.4) 50%,
        rgba(255,255,255,0) 100%
    ),
    var(--wpi-progress-color, #0372CC);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: wpi-shimmer 1.5s infinite linear;
    box-shadow: 0 0 8px rgba(3, 114, 204, 0.5);
}

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

/* Prevent layout shift when content is swapping */
main, .page {
    min-height: 400px;
}