.raya-spark-container {
    width: 50px;
    height: 50px;
    position: fixed;
    z-index: 5;

    animation: fade-in 3s ease-in-out both;
    cursor: url('/img/pawcursor_highlight.png'), auto;
}
@keyframes fade-in {
    from {
        scale: 5;
        opacity: 0;
    }
    to {
        scale: 1;
        opacity: 1;
    }
}
.raya-spark-img {
    position: absolute;
    width: 50px;
    height: 50px;

    background-image: url("/img/raye/Raye's Halo.png");
    background-size: cover;
    background-repeat: no-repeat;

    z-index: 101;

    animation: 
        spark-img-rotate 20s linear infinite,
        spark-img-pulsate 3s ease-in-out infinite alternate
    ;
}
.raya-spark-img-2 {
    position: absolute;
    width: 100px;
    height: 100px;
    top: -25px;
    left: -25px;

    background-image: url("/img/raye/raye_flare_b.png");
    background-size: cover;
    background-repeat: no-repeat;

    z-index: 100;

    animation: 
        spark-img-rotate 20s linear infinite reverse,
        spark-img-pulsate 5s ease-in-out infinite alternate-reverse
    ;
}
.raya-spark-heartpulse {
    position: absolute;
    width: 200px;
    height: 200px;
    left: -75px;
    top: -75px;

    background-image: url("/img/raye/raye_heart_pulse.png");
    background-size: cover;
    background-repeat: no-repeat;

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

    animation: spark-heart-pulsate 4s ease-in-out infinite;
}
.raya-spark-clickpulse {
    position: absolute;
    width: 200px;
    height: 200px;
    left: -75px;
    top: -75px;

    background-image: url("/img/raye/halo-raye-1.png");
    background-size: cover;
    background-repeat: no-repeat;

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

    animation: spark-effect-pulsate 3s ease-out infinite;
}
.raya-spark-clickpulse-2 {
    position: absolute;
    width: 200px;
    height: 200px;
    left: -75px;
    top: -75px;

    background-image: url("/img/raye/raye_flare_b.png");
    background-size: cover;
    background-repeat: no-repeat;

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

    animation: spark-effect-pulsate 3s ease-out infinite;
}
@keyframes spark-img-pulsate {
    0% {
        scale: 0.4;
    }
    100% {
        scale: 0.5;
    }
}
@keyframes spark-img-rotate {
    0% {
        rotate: 0deg;
    }
    100% {
        rotate: 360deg;
    }
}
@keyframes spark-heart-pulsate {
    0% {
        scale: 0.1;
        opacity: 1;
    }
    100% {
        scale: 1.3;
        opacity: 0;
    }
}
@keyframes spark-effect-pulsate {
    0% {
        scale: 0.1;
        opacity: 1;
        rotate: 0deg;
    }
    100% {
        scale: 0.8;
        opacity: 0;
        rotate: 360deg;
    }
}