.main-header {
    background: var(--black);
}


.main-header .banner>.bp-multimedia {
    width: 100%;
    height: 100%;
    opacity: .7;
}

.main-header .preloader {
    opacity: 0.99999999;
    pointer-events: none;
}

.main-header .preloader .full-logo {
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    position: absolute;
    z-index: 1;
}



.main-header .banner :is(.logo-wrapper, .content-wrapper) {
    position: absolute;
    inset: 0;
    height: var(--desktop-h);
}

:where(#wrapper) .main-header .preloader .logo-wrapper {
    inset: 0;
    mix-blend-mode: multiply;
}

@media only screen and (min-width : 0) and (max-width : 960px) {
    .main-header {
        height: 100svh;
    }

    .main-header .banner :is(.logo-wrapper, .content-wrapper) {
        height: 100svh;
    }
    .main-header .full-logo {
        width: min(18rem, 80vw);
    }

    .main-header .content-wrapper {
        padding-block: 13vh 2rem;
    }
}

@media only screen and (min-width : 961px) {
    .main-header .full-logo {
        width: 17.6rem;
    }

    .main-header .content-wrapper {
        padding-block: 5.7rem 2rem;
    }
    
    :where(#wrapper) .main-header .bp-icon {
        cursor: pointer;
        transition: all var(--anim-delay);
    }
    :where(#wrapper) .main-header .bp-icon:hover {
        transform: translateY(.5rem);
    }
    :where(#wrapper) .main-header .bp-icon svg {
        pointer-events: none;
    }
    }

/* Animation */

.main-header {
    --start-duration: 1;
    --mid-duration: 1.5;
    --end-duration: 1;
    --done-duration: 1;
}

:where(#wrapper) .main-header :is(.logo-animated, .content-wrapper, .content-wrapper),
:where(#wrapper) .main-header .preloader .full-logo {
    opacity: 0.000000001;
}

.main-header,
.main-header :is(.full-logo, .preloader, .logo-wrapper, .logo-animated) {
    transition: calc(var(--_duration, var(--start-duration)) * 1s);

}


.main-header[data-state="initial"] {
    transition-timing-function: ease-out;

    .full-logo {
        transform: translate(0, 70vh);
    }

}

.main-header[data-state="start"] {
    transition-timing-function: linear;
    --_duration: var(--start-duration);

    .preloader .full-logo {
        opacity: 1;
        transform: none;
    }

    .logo-animated {
        transform: scale(0.13) translate(0, -25vh);
    }
}

@media only screen and (min-width : 0) and (max-width : 960px) {
    .main-header[data-state="start"] {
        .logo-animated {
            transform: scale(0.1222) translate(0, -26.5vh);
        }
    }

}

.main-header[data-state="mid"] {
    --_duration: var(--mid-duration);

    .preloader .full-logo {
        opacity: 0;
        transform: scale(8) translate(0, 3.1vh);
    }

    .preloader .logo-animated {
        opacity: 1;
    }

    .banner .logo-animated {
        opacity: 0;
    }
}

@media only screen and (min-width : 0) and (max-width : 960px) {
    .main-header[data-state="mid"] {
        .preloader .full-logo {
            transform: scale(7.8) translate(0, 3.25vh);
        }
    }

}

.main-header[data-state="end"] {
    transition-timing-function: linear;
    --_duration: var(--end-duration);

    .banner .logo-animated {
        opacity: 1;
    }


    .preloader .logo-wrapper {
        opacity: 0;
    }
}

.main-header[data-state="done"] {
    transition-timing-function: ease-out;
    --_duration: var(--done-duration);

    .preloader .logo-wrapper {
        opacity: 0;
    }

    .banner .logo-animated {
        opacity: 0;
    }

    .content-wrapper {
        opacity: 1;
    }
}




/* @end */