.loader__outer-wrapper {
    width: 100%;
    height: 100%;

    position: fixed;

    top: 0;
    left: 0;

    z-index: 5;

    overflow: hidden;

    pointer-events: none;
}

.loader__outer-wrapper._active {
    pointer-events: unset;
}

.loader__inner-wrapper {
    width: 100%;
    height: 100%;

    background-color: #43372e;

    display: flex;
    align-items: center;
    justify-content: center;

    transform: translateY(100%);
    -webkit-transform: translateY(100%);

    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    -webkit-transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.loader__outer-wrapper._active > .loader__inner-wrapper {
    transform: translateY(0%);
    -webkit-transform: translateY(0%);
}

.loader {
    width: 48px;
    height: 48px;

    border: 8px solid;
    border-color: rgba(254, 237, 224, 0.4) rgba(254, 237, 224, 0.6) rgba(254, 237, 224, 0.8) rgba(254, 237, 224, 1);
    border-radius: 50%;

    box-sizing: border-box;

    display: inline-block;

    position: relative;

    animation: spinner 1.2s linear infinite;

    transition: 0.2s;
    -webkit-transition: 0.2s;
}