/* =====================================================
   Custom Cursor & Cursor Follower
   Glowing pointer that chases the cursor
   ===================================================== */

/* Hide default cursor on interactive elements */
body,
a,
button,
input,
textarea,
select,
.card,
.btn {
    cursor: none !important;
}

/* Custom Cursor Dot */
.custom-cursor {
    position: fixed;
    width: 12px;
    height: 12px;
    background: var(--primary-color);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99980;
    transition: transform 0.15s ease, background 0.3s ease;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
}

/* Cursor Follower (Outer Ring) */
.cursor-follower {
    position: fixed;
    width: 40px;
    height: 40px;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99970;
    transition: width 0.3s ease, height 0.3s ease,
        border-color 0.3s ease, opacity 0.3s ease;
    transform: translate(-50%, -50%);
    opacity: 0.6;
    box-shadow: 0 0 20px var(--primary-color);
}

/* Cursor on Hover (Interactive Elements) */
body.cursor-hover .custom-cursor {
    transform: translate(-50%, -50%) scale(1.5);
    background: var(--secondary-color);
}

body.cursor-hover .cursor-follower {
    width: 60px;
    height: 60px;
    border-color: var(--secondary-color);
    opacity: 0.8;
    box-shadow: 0 0 30px var(--secondary-color);
}

/* Cursor on Click */
body.cursor-click .custom-cursor {
    transform: translate(-50%, -50%) scale(0.8);
}

body.cursor-click .cursor-follower {
    width: 50px;
    height: 50px;
}

/* Trail Effect */
.cursor-trail {
    position: fixed;
    width: 6px;
    height: 6px;
    background: var(--primary-color);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99960;
    opacity: 0.6;
    transform: translate(-50%, -50%);
    animation: trailFade 0.8s ease-out forwards;
}

@keyframes trailFade {
    from {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1);
    }

    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
}

/* Cursor Variations for Different Elements */

/* Link Hover */
a:hover~.custom-cursor,
a:hover~.cursor-follower {
    border-color: var(--accent-color);
}

/* Button Hover - Larger */
.btn:hover~.cursor-follower {
    width: 70px;
    height: 70px;
}

/* Input Focus */
input:focus~.cursor-follower,
textarea:focus~.cursor-follower {
    border-color: var(--info);
    opacity: 1;
}

/* Dark Mode Cursor */
[data-theme="dark"] .custom-cursor {
    background: var(--primary-color);
    mix-blend-mode: screen;
}

[data-theme="dark"] .cursor-follower {
    border-color: var(--primary-color);
    box-shadow: 0 0 25px var(--primary-color);
}

/* Cursor Text (Optional - Shows text on hover) */
.cursor-text {
    position: fixed;
    color: var(--text-inverse);
    font-size: 12px;
    font-weight: 600;
    background: var(--primary-color);
    padding: 4px 8px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 99980;
    opacity: 0;
    transform: translate(-50%, -150%);
    transition: opacity 0.3s ease;
    white-space: nowrap;
}

.cursor-text.show {
    opacity: 1;
}

/* Magnetic Effect on Buttons */
.btn-magnetic {
    transition: transform 0.3s ease;
}

/* Sparkle Effect */
.cursor-sparkle {
    position: fixed;
    width: 8px;
    height: 8px;
    background: var(--accent-color);
    pointer-events: none;
    z-index: 99950;
    animation: sparkle 1s ease-out forwards;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%,
            68% 57%, 79% 91%, 50% 70%,
            21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

@keyframes sparkle {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5) rotate(180deg);
    }
}

/* Cursor Glow Pulse */
@keyframes cursorPulse {

    0%,
    100% {
        box-shadow: 0 0 20px var(--primary-color);
    }

    50% {
        box-shadow: 0 0 40px var(--primary-color);
    }
}

.cursor-follower.pulse {
    animation: cursorPulse 2s ease-in-out infinite;
}

/* Mobile - Show default cursor */
@media (max-width: 768px) {

    body,
    a,
    button,
    input,
    textarea,
    select,
    .card,
    .btn {
        cursor: auto !important;
    }

    .custom-cursor,
    .cursor-follower,
    .cursor-trail,
    .cursor-sparkle {
        display: none !important;
    }
}

/* Touch Devices - Show default cursor */
@media (hover: none) and (pointer: coarse) {

    body,
    a,
    button,
    input,
    textarea,
    select,
    .card,
    .btn {
        cursor: auto !important;
    }

    .custom-cursor,
    .cursor-follower,
    .cursor-trail,
    .cursor-sparkle {
        display: none !important;
    }
}

/* High Performance Mode */
@media (prefers-reduced-motion: reduce) {

    .cursor-trail,
    .cursor-sparkle {
        display: none;
    }

    .cursor-follower {
        transition: none;
    }
}