/* ========================================
   Mouse Trail Effect - Professional
   ======================================== */

/* Cursor Dot */
.cursor-dot {
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #0ea5e9 0%, #10b981 100%);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.15s ease;
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.5);
}

/* Cursor Outline */
.cursor-outline {
    width: 32px;
    height: 32px;
    border: 2px solid rgba(14, 165, 233, 0.5);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9998;
    transition: all 0.2s ease;
}

/* Hover effect on links and buttons */
.cursor-dot.hover {
    transform: scale(1.5);
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.cursor-outline.hover {
    width: 48px;
    height: 48px;
    border-color: rgba(16, 185, 129, 0.8);
}

/* Trail particles */
.cursor-trail {
    width: 6px;
    height: 6px;
    background: linear-gradient(135deg, #0ea5e9 0%, #10b981 100%);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9997;
    opacity: 0.6;
    animation: fadeOut 0.8s ease-out forwards;
}

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: scale(0);
    }
}

/* Keep default cursor visible - UPDATED for better UX */
/* The trail effect will work alongside the default cursor */

/* Hide trail on mobile */
@media (max-width: 767px) {

    .cursor-dot,
    .cursor-outline,
    .cursor-trail {
        display: none !important;
    }
}

/* Ripple effect on click */
.cursor-ripple {
    position: fixed;
    border: 2px solid rgba(14, 165, 233, 0.6);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9996;
    animation: ripple 0.6s ease-out forwards;
}

@keyframes ripple {
    from {
        width: 0;
        height: 0;
        opacity: 1;
    }

    to {
        width: 100px;
        height: 100px;
        opacity: 0;
    }
}