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

.cursor-dot {
    width: 4px;
    height: 4px;
    background: var(--color-text-primary);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: var(--z-index-cursor);
    transition: transform 0.1s ease;
    transform: translate(-50%, -50%);
}

/* Hover Effects */
.cursor.hover {
    transform: translate(-50%, -50%) scale(2);
    background: var(--color-text-primary);
}

.cursor-dot.hover {
    transform: translate(-50%, -50%) scale(0.5);
    background: var(--color-background);
}

/* Link Hover */
.cursor.link-hover {
    transform: translate(-50%, -50%) scale(1.5);
    background: var(--color-primary);
}

.cursor-dot.link-hover {
    transform: translate(-50%, -50%) scale(0.8);
    background: var(--color-background);
}

/* Button Hover */
.cursor.button-hover {
    transform: translate(-50%, -50%) scale(1.2);
    background: var(--color-text-primary);
}

.cursor-dot.button-hover {
    transform: translate(-50%, -50%) scale(0.7);
    background: var(--color-background);
}

/* Hide on Mobile */
@media (max-width: 768px) {
    .cursor,
    .cursor-dot {
        display: none;
    }
}