/* =========================================================
   DRONESOCCER.SK - CUSTOM CURSOR
   ========================================================= */


/*
 * Custom kurzor používame iba na zariadeniach
 * s presným ukazovateľom - myš / touchpad.
 */
@media (pointer: fine) {

    /* =====================================================
       HLAVNÝ KURZOR
       ===================================================== */

    .ds-cursor {
    position: fixed;

    /*
     * JS posúva stred kurzora presne
     * na pozíciu myši.
     */
    left: -13px;
    top: -13px;

    width: 26px;
    height: 26px;

    z-index: 99999;

    pointer-events: none;

    opacity: 0;

    /*
     * Základná farba DroneSoccer kurzora.
     *
     * Normálny stav = oranžová.
     * Pri hoveri sa prepne na cyan.
     */
    --cursor-color: var(--color-gold-bright);

    /*
     * Veľkosť zameriavača.
     */
    --cursor-scale: 1;

    /*
     * Transform nastavuje JS.
     *
     * Scale preto nerobíme priamo tu,
     * ale na jednotlivých častiach kurzora.
     */
    will-change: transform;

    transition:
        opacity 120ms ease;

    /*
     * Oranžová žiara základného kurzora.
     */
    filter:
        drop-shadow(
            0 0 5px
            var(--color-gold-focus)
        );
}


    /* =====================================================
       VIDITEĽNOSŤ
       ===================================================== */

    .ds-cursor.is-visible {
        opacity: 1;
    }


    /* =====================================================
       ŠTYRI ČASTI ZAMERIAVAČA
       ===================================================== */

    .ds-cursor__line {
        position: absolute;

        display: block;

        background:
            var(--cursor-color);

        border-radius: 999px;

        box-shadow:
            0 0 4px
            rgba(255, 196, 0, .95);

        transition:
            width 160ms ease,
            height 160ms ease,
            top 160ms ease,
            right 160ms ease,
            bottom 160ms ease,
            left 160ms ease,
            background-color 160ms ease,
            box-shadow 160ms ease,
            transform 120ms ease;
    }


    /*
     * HORNÁ čiarka
     */
    .ds-cursor__line--top {
        width: 2px;
        height: 7px;

        top: -2px;
        left: 12px;
    }


    /*
     * PRAVÁ čiarka
     */
    .ds-cursor__line--right {
        width: 7px;
        height: 2px;

        right: -2px;
        top: 12px;
    }


    /*
     * SPODNÁ čiarka
     */
    .ds-cursor__line--bottom {
        width: 2px;
        height: 7px;

        bottom: -2px;
        left: 12px;
    }


    /*
     * ĽAVÁ čiarka
     */
    .ds-cursor__line--left {
        width: 7px;
        height: 2px;

        left: -2px;
        top: 12px;
    }


    /* =====================================================
       KRUH
       ===================================================== */

    /*
     * Kruh vytvoríme cez ::before.
     */
    .ds-cursor::before {
        content: '';

        position: absolute;

        inset: 3px;

        border:
            1.5px solid
            var(--cursor-color);

        border-radius: 50%;

        opacity: .9;

        box-shadow:
    0 0 7px rgba(255, 196, 0, .55),
    inset 0 0 5px rgba(255, 196, 0, .26);

        transform:
            scale(
                var(--cursor-scale)
            );

        transition:
            transform 160ms ease,
            border-color 160ms ease,
            box-shadow 160ms ease,
            opacity 160ms ease;
    }


    /* =====================================================
       STREDOVÁ BODKA
       ===================================================== */

    .ds-cursor__dot {
        position: absolute;

        left: 50%;
        top: 50%;

        width: 5px;
        height: 5px;

        border-radius: 50%;

        background:
            var(--cursor-color);

        box-shadow:
            0 0 6px
            rgba(101, 220, 255, .9);

        transform:
            translate(-50%, -50%);

        transition:
            width 150ms ease,
            height 150ms ease,
            background-color 150ms ease,
            box-shadow 150ms ease,
            opacity 150ms ease;
    }


    /* =====================================================
       HOVER NAD LINKOM / BUTTONOM
       ===================================================== */

    .ds-cursor.is-hover {
    --cursor-color: #65dcff;
    --cursor-scale: 1.42;

    filter:
        drop-shadow(
            0 0 7px
            rgba(101, 220, 255, .75)
        );
}


    .ds-cursor.is-hover::before {
    box-shadow:
        0 0 10px rgba(101, 220, 255, .75),
        0 0 22px rgba(101, 220, 255, .30),
        inset 0 0 6px rgba(101, 220, 255, .20);
}


    /*
     * Pri hoveri odtiahneme aj
     * štyri značky zameriavača.
     */

    .ds-cursor.is-hover
    .ds-cursor__line--top {
        top: -7px;
    }


    .ds-cursor.is-hover
    .ds-cursor__line--right {
        right: -7px;
    }


    .ds-cursor.is-hover
    .ds-cursor__line--bottom {
        bottom: -7px;
    }


    .ds-cursor.is-hover
    .ds-cursor__line--left {
        left: -7px;
    }


    /* =====================================================
       KLIK
       ===================================================== */

    .ds-cursor.is-clicking {
        --cursor-scale: .72;
    }


    .ds-cursor.is-clicking::before {
    box-shadow:
        0 0 12px rgba(255,196,0,.95),
        0 0 24px rgba(255,196,0,.40);
}

.ds-cursor.is-clicking .ds-cursor__dot {
    width: 8px;
    height: 8px;

    box-shadow:
        0 0 12px rgba(255,196,0,1);
}


   


    /*
     * Značky pri kliknutí
     * pritiahneme k stredu.
     */

    .ds-cursor.is-clicking
    .ds-cursor__line--top {
        top: 1px;
    }


    .ds-cursor.is-clicking
    .ds-cursor__line--right {
        right: 1px;
    }


    .ds-cursor.is-clicking
    .ds-cursor__line--bottom {
        bottom: 1px;
    }


    .ds-cursor.is-clicking
    .ds-cursor__line--left {
        left: 1px;
    }


    /* =====================================================
       TEXTOVÉ POLE
       ===================================================== */

    /*
     * Pri písaní nechceme veľký zameriavač,
     * ktorý by zakrýval text.
     *
     * Zostane iba malá bodka.
     */

    .ds-cursor.is-text::before {
        opacity: 0;

        transform:
            scale(.25);
    }


    .ds-cursor.is-text
    .ds-cursor__line {
        opacity: 0;
    }


    .ds-cursor.is-text
    .ds-cursor__dot {
        width: 4px;
        height: 4px;
    }


    /* =====================================================
       VOLITEĽNÝ ORANŽOVÝ STAV
       ===================================================== */

    /*
     * Neskôr môžeme na ľubovoľný element dať:
     *
     * data-cursor-accent
     *
     * a kurzor sa nad ním prepne do
     * DroneSoccer oranžovej.
     */

    .ds-cursor.is-accent {
        --cursor-color: #ffad21;

        filter:
            drop-shadow(
                0 0 6px
                rgba(255, 173, 33, .60)
            );
    }


    /* =====================================================
       NATÍVNY KURZOR
       ===================================================== */

    /*
     * TOTO ZATIAĽ NECHÁVAME VYPNUTÉ.
     *
     * Najprv si otestujeme custom kurzor
     * spolu s normálnou šípkou.
     *
     * Keď bude všetko sedieť,
     * odkomentujeme cursor:none.
     */

    
    html,
    body,
    a,
    button,
    input,
    textarea,
    select,
    summary,
    [role="button"] {
        cursor: none !important;
    }
    
}


/* =========================================================
   TOUCH / MOBIL
   ========================================================= */

/*
 * Na zariadeniach bez presnej myši
 * custom kurzor vôbec nezobrazujeme.
 */
@media (pointer: coarse) {

    .ds-cursor {
        display: none !important;
    }
}