.animation-container{position:fixed;inset:0;background-color:#12072b;color:#fff;z-index:50;display:flex;align-items:center;justify-content:center;min-height:100vh;opacity:1;transition:opacity 1s ease}.animation-container.fade-out{opacity:0;pointer-events:none}.animation-stage{position:relative;display:flex;align-items:center;justify-content:center;width:300px;height:230px}#music-bars-grid{display:flex;justify-content:center;align-items:center;height:230px;width:100%;max-width:400px;animation:slideLeft 1.5s ease forwards;z-index:2}#music-bars-grid span.line{background-color:#683de5;border-radius:3px;transform-origin:center center;will-change:transform,background-color;margin:0}.logo-img{position:absolute;height:64px;opacity:0;visibility:hidden;transform:translate(-50%,-50%) scale(.8);animation:logoAppear 0.8s ease forwards;animation-delay:1.2s;z-index:1}@keyframes slideLeft{0%,66%{transform:translateY(0)}100%{transform:translateY(-80px)}}@keyframes logoAppear{0%{opacity:0;visibility:visible;transform:translateY(0) scale(.8)}100%{opacity:1;visibility:visible;transform:translateY(120px) scale(1)}}@media (min-width:768px){.logo-img{top:50%;left:50%;transform:translate(calc(-30% + 60px),-50%) scale(.8)}@keyframes slideLeft{0%,66%{transform:translateX(0)}100%{transform:translateX(-170px)}}@keyframes logoAppear{0%{opacity:0;visibility:visible;transform:translate(calc(-30% + 60px),-50%) scale(.8)}100%{opacity:1;visibility:visible;transform:translate(calc(-30% + 120px),-50%) scale(1)}}}