/* Custom Cursor Styles */
:root {
    --cursor-size: 20px;
    --cursor-hover-size: 40px;
    --cursor-color: var(--primary-color);
    --cursor-border: 2px;
}

/* Hide default cursor */
body {
    cursor: none;
}

/* Main cursor */
.cursor-dot {
    width: var(--cursor-size);
    height: var(--cursor-size);
    background: rgba(255, 107, 0, 0.2);
    border: var(--cursor-border) solid var(--cursor-color);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s, background-color 0.3s, transform 0.1s;
    mix-blend-mode: difference;
    will-change: transform, width, height;
    backdrop-filter: invert(1);
    -webkit-backdrop-filter: invert(1);
}

/* Cursor trail effect */
.cursor-trail {
    position: fixed;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    opacity: 0;
    transform: translate(-50%, -50%);
    background: var(--cursor-color);
    transition: opacity 0.5s ease;
    will-change: transform, opacity;
}

/* Cursor animations for different states */
.cursor-dot.hover {
    width: var(--cursor-hover-size);
    height: var(--cursor-hover-size);
    background: rgba(255, 107, 0, 0.1);
    mix-blend-mode: normal;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(255, 107, 0, 0.5);
}

.cursor-dot.click {
    animation: cursorClick 0.5s ease forwards;
}

/* Cursor animations */
@keyframes cursorClick {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.5;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* Interactive elements cursor states */
a, button, input[type="submit"], .card-image, .social-link, .auth-btn,
.nav-links a, .featured-card, .highlight-item, .cta-btn,
.countdown-box, input, textarea, select, [data-cursor="hover"] {
    cursor: none;
}

/* Hover states for all interactive elements */
a:hover ~ .cursor-dot,
button:hover ~ .cursor-dot,
input[type="submit"]:hover ~ .cursor-dot,
.card-image:hover ~ .cursor-dot,
.social-link:hover ~ .cursor-dot,
.auth-btn:hover ~ .cursor-dot,
.nav-links a:hover ~ .cursor-dot,
.featured-card:hover ~ .cursor-dot,
.highlight-item:hover ~ .cursor-dot,
.cta-btn:hover ~ .cursor-dot,
.countdown-box:hover ~ .cursor-dot,
input:hover ~ .cursor-dot,
textarea:hover ~ .cursor-dot,
select:hover ~ .cursor-dot,
[data-cursor="hover"]:hover ~ .cursor-dot {
    width: var(--cursor-hover-size);
    height: var(--cursor-hover-size);
    background: rgba(255, 107, 0, 0.1);
    mix-blend-mode: normal;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Special states for form elements */
input:focus ~ .cursor-dot,
textarea:focus ~ .cursor-dot,
select:focus ~ .cursor-dot {
    width: calc(var(--cursor-hover-size) * 1.2);
    height: calc(var(--cursor-hover-size) * 1.2);
    background: rgba(255, 107, 0, 0.05);
    border-color: rgba(255, 107, 0, 0.8);
}

/* Hide cursor on mobile devices */
@media (max-width: 768px) {
    .cursor-dot, .cursor-trail {
        display: none;
    }
    
    body {
        cursor: auto;
    }
    
    a, button, input[type="submit"], .card-image, .social-link, .auth-btn,
    .nav-links a, .featured-card, .highlight-item, .cta-btn,
    .countdown-box, input, textarea, select, [data-cursor="hover"] {
        cursor: pointer;
    }
    
    input, textarea, select {
        cursor: text;
    }
}

/* Performance optimizations */
.cursor-dot, .cursor-trail {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    perspective: 1000px;
}