/* Mystical Purple Nebula Cursor Trail Effect */
.cursor-trail {
    position: fixed;
    width: 18px;
    height: 18px;
    background: radial-gradient(circle, 
        rgba(138, 43, 226, 1) 0%, 
        rgba(147, 112, 219, 0.8) 30%, 
        rgba(218, 112, 214, 0.4) 60%, 
        transparent 80%);
    border-radius: 50%;    pointer-events: none;
    z-index: 9999;
    opacity: 0.54;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    box-shadow: 
        0 0 20px rgba(138, 43, 226, 0.36),
        0 0 40px rgba(147, 112, 219, 0.24),
        inset 0 0 8px rgba(138, 43, 226, 0.48);
    filter: blur(0.5px);
}

.cursor-trail.fading {
    opacity: 0;
    transform: scale(0.2);
    filter: blur(2px);
}

/* Enhanced mystical nebula particles */
.cursor-trail.particle-1 {
    background: radial-gradient(circle, 
        rgba(138, 43, 226, 1) 0%, 
        rgba(75, 0, 130, 0.8) 30%, 
        rgba(138, 43, 226, 0.3) 60%, 
        transparent 80%);    box-shadow: 
        0 0 16px rgba(138, 43, 226, 0.48),
        0 0 32px rgba(75, 0, 130, 0.30);
}

.cursor-trail.particle-2 {
    background: radial-gradient(circle, 
        rgba(147, 112, 219, 1) 0%, 
        rgba(123, 104, 238, 0.8) 30%, 
        rgba(186, 85, 211, 0.3) 60%, 
        transparent 80%);    box-shadow: 
        0 0 16px rgba(147, 112, 219, 0.48),
        0 0 32px rgba(123, 104, 238, 0.30);
}

.cursor-trail.particle-3 {
    background: radial-gradient(circle, 
        rgba(153, 50, 204, 1) 0%, 
        rgba(106, 90, 205, 0.8) 30%, 
        rgba(221, 160, 221, 0.3) 60%, 
        transparent 80%);    box-shadow: 
        0 0 16px rgba(153, 50, 204, 0.48),
        0 0 32px rgba(106, 90, 205, 0.30);
}

/* Mystical sizes for nebula effect */
.cursor-trail.small {
    width: 12px;
    height: 12px;
}

.cursor-trail.medium {
    width: 18px;
    height: 18px;
}

.cursor-trail.large {
    width: 24px;
    height: 24px;
}

/* Disable trail on mobile devices */
@media (max-width: 768px) {
    .cursor-trail {
        display: none;
    }
}

/* Enhanced mystical effect when hovering over interactive elements */
body:hover .cursor-trail.hover-effect {
    animation: mysticPulse 0.6s ease-in-out infinite alternate;
}

@keyframes mysticPulse {
    from {
        transform: scale(1);
        opacity: 0.54;
        box-shadow: 
            0 0 20px rgba(138, 43, 226, 0.36),
            0 0 40px rgba(147, 112, 219, 0.24);
    }
    to {
        transform: scale(1.3);
        opacity: 0.6;
        box-shadow: 
            0 0 30px rgba(138, 43, 226, 0.48),
            0 0 60px rgba(147, 112, 219, 0.36),
            0 0 90px rgba(218, 112, 214, 0.18);
    }
}

/* Nebula sparkle effect */
@keyframes nebulaPulse {
    0% { 
        opacity: 0.48; 
        transform: scale(0.9); 
        filter: blur(0.3px);
    }
    50% { 
        opacity: 0.6; 
        transform: scale(1.1); 
        filter: blur(0.7px);
    }
    100% { 
        opacity: 0.54; 
        transform: scale(1); 
        filter: blur(0.5px);
    }
}