.loader-container {
    position: relative;
    height: 100vh;
    width: 100vw;
}

.loader-logo {
    position: absolute;
    width: 350px;
    height: 38px;
    padding: 10px;
    top: calc(50% - 24px);
    left: calc(50% - 180px);
    overflow: hidden;
}

.dark .loader-logo {
    color: #fff;
}

.light .loader-logo,
.light .orchestrator-text-color {
    color: #212121;
}

.loader-mask {
    background: #f0f5f8;
}

.dark .loader-mask {
    background: #1e2022;
}
.loader-mask,
.loader-logo-wrap,
#orchestrator-logo-text,
#orchestrator-logo-ui {
    position: absolute;
}

.loader-mask {
    top: 0;
    left: 0;
    width: 185px;
    height: 50px;

    animation: orch-mask-slide-in 1.3s ease-in-out;
    animation-fill-mode: forwards;
}

#orchestrator-logo-text {
    left: 56px;
    top: 10px;
    animation: orch-text-slide-in 1.3s ease-in-out;
}

#orchestrator-logo-ui {
    animation: orch-ui-slide-in 1.3s ease-in-out;
    animation-fill-mode: forwards;
}

.loader-logo-wrap {
    left: 8px;
    width: 37px;
    height: 37px;
    transform: scale(1.2);
    animation: heartbeat ease-in-out 2.5s 1.3s infinite;
}

@keyframes orch-mask-slide-in {
    0% {
        transform: translate(0);
    }

    30% {
        transform: translate(0);
    }

    85% {
        transform: translate(-158px);
    }

    100% {
        transform: translate(-158px);
    }
}

@keyframes orch-ui-slide-in {
    0% {
        transform: translate(134px);
    }

    30% {
        transform: translate(134px);
    }

    85% {
        transform: translate(0);
    }

    100% {
        transform: translate(0);
    }
}

@keyframes orch-text-slide-in {
    0% {
        transform: translate(-170px);
    }

    30% {
        transform: translate(-170px);
    }

    85% {
        transform: translate(0);
    }

    100% {
        transform: translate(0);
    }
}

@keyframes heartbeat {
    0% {
        transform: scale(1.2);
    }

    20% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.2);
    }

    60% {
        transform: scale(1);
    }

    80% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.2);
    }
}