/**
 * Author: Xiico Software Solutions
 * Site: XIICO.NET
 * URL: https://xiico.net
 */
.cursor {
    z-index: 99999;
    position: fixed;
}

.cursor .click-animation {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cursor .click-animation .shape {
    position: absolute;
    opacity: 0;
}

/* Circles */
.cursor .click-animation .shape.circle.big {
    width: 40px;
    height: 40px;
    border: 2px solid #4fb4f8;
    border-radius: 50%;
}

.cursor .click-animation .shape.circle.small {
    width: 20px;
    height: 20px;
    border: 1px solid #2ca8fa;
    border-radius: 50%;
}

.cursor.active .click-animation .shape.circle {
    animation: click-animation-circle 3s ease-out infinite;
}

@keyframes click-animation-circle {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    30% {
        opacity: 0;
        transform: scale(3);
    }
}

/* Triangles */
.cursor .click-animation .shape.triangle.yellow {
    border-style: solid;
    border-width: 0 5px 10px 5px;
    border-color: transparent transparent #f9de2d transparent;
}

.cursor.active .click-animation .shape.triangle.yellow {
    animation: click-animation-triangle-yellow 3s ease-out infinite;
}

@keyframes click-animation-triangle-yellow {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    40% {
        opacity: 0;
        transform: scale(2.5) translate(50px, -50px) rotate(360deg);
    }
}

.cursor .click-animation .shape.triangle.green {
    border-style: solid;
    border-width: 0 3.5px 7px 3.5px;
    border-color: transparent transparent #47eda0 transparent;
}

.cursor.active .click-animation .shape.triangle.green {
    animation: click-animation-triangle-green 3s ease-out infinite;
}

@keyframes click-animation-triangle-green {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    40% {
        opacity: 0;
        transform: scale(2.5) translate(20px, 50px) rotate(360deg);
    }
}

/* Disc */
.cursor .click-animation .shape.disc {
    width: 8.5px;
    height: 8.5px;
    background: #d563f8;
    border-radius: 50%;
}

.cursor.active .click-animation .shape.disc {
    animation: click-animation-disc 3s ease-out infinite;
}

@keyframes click-animation-disc {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    40% {
        opacity: 0;
        transform: scale(2) translate(-70px, -30px);
    }
}