/**
 * Temporary Loading Cursor System
 * Shows a custom animated cursor ring during initial page load (first 3-5 seconds)
 * Session-based: only appears once per session
 */

/* Hide default cursor when loader is active */
body.cursor-active,
body.cursor-active * {
    cursor: none !important;
}

/* Custom cursor loader ring */
.cursor-loader {
    position: fixed;
    width: 40px;
    height: 40px;
    border: 4px solid rgba(56, 189, 248, 0.2);
    /* Sky blue with transparency */
    border-top-color: #38bdf8;
    /* Solid sky blue */
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999999;
    animation: cursor-spin 0.8s linear infinite, cursor-pulse 1.6s ease-in-out infinite;
    transform: translate(-50%, -50%);
    will-change: transform, opacity;
    /* GPU acceleration */
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Rotation animation */
@keyframes cursor-spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Enhanced pulse animation for better visibility */
@keyframes cursor-pulse {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.5);
    }

    50% {
        opacity: 0.8;
        box-shadow: 0 0 15px 5px rgba(56, 189, 248, 0.3);
    }
}

/* Fade out animation when removing */
.cursor-loader.fade-out {
    animation: cursor-fade-out 0.3s ease-out forwards;
}

@keyframes cursor-fade-out {
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
}

/* =============================================================================
   Image Loading Spinner
   ========================================================================== */
/* Show loading spinner on images while they load */
img.lazy:not([src]),
img[loading="lazy"]:not([src]),
img.lazy[src*="data:image"] {
    position: relative;
    min-height: 100px;
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.1) 0%, rgba(56, 189, 248, 0.1) 100%);
    display: inline-block;
}

img.lazy:not([src])::before,
img[loading="lazy"]:not([src])::before,
img.lazy[src*="data:image"]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 4px solid rgba(56, 189, 248, 0.2);
    border-top-color: #38bdf8;
    border-radius: 50%;
    animation: cursor-spin 0.8s linear infinite;
    z-index: 1;
}

/* Loading state for skeleton images */
.lazy-loading {
    position: relative;
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.1) 0%, rgba(56, 189, 248, 0.1) 100%);
}

.lazy-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 4px solid rgba(56, 189, 248, 0.2);
    border-top-color: #38bdf8;
    border-radius: 50%;
    animation: cursor-spin 0.8s linear infinite;
    z-index: 2;
}