/* ══════════ CUSTOM CURSOR ══════════ */

/* Standard-Cursor ausblenden */
* {
    cursor: none !important;
}

/* Auf Touch-Geräten normalen Cursor zeigen */
@media (hover: none) and (pointer: coarse) {
    * {
        cursor: auto !important;
    }
}

/* Haupt-Cursor (leuchtender Ring) */
.cursor {
    position: fixed;
    width: 32px;
    height: 32px;
    border: 2px solid;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    transition: width 0.25s, height 0.25s, border-color 0.25s, background 0.25s;
    opacity: 0;
}

.light .cursor {
    border-color: #8e44ee;
    background: rgba(142, 68, 238, 0.08);
}

.dark .cursor {
    border-color: #8e44ee;
    background: rgba(142, 68, 238, 0.08);
}

.cursor.visible {
    opacity: 1;
}

/* Hover über Links/Buttons */
.cursor.hover {
    width: 56px;
    height: 56px;
    background: transparent;
    border-width: 3px;
    mix-blend-mode: difference;
    border-color: white;
}

/* Hover über Bildern/Karten */
.cursor.hover-magnetic {
    width: 80px;
    height: 80px;
    border-style: dashed;
    animation: cursorSpin 8s linear infinite;
}

/* Click-Effekt */
.cursor.click {
    width: 24px;
    height: 24px;
    transition: width 0.1s, height 0.1s;
}

@media (max-width: 1024px) {
    .cursor {
        display: none;
    }
}

/* Trail (verzögerter Follower) */
.cursor-trail {
    position: fixed;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s;
}

.light .cursor-trail {
    background: linear-gradient(135deg, #0071e3, #8e44ee);
    box-shadow: 0 0 20px rgba(142, 68, 238, 0.6),
                0 0 40px rgba(142, 68, 238, 0.3),
                0 0 60px rgba(142, 68, 238, 0.15);
}

.dark .cursor-trail {
    background: linear-gradient(135deg, #0071e3, #8e44ee);
    box-shadow: 0 0 20px rgba(142, 68, 238, 0.6),
                0 0 40px rgba(142, 68, 238, 0.3),
                0 0 60px rgba(142, 68, 238, 0.15);
}

.cursor-trail.visible {
    opacity: 1;
}

@media (max-width: 1024px) {
    .cursor-trail {
        display: none;
    }
}

/* Kleiner Punkt (exakte Mausposition) */
.cursor-dot {
    position: fixed;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 100000;
    transform: translate(-50%, -50%);
}

.light .cursor-dot {
    background: #1d1d1f;
}

.dark .cursor-dot {
    background: #f5f5f7;
}

@media (max-width: 1024px) {
    .cursor-dot {
        display: none;
    }
}

@keyframes cursorSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ══════════ CURSOR PARTICLES ══════════ */
.cursor-particle {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99997;
    will-change: transform, opacity;
}

.light .cursor-particle {
    background: linear-gradient(135deg, #0071e3, #8e44ee);
    box-shadow: 0 0 6px rgba(0, 113, 227, 0.8);
}

.dark .cursor-particle {
    background: linear-gradient(135deg, #3399ff, #a855f7);
    box-shadow: 0 0 8px rgba(51, 153, 255, 0.9);
}

/* Spark-Partikel */
.cursor-particle--spark .light,
.light .cursor-particle--spark {
    background: white;
    box-shadow: 0 0 10px rgba(0, 113, 227, 1),
                0 0 20px rgba(142, 68, 238, 0.6),
                0 0 30px rgba(0, 113, 227, 0.3);
}

.cursor-particle--spark .dark,
.dark .cursor-particle--spark {
    background: white;
    box-shadow: 0 0 12px rgba(51, 153, 255, 1),
                0 0 24px rgba(168, 85, 247, 0.7),
                0 0 36px rgba(51, 153, 255, 0.4);
}