/*==================================================
NEON BEAST IDLE
ANIMATIONS
==================================================*/

/*==========================================
PROGRESS BAR SHINE (idle hunt bar)
==========================================*/

.progress-fill{

    position:relative;

    overflow:hidden;

}

.progress-fill::after{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:40%;
    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.55),
        transparent
    );

    animation:progressShine 1.6s linear infinite;

}

@keyframes progressShine{

    0%{
        transform:translateX(-120%);
    }

    100%{
        transform:translateX(280%);
    }

}

/*==========================================
LIVE NEON BACKGROUND
==========================================*/

#bg-overlay{

    animation:bgPulse 8s ease-in-out infinite;

}

@keyframes bgPulse{

    0%,100%{
        opacity:.85;
    }

    50%{
        opacity:1;
    }

}

#bg-particles{

    background-image:

        radial-gradient(2px 2px at 20% 30%, rgba(0,229,255,.55), transparent),
        radial-gradient(2px 2px at 65% 70%, rgba(255,43,194,.45), transparent),
        radial-gradient(2px 2px at 85% 20%, rgba(53,255,150,.45), transparent),
        radial-gradient(1.5px 1.5px at 40% 85%, rgba(0,229,255,.4), transparent),
        radial-gradient(1.5px 1.5px at 10% 60%, rgba(255,43,194,.35), transparent);

    background-repeat:repeat;

    background-size:400px 400px;

    animation:particleDrift 40s linear infinite;

    opacity:.6;

}

@keyframes particleDrift{

    0%{
        background-position:0 0;
    }

    100%{
        background-position:-400px -400px;
    }

}

/*==========================================
GUARDIAN / EQUIPMENT UNLOCKED GLOW PULSE
==========================================*/

.guardian-slot.unlocked,
.equipment-slot.unlocked{

    animation:unlockedPulse 3s ease-in-out infinite;

}

@keyframes unlockedPulse{

    0%,100%{
        box-shadow:0 0 8px rgba(53,255,150,.15);
    }

    50%{
        box-shadow:0 0 18px rgba(53,255,150,.35);
    }

}