/* CURSOR-STYLES.CSS - Prosty fix z łapką */

/* Domyślnie ukryj systemowy kursor */
body {
    cursor: none;
}

/* Nasze kółko */
.cursor {
    width: 20px;
    height: 20px;
    border: 2px solid #000;
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: all 0.2s ease;
    opacity: 1;
    background: transparent;
}

/* Zmiana kolorów na ciemnych sekcjach */
.cursor.dark-section {
    border-color: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.cursor.light-section {
    border-color: #000;
    box-shadow: none;
}

/* PRZYWRÓĆ ŁAPKĘ NA ELEMENTACH KLIKALNYCH */
a, 
button, 
.menu-item, 
.project-item, 
.dot, 
.nav-burger, 
.animated-logo, 
.stat-card, 
.skill-item,
[role="button"],
[onclick],
input[type="button"],
input[type="submit"] {
    cursor: pointer !important;
}

/* Transformacja w kropkę przy hover - przez JavaScript */
.cursor.hover-dot {
    width: 6px;
    height: 6px;
    border: none;
    background: #000;
    transform: translate(-50%, -50%) translate(15px, 15px);
    transition: all 0.2s ease;
}

/* Biała kropka na ciemnych sekcjach */
.cursor.hover-dot.dark-section {
    background: #fff;
}

/* Responsywność */
@media (max-width: 768px) {
    .cursor {
        width: 16px;
        height: 16px;
        border-width: 1.5px;
    }
}

/* Dla urządzeń dotykowych */
@media (hover: none) and (pointer: coarse) {
    .cursor {
        display: none;
    }
    
    /* Przywróć normalny kursor na urządzeniach dotykowych */
    body {
        cursor: auto;
    }
}