.logo{
    transition: 500ms;
    cursor: pointer;
}
.logo *{fill: #367}
.logo:hover *{
    animation: blink2 1s linear 5s infinite alternate-reverse;
}
@keyframes blink2{
    from{fill: #999}
    to{fill: #367}  
}
.logo:active{
    scale: .8;
}
.bracket{transition-duration: 900ms;}
.logo:hover .bracket{
    transform: translateX(977px);
}
.logo:hover .logo-blink{
    animation: blink 200ms 200ms steps(2) 15 alternate-reverse,
    slide 1100ms 1300ms 1 forwards;
}
@keyframes blink{
    from{opacity: 0;}
    to{opacity: 1;}  
}
@keyframes slide{
    0%{transform: translateX(0);}
    24.9%{transform: translateX(0);}
    25%{transform: translateX(200px);}
    49.9%{transform: translateX(200px);}
    50%{transform: translateX(460px);}
    74.9%{transform: translateX(460px);}
    75%{transform: translateX(719px);}
    99.9%{transform: translateX(719px);}
    100%{transform: translateX(979px);}
}
.logo-ltr{
    opacity: 0;
}
.logo:hover .logo-ltr{
    transition-duration: 500ms;
}
.logo:hover .logo-l{
    transition-delay: 1600ms;
    opacity: 1;
}
.logo:hover .logo-a2{
    transition-delay: 1900ms;
    opacity: 1;
}
.logo:hover .logo-n{
    transition-delay: 2100ms;
    opacity: 1;
}
.logo:hover .logo-a3{
    transition-delay: 2400ms;
    opacity: 1;
}