/*
    Click Effects
    Main stylesheet

    Prefix: ce-
*/


/* ==========================================================
   CURSEUR DESKTOP
   ========================================================== */


.ce-cursor-heart,
.ce-cursor-heart * {
    cursor: url("./heart-cursor.svg") 15 15, auto !important;
}


.ce-cursor-skull,
.ce-cursor-skull * {
    cursor: url("./skull-cursor.svg") 15 15, auto !important;
}



/* ==========================================================
   BASE DES ELEMENTS TEMPORAIRES
   ========================================================== */


.ce-effect {
    position: fixed;
    pointer-events: none;
    z-index: 2147483647;
    user-select: none;
}



/* ==========================================================
   FLASH BLANC
   ========================================================== */


.ce-flash {

    width: 33px;
    height: 33px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.95) 0%,
            rgba(255,255,255,0.45) 40%,
            rgba(255,255,255,0) 75%
        );

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

    animation:
        ce-flash-animation 80ms ease-out forwards;

}


@keyframes ce-flash-animation {

    0% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(0);
    }


    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(4);
    }

}



/* ==========================================================
   ANNEAU JAUNE LUMINEUX
   ========================================================== */


.ce-ring {

    width: 21px;
    height: 21px;

    border-radius: 50%;

    border:
        3px solid rgba(255,216,74,0.95);


    box-shadow:
        0 0 8px rgba(255,216,74,0.8),
        0 0 18px rgba(255,216,74,0.5);


    filter: blur(1px);


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


    animation:
        ce-ring-animation 450ms ease-out forwards;

}



@keyframes ce-ring-animation {

    0% {

        opacity: 1;

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

    }


    100% {

        opacity: 0;

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

    }

}



/* ==========================================================
   PARTICULES DOREES
   ========================================================== */


.ce-particle {

    width: 5px;
    height: 5px;

    border-radius: 50%;


    background:
        radial-gradient(
            circle,
            #fff6a0 0%,
            #ffd84a 45%,
            #e9a800 100%
        );


    box-shadow:
        0 0 5px rgba(255,216,74,0.9);


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


    animation:
        ce-particle-animation 500ms ease-out forwards;

}



@keyframes ce-particle-animation {


    0% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            translate(0,0)
            scale(1);

    }


    100% {

        opacity: 0;

        transform:
            translate(-50%, -50%)
            translate(var(--ce-x), var(--ce-y))
            scale(0);

    }

}



/* ==========================================================
   ICONE ❤️ / 💀
   ========================================================== */


.ce-icon {

    font-size: 19px;

    line-height: 1;

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


    opacity: 1;


    animation:
        ce-icon-animation 1000ms ease-out forwards;

}



@keyframes ce-icon-animation {


    0% {

        opacity: 0;

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

    }


    15% {

        opacity: 1;

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

    }


    100% {

        opacity: 0;

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

    }

}



/* ==========================================================
   ACCESSIBILITE
   Respect des préférences système
   ========================================================== */


@media (prefers-reduced-motion: reduce) {


    .ce-effect {

        animation: none !important;

    }


}