/* Custom Cursor Styles */
html {
    cursor: none !important;
}

body * {
    cursor: none !important;
}

/* Override ALL cursor declarations from main CSS */
* {
    cursor: none !important;
}

/* Keep custom cursor in modals but ensure it works properly */
.project-modal,
.modal-container,
.modal-content,
.modal-overlay {
    cursor: none !important;
}

.project-modal *,
.modal-container *,
.modal-content *,
.modal-overlay * {
    cursor: none !important;
}

/* Ensure custom cursor works in lightbox */
.image-lightbox,
.lightbox-overlay,
.lightbox-container,
.lightbox-content,
.lightbox-close,
.lightbox-nav,
.lightbox-prev,
.lightbox-next,
.lightbox-counter {
    cursor: none !important;
}

.image-lightbox *,
.lightbox-overlay *,
.lightbox-container *,
.lightbox-content * {
    cursor: none !important;
}

/* Override all cursor: pointer rules from main CSS */
.modal-close,
.modal-nav-arrow,
.lightbox-close,
.lightbox-nav,
.lightbox-prev,
.lightbox-next,
.modal-grid-item,
.modal-carousel-slide {
    cursor: none !important;
}

#cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    pointer-events: none;
    z-index: 15001; /* Highest z-index - above lightbox (15000) */
    transform: translate(-50%, -50%);
    transition: all 0.05s ease-out;
    box-shadow:
        0 0 10px rgba(255, 255, 255, 0.3),
        0 0 20px rgba(255, 255, 255, 0.2),
        0 0 30px rgba(255, 255, 255, 0.1);
}

/* Ensure cursor is always visible in modals and lightbox */
.project-modal.active #cursor,
.image-lightbox.active #cursor {
    display: block !important;
    opacity: 1 !important;
}

#cursor.hover {
    transform: translate(-50%, -50%) scale(1.8);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 
        0 0 15px rgba(255, 255, 255, 0.4),
        0 0 30px rgba(255, 255, 255, 0.3),
        0 0 45px rgba(255, 255, 255, 0.2);
}

#cursor.hover-image {
    transform: translate(-50%, -50%) scale(1.3);
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 
        0 0 12px rgba(255, 255, 255, 0.3),
        0 0 25px rgba(255, 255, 255, 0.2),
        0 0 35px rgba(255, 255, 255, 0.15);
}

#cursor.click {
    transform: translate(-50%, -50%) scale(0.8);
    background: rgba(255, 255, 255, 1);
    box-shadow: 
        0 0 20px rgba(255, 255, 255, 0.6),
        0 0 40px rgba(255, 255, 255, 0.4),
        0 0 60px rgba(255, 255, 255, 0.3);
}

/* Enhanced Fluid Micro Particles */
.cursor-particle {
    position: fixed;
    width: 1.5px;
    height: 1.5px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    pointer-events: none;
    z-index: 15000; /* Same level as lightbox - particles should be visible */
    animation: particleFlowNatural 2.8s linear forwards;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.3);
    will-change: transform, opacity;
}

@keyframes particleFlowNatural {
    0% {
        opacity: 0.8;
        transform: translate(0, 0) scale(1);
    }
    5% {
        opacity: 0.9;
        transform: translate(calc(var(--drift-x, 0px) * 0.1), calc(var(--drift-y, 0px) * 0.1)) scale(1.05);
    }
    10% {
        opacity: 1;
        transform: translate(calc(var(--drift-x, 0px) * 0.2), calc(var(--drift-y, 0px) * 0.2)) scale(1.1);
    }
    20% {
        opacity: 1;
        transform: translate(calc(var(--drift-x, 0px) * 0.4), calc(var(--drift-y, 0px) * 0.4)) scale(1.15);
    }
    30% {
        opacity: 0.95;
        transform: translate(calc(var(--drift-x, 0px) * 0.6), calc(var(--drift-y, 0px) * 0.6)) scale(1.2);
    }
    40% {
        opacity: 0.9;
        transform: translate(calc(var(--drift-x, 0px) * 0.8), calc(var(--drift-y, 0px) * 0.8)) scale(1.15);
    }
    50% {
        opacity: 0.8;
        transform: translate(calc(var(--drift-x, 0px) * 1.0), calc(var(--drift-y, 0px) * 1.0)) scale(1.1);
    }
    60% {
        opacity: 0.7;
        transform: translate(calc(var(--drift-x, 0px) * 1.2), calc(var(--drift-y, 0px) * 1.2)) scale(1.05);
    }
    70% {
        opacity: 0.6;
        transform: translate(calc(var(--drift-x, 0px) * 1.4), calc(var(--drift-y, 0px) * 1.4)) scale(1.0);
    }
    80% {
        opacity: 0.4;
        transform: translate(calc(var(--drift-x, 0px) * 1.6), calc(var(--drift-y, 0px) * 1.6)) scale(0.9);
    }
    90% {
        opacity: 0.2;
        transform: translate(calc(var(--drift-x, 0px) * 1.8), calc(var(--drift-y, 0px) * 1.8)) scale(0.7);
    }
    95% {
        opacity: 0.1;
        transform: translate(calc(var(--drift-x, 0px) * 1.9), calc(var(--drift-y, 0px) * 1.9)) scale(0.6);
    }
    100% {
        opacity: 0;
        transform: translate(calc(var(--drift-x, 0px) * 2.0), calc(var(--drift-y, 0px) * 2.0)) scale(0.5);
    }
}

