/* =========================================
   APOLLO CUSTOM CURSOR
========================================= */

@media (pointer: fine) {

    /* Masque le curseur natif */
    body.apollo-cursor-ready,
    body.apollo-cursor-ready * {
        cursor: none !important;
    }


    /* =========================================
       BASE
    ========================================= */

    .apollo-cursor-dot,
    .apollo-cursor-ring {
        position: fixed;
        top: 0;
        left: 0;

        pointer-events: none;
        z-index: 999999;

        border-radius: 50%;
        opacity: 0;
    }


    /* =========================================
       POINT CENTRAL
    ========================================= */

    .apollo-cursor-dot {
        width: 7px;
        height: 7px;

        background: #f8acfa;

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

        transition:
            background-color .2s ease,
            transform .2s ease;
    }


    /* =========================================
       CERCLE EXTÉRIEUR
    ========================================= */

    .apollo-cursor-ring {
        width: 34px;
        height: 34px;

        border: 2px solid #8a009b;
        background: transparent;

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

        transition:
            width .25s ease,
            height .25s ease,
            border-color .2s ease,
            background-color .2s ease,
            opacity .2s ease;
    }


    /* =========================================
       APPARITION DU CURSEUR
    ========================================= */

    body.apollo-cursor-ready .apollo-cursor-dot,
    body.apollo-cursor-ready .apollo-cursor-ring {
        opacity: 1;
    }


    /* =========================================
       SUR LIEN / BOUTON
    ========================================= */

    body.apollo-cursor-hover .apollo-cursor-ring {
        width: 46px;
        height: 46px;

        border-color: #39ff14;

        background: rgba(57, 255, 20, 0.06);
    }


    /* Point noir au survol */
    body.apollo-cursor-hover .apollo-cursor-dot {
        background: #000000;

        transform:
            translate(-50%, -50%)
            scale(1.05);
    }


    /* =========================================
       AU CLIC
    ========================================= */

    body.apollo-cursor-click .apollo-cursor-ring {
        width: 40px;
        height: 40px;
    }

    body.apollo-cursor-click .apollo-cursor-dot {
        transform:
            translate(-50%, -50%)
            scale(.7);
    }

}


/* =========================================
   TABLETTES / MOBILES
   Pas de curseur personnalisé
========================================= */

@media (pointer: coarse) {

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

}