/* ========================= */
/* Base Transition */
/* ========================= */

.voice-circle,
.ring,
#davidImage{

    transition:all .35s ease;

}

/* ========================= */
/* Idle */
/* ========================= */

.voice-circle.idle #davidImage{

    animation:idleFloat 4s ease-in-out infinite;

}

/* ========================= */
/* Listening */
/* ========================= */

.voice-circle.listening .ring1{

    animation:ringPulse 1.2s infinite;

}

.voice-circle.listening .ring2{

    animation:ringPulse 1.2s .2s infinite;

}

.voice-circle.listening .ring3{

    animation:ringPulse 1.2s .4s infinite;

}

/* ========================= */
/* Thinking */
/* ========================= */

.voice-circle.thinking .ring1,
.voice-circle.thinking .ring2,
.voice-circle.thinking .ring3{

    animation:rotateRing 6s linear infinite;

}

.voice-circle.thinking #davidImage{

    box-shadow:
    0 0 45px rgba(192,148,69,.8);

}

/* ========================= */
/* Speaking */
/* ========================= */

.voice-circle.speaking{

    animation:speakingPulse .8s infinite;

}

.voice-circle.speaking .ring1{

    animation:wave 1s infinite;

}

.voice-circle.speaking .ring2{

    animation:wave 1s .2s infinite;

}

.voice-circle.speaking .ring3{

    animation:wave 1s .4s infinite;

}

/* ========================= */
/* Keyframes */
/* ========================= */

@keyframes idleFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

@keyframes ringPulse{

    0%{

        transform:scale(1);

        opacity:.35;

        border-color:#2F80ED;

    }

    50%{

        transform:scale(1.05);

        opacity:1;

    }

    100%{

        transform:scale(1);

        opacity:.35;

    }

}

@keyframes rotateRing{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes speakingPulse{

    0%,100%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.02);

    }

}

@keyframes wave{

    0%{

        transform:scale(1);

        opacity:.5;

    }

    50%{

        transform:scale(1.08);

        opacity:1;

    }

    100%{

        transform:scale(1);

        opacity:.5;

    }

}
@keyframes thinking{

0%{

transform:rotate(0deg);

}

100%{

transform:rotate(360deg);

}

}
/*================================

Idle Pulse

================================*/

@keyframes idlePulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.02);

    }

    100%{

        transform:scale(1);

    }

}

.idle .ring1{

    animation:idlePulse 2.2s infinite;

}

.idle .ring2{

    animation:idlePulse 2.2s .25s infinite;

}

.idle .ring3{

    animation:idlePulse 2.2s .45s infinite;

}
@keyframes spin{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}
@keyframes onlineBlink{

    0%,100%{

        opacity:1;

    }

    50%{

        opacity:.35;

    }

}