/**
 * Smooth Page Loader Styles
 * Optimized for all devices and browsers
 */

/* Top Loading Bar */
#spl-page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    z-index: 999999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
    background-color: rgba(101, 64, 245, 0.1);
}

#spl-page-loader.spl-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease;
}

.spl-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 35%;
    background: linear-gradient(90deg, 
        #6540F5 0%, 
        #8b5cf6 50%, 
        #6540F5 100%);
    background-size: 200% 100%;
    box-shadow: 0 0 20px rgba(101, 64, 245, 0.6),
                0 0 40px rgba(101, 64, 245, 0.3);
    border-radius: 0 3px 3px 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-animation: spl-loading 1.5s ease-in-out infinite, spl-gradient 2s ease infinite;
    animation: spl-loading 1.5s ease-in-out infinite, spl-gradient 2s ease infinite;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Add shimmer/glow effect */
.spl-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 100%;
    background: linear-gradient(to right, 
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 100%
    );
}

@-webkit-keyframes spl-loading {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    100% {
        -webkit-transform: translateX(400%);
        transform: translateX(400%);
    }
}

@keyframes spl-loading {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    100% {
        -webkit-transform: translateX(400%);
        transform: translateX(400%);
    }
}

/* Gradient animation for dynamic color effect */
@-webkit-keyframes spl-gradient {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes spl-gradient {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Page Overlay - Disabled */
#spl-page-overlay {
    display: none;
}

/* Prevent content shift during loading */
html.spl-loading-in-progress {
    overflow-x: hidden;
}

/* Smooth content transitions (like Instagram/YouTube) */
body.spl-loading {
    pointer-events: none;
}

/* Optional: Subtle fade effect during navigation */
body.spl-enable-fade.spl-loading {
    opacity: 0.95;
    transition: opacity 0.2s ease-out;
}

/* Smooth page entry animation - removed to prevent blink on fast loads */
/* Users can enable via fade setting if desired */

/* Smoother link hover states */
a {
    transition: opacity 0.2s ease;
}

/* Disable pointer events during loading */
body.spl-loading a:not(.no-loader),
body.spl-loading button:not(.no-loader) {
    pointer-events: none;
}

/* Add subtle visual feedback on link click */
body.spl-loading a,
body.spl-loading button {
    cursor: wait;
}

/* Mobile optimizations */
@media screen and (max-width: 768px) {
    #spl-page-loader {
        height: 5px;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .spl-progress-bar {
        box-shadow: 0 0 20px rgba(101, 64, 245, 0.8);
    }
}

/* Mobile-specific optimizations */
@media screen and (max-width: 768px) {
    .spl-progress-bar {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
    
    @-webkit-keyframes spl-loading {
        0% {
            -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
        }
        100% {
            -webkit-transform: translate3d(400%, 0, 0);
            transform: translate3d(400%, 0, 0);
        }
    }
    
    @keyframes spl-loading {
        0% {
            -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
        }
        100% {
            -webkit-transform: translate3d(400%, 0, 0);
            transform: translate3d(400%, 0, 0);
        }
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    #spl-page-loader,
    .spl-progress-bar {
        transition: none;
        animation: none;
    }
    
    .spl-progress-bar::after {
        display: none;
    }
    
    body {
        animation: none;
    }
    
    body.spl-enable-fade.spl-loading {
        transition: none;
    }
}

/* Lazy loading removed - use WP Rocket or other plugins to avoid conflicts */

/* Browser-specific fixes */

/* Safari iOS fix for fixed positioning */
@supports (-webkit-touch-callout: none) {
    #spl-page-loader {
        position: fixed;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
    .spl-progress-bar {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}

/* IE11 compatibility */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #spl-page-loader {
        display: block;
    }
    
    .spl-progress-bar {
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6540F5', endColorstr='#6540F5');
    }
}

/* Firefox specific optimizations */
@-moz-document url-prefix() {
    .spl-progress-bar {
        -moz-transform: translateZ(0);
    }
}

/* Prevent FOUC (Flash of Unstyled Content) */
.spl-preload * {
    transition: none !important;
}