/* ===================================
   CUSTOM GAMING CURSOR
   =================================== */

/* Hide default cursor */
* {
    cursor: none !important;
}

/* Custom cursor dot */
.custom-cursor {
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 999999;
    mix-blend-mode: difference;
    margin-left: -4px;
    margin-top: -4px;
    transition: width 0.15s ease, height 0.15s ease, margin 0.15s ease, opacity 0.15s ease;
    box-shadow:
        0 0 10px var(--color-primary),
        0 0 20px var(--color-primary),
        0 0 30px rgba(255, 33, 33, 0.5);
}

/* Crosshair lines (hidden by default) */
.custom-cursor::before,
.custom-cursor::after {
    content: '';
    position: absolute;
    background: var(--color-primary);
    opacity: 0;
    transition: opacity 0.2s ease;
    box-shadow:
        0 0 8px var(--color-primary),
        0 0 15px rgba(255, 33, 33, 0.6);
}

/* Vertical line of + */
.custom-cursor::before {
    width: 2px;
    height: 16px;
    left: 50%;
    top: 50%;
    margin-left: -1px;
    margin-top: -8px;
}

/* Horizontal line of + */
.custom-cursor::after {
    width: 16px;
    height: 2px;
    left: 50%;
    top: 50%;
    margin-left: -8px;
    margin-top: -1px;
}

/* Custom cursor ring */
.custom-cursor-ring {
    width: 30px;
    height: 30px;
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 999998;
    margin-left: -15px;
    margin-top: -15px;
    transition: width 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                height 0.2s ease, opacity 0.2s ease, margin 0.2s ease;
    box-shadow:
        0 0 15px rgba(255, 33, 33, 0.3),
        inset 0 0 10px rgba(255, 33, 33, 0.2);
    animation: cursorPulse 2s ease-in-out infinite;
}

/* Cursor states */
.custom-cursor.hover {
    width: 16px;
    height: 16px;
    margin-left: -8px;
    margin-top: -8px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

/* Show crosshair on hover */
.custom-cursor.hover::before,
.custom-cursor.hover::after {
    opacity: 1;
}

.custom-cursor-ring.hover {
    width: 45px;
    height: 45px;
    margin-left: -22.5px;
    margin-top: -22.5px;
    border-color: var(--color-primary-light);
    opacity: 0.8;
}

/* Click effect */
.custom-cursor.click {
    width: 12px;
    height: 12px;
    margin-left: -6px;
    margin-top: -6px;
}

.custom-cursor.click::before {
    height: 12px;
    margin-top: -6px;
}

.custom-cursor.click::after {
    width: 12px;
    margin-left: -6px;
}

.custom-cursor-ring.click {
    width: 36px;
    height: 36px;
    margin-left: -18px;
    margin-top: -18px;
    opacity: 0.6;
}

/* Link hover effect */
.custom-cursor.link-hover {
    width: 16px;
    height: 16px;
    margin-left: -8px;
    margin-top: -8px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.custom-cursor.link-hover::before,
.custom-cursor.link-hover::after {
    opacity: 1;
}

.custom-cursor-ring.link-hover {
    width: 40px;
    height: 40px;
    margin-left: -20px;
    margin-top: -20px;
    border-width: 2px;
}

/* Button hover effect */
.custom-cursor-ring.button-hover {
    width: 50px;
    height: 50px;
    margin-left: -25px;
    margin-top: -25px;
    border-width: 2px;
    border-style: dashed;
    animation: rotateCursor 2s linear infinite;
}

/* Text selection cursor */
.custom-cursor.text-select {
    width: 2px;
    height: 18px;
    margin-left: -1px;
    margin-top: -9px;
    border-radius: 2px;
}

/* Animations */
@keyframes cursorPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

@keyframes rotateCursor {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Gaming accent lines */
.custom-cursor-ring::before,
.custom-cursor-ring::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 2px;
    background: var(--color-primary);
    top: 50%;
    left: 50%;
    margin-left: -4px;
    margin-top: -1px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.custom-cursor-ring::before {
    transform: rotate(45deg);
}

.custom-cursor-ring::after {
    transform: rotate(-45deg);
}

.custom-cursor-ring.hover::before,
.custom-cursor-ring.hover::after {
    opacity: 1;
}

/* Disable custom cursor on touch devices */
@media (hover: none) and (pointer: coarse) {
    * {
        cursor: auto !important;
    }

    .custom-cursor,
    .custom-cursor-ring {
        display: none !important;
    }
}

/* Smooth transition for cursor follower */
.custom-cursor-ring {
    will-change: left, top;
}

.custom-cursor {
    will-change: left, top;
}

/* Hide cursor while typing in inputs */
input:focus ~ .custom-cursor,
textarea:focus ~ .custom-cursor,
input:focus ~ .custom-cursor-ring,
textarea:focus ~ .custom-cursor-ring {
    opacity: 0.3;
}

/* Special effects for gaming elements */
.btn:hover ~ .custom-cursor-ring,
a:hover ~ .custom-cursor-ring {
    border-color: var(--color-primary-light);
}

/* Corner accents for gaming feel */
.custom-cursor-ring {
    background-image:
        linear-gradient(to right, var(--color-primary) 2px, transparent 2px),
        linear-gradient(to bottom, var(--color-primary) 2px, transparent 2px),
        linear-gradient(to right, var(--color-primary) 2px, transparent 2px),
        linear-gradient(to bottom, var(--color-primary) 2px, transparent 2px);
    background-size: 8px 8px;
    background-position:
        0 0,
        0 0,
        100% 100%,
        100% 100%;
    background-repeat: no-repeat;
}