/* Enhanced particle size variations with ultra-smooth movement */
.cursor-particle.small {
    width: 1px;
    height: 1px;
    animation: particleFlowNatural 2.2s linear forwards;
    background: rgba(255, 255, 255, 0.5);
}

.cursor-particle.medium {
    width: 1.5px;
    height: 1.5px;
    animation: particleFlowNatural 2.8s linear forwards;
    background: rgba(255, 255, 255, 0.6);
}

.cursor-particle.large {
    width: 2px;
    height: 2px;
    animation: particleFlowNatural 3.2s linear forwards;
    background: rgba(255, 255, 255, 0.7);
}

/* Ultra-smooth floating particles with continuous organic movement */
.cursor-particle.floater {
    animation: particleFlowOrganic 3.5s linear forwards;
    will-change: transform, opacity;
}

@keyframes particleFlowOrganic {
    0% {
        opacity: 0.6;
        transform: translate(0, 0) scale(0.8) rotate(0deg);
    }
    8% {
        opacity: 0.75;
        transform: translate(calc(var(--organic-x, 0px) * 0.15), calc(var(--organic-y, 0px) * 0.15)) scale(0.9) rotate(30deg);
    }
    16% {
        opacity: 0.9;
        transform: translate(calc(var(--organic-x, 0px) * 0.3), calc(var(--organic-y, 0px) * 0.3)) scale(1.0) rotate(60deg);
    }
    25% {
        opacity: 1;
        transform: translate(calc(var(--organic-x, 0px) * 0.45), calc(var(--organic-y, 0px) * 0.45)) scale(1.1) rotate(90deg);
    }
    33% {
        opacity: 0.95;
        transform: translate(calc(var(--organic-x, 0px) * 0.6), calc(var(--organic-y, 0px) * 0.6)) scale(1.2) rotate(120deg);
    }
    41% {
        opacity: 0.9;
        transform: translate(calc(var(--organic-x, 0px) * 0.75), calc(var(--organic-y, 0px) * 0.75)) scale(1.25) rotate(150deg);
    }
    50% {
        opacity: 0.8;
        transform: translate(calc(var(--organic-x, 0px) * 0.9), calc(var(--organic-y, 0px) * 0.9)) scale(1.2) rotate(180deg);
    }
    58% {
        opacity: 0.7;
        transform: translate(calc(var(--organic-x, 0px) * 1.05), calc(var(--organic-y, 0px) * 1.05)) scale(1.15) rotate(210deg);
    }
    66% {
        opacity: 0.6;
        transform: translate(calc(var(--organic-x, 0px) * 1.2), calc(var(--organic-y, 0px) * 1.2)) scale(1.1) rotate(240deg);
    }
    75% {
        opacity: 0.5;
        transform: translate(calc(var(--organic-x, 0px) * 1.35), calc(var(--organic-y, 0px) * 1.35)) scale(1.0) rotate(270deg);
    }
    83% {
        opacity: 0.4;
        transform: translate(calc(var(--organic-x, 0px) * 1.5), calc(var(--organic-y, 0px) * 1.5)) scale(0.9) rotate(300deg);
    }
    91% {
        opacity: 0.2;
        transform: translate(calc(var(--organic-x, 0px) * 1.65), calc(var(--organic-y, 0px) * 1.65)) scale(0.7) rotate(330deg);
    }
    95% {
        opacity: 0.1;
        transform: translate(calc(var(--organic-x, 0px) * 1.75), calc(var(--organic-y, 0px) * 1.75)) scale(0.6) rotate(350deg);
    }
    100% {
        opacity: 0;
        transform: translate(calc(var(--organic-x, 0px) * 1.8), calc(var(--organic-y, 0px) * 1.8)) scale(0.4) rotate(360deg);
    }
}

/* Hide cursor on touch devices */
@media (hover: none) and (pointer: coarse) {
    html {
        cursor: auto;
    }
    
    body * {
        cursor: auto !important;
    }
    
    #cursor {
        display: none;
    }
    
    .cursor-particle {
        display: none;
    }
}