.cursor {
    width: 20px;
    height: 20px;
    border: 2px solid hsl(var(--primary));
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transition: all 0.1s ease;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
}

.cursor-glow {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, hsl(var(--primary) / 0.15), transparent 70%);
    position: fixed;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

.cursor.active {
    transform: translate(-50%, -50%) scale(1.5);
    background: hsl(var(--primary) / 0.3);
}

.cursor,
.cursor-glow {
  will-change: transform, opacity;
}

@media (hover: none), (pointer: coarse) {

    .cursor,
    .cursor-glow {
        display: none;
    }

    body {
        cursor: auto;
    }

    nav button,
    .hero-button,
    .project-card,
    button,
    a,
    .card {
        cursor: pointer;
    }
}