body {
    background: #ddd;
}

.logo-box {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.circles-box {
    width: 150px;
    height: 150px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.lovo-circles {
    width: 30px;
    height: 30px;
    margin: 0 10px;
    filter: grayscale(80%);
    opacity: 0.5;

}

.circle1 {
    animation: color-to-gray 1.5s none 3 linear,
               fade-out-left 2s 4.5s forwards;
}

.circle2 {
    animation: color-to-gray 1.5s forwards 0.5s 3 linear,
               gray-to-color 1s 4.5s forwards,
               grow-circles 2s 4.5s forwards;
}

.circle3 {
    animation: color-to-gray 1.5s forwards 1s 3 linear,
               fade-out-right 2s 4.5s forwards;
}

.lovo-text {
    margin-top: 10px;
    font-family: 'Comfortaa', sans-serif;
    font-size: 24px;
    color: #666;
    opacity: 0;
    animation: 6s fade-in 4s forwards;
}

@keyframes grow-circles {
    from {
    }
    to {
    }
}
 
@keyframes grow-circles {
    from { width: 30px; height: 30px; }
    to { width: 150px; height: 150px; }
}

@keyframes color-to-gray {
    0% { filter: grayscale(0%); opacity: 1;}
    33% { filter: grayscale(80%); opacity: 0.5;}
}  

@keyframes gray-to-color {
    from { filter: grayscale(80%); opacity: 0.5;}
    to { filter: grayscale(0%); opacity: 1;}
}  

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}    

@keyframes fade-out-left {
    from { opacity: 1; }
    to { margin-left: -100px; opacity: 0; }
}    

@keyframes fade-out-right {
    from { opacity: 1; }
    to { margin-right: -100px; opacity: 0; }
}