/*
    manrope: 300 regular, 700 bold, 800 extra bold
    lexend mega: 800 extra bold, 900 black

*/
* {
  box-sizing: border-box;
}
body {
    font-family: 'Manrope', sans-serif;
    font-weight: 300;
}
.landscape {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
    background-color: #fff;
    z-index: 9999;
}
h1,h2,h3,h4 {
    font-family: 'Lexend Mega', sans-serif;
}
@media (min-width: 1600px) {
    .uk-container {
        max-width: 1680px;
    }
}
.header {
    position: fixed;
    top: 0;
    width: 100dvw;
    opacity: 0;
    transform: translateY(-100%);
    transition: all 1.5s;
    transition-delay: 5s;
    z-index: 1;

    & .header-container {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    & svg {
        height: 40px;
        width: auto;
    }
    & .sublogo {
        color: #fff;
        font-family: 'Manrope', sans-serif;
        font-size: 16px;
        text-align: center;
        margin: 26px 0 0 0;
    }
    & a {
        color: #FCF7EE;
        text-decoration: underline;
        text-decoration-color: rgb(252, 247, 238, .4);
        transition: all .6s;
    }
    & a:hover {
        color: #E55934;
        text-decoration-color: #E55934;
        text-decoration-thickness: 2px;
    }
}

.form {
    position: absolute;

    width: 100dvw;
    height: auto;

    transform: translateX(-100%);
    transition: all .6s;

    &.black-form {
        background: rgb(38, 35, 34, .9);
    }
    &.red-form {
        background: rgb(229, 89, 52, .9);
    }
    
    @media (min-width: 1280px) {
        height: calc(100dvh - 140px);
        width: calc(100dvw / 2);  

        &.black-form {
            transform: translateX(-100%);
        }

        &.red-form {
            transform: translateX(200%);
        }


    }
    
}
.form-close {
    position: absolute;

    width: 100dvw;
    height: auto;

    margin-top: -30px;

    transform: translateX(100%);
    transition: all .6s;

    @media (min-width: 1280px) {
        margin-top: 0;
    }

    & a {
        display: block;
        margin-right: 15px;
        @media (min-width: 1280px) {
            margin-right: 5px;
        }
    }
}

.main-block {
    width: 100dvw;
    height: 100dvh;
    background: #262322;
    overflow: hidden;
    position: relative;

    & .pic-wrapper {
        display: block;
        width: inherit;
        height: inherit;
        overflow: hidden;
        transform: scale(.8);
        transition: all 1s;
        transition-delay: 1.6s;

        & img {
            width: inherit;
            height: inherit;
            object-fit: cover;
            transform: scale(1.6);
            transition: all 1s;
            transition-delay: 1.6s;
        }

    }

    & .nav-block {
        position: absolute;
        top: 25%;
        width: 100%;

        transition: all 1.5s;
        transition-delay: 5s;
        opacity: 0;

        & nav {
            margin-top: 15px;
        }

        & a {
            color: #FCF7EE;
            font-family: 'Manrope', sans-serif;
            font-size: 16px;
            text-decoration: underline;
            text-decoration-color: rgb(252, 247, 238, .4);
        }

    }

    & .header-block {

        position: absolute;
        top: 40%;
        width: 100%;
        padding: 0 3%;
        margin: 0;

        & h1 {
            color: #E55934;
            font-weight: 800;
            /*font-size: clamp(1.625rem, 1.5188rem + 0.4531vw, 2.0625rem);*/
            font-size: clamp(1.375rem, 1.2081rem + 0.712vw, 2.0625rem);
            text-transform: uppercase;
            line-height: 1.3;
            max-width: 1680px;
            margin: 0 auto;

            transform: scale(0.94);
            animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);
            animation-delay: 3s;

            & span {
                display: inline-block;
                opacity: 0;
                filter: blur(4px);
            }

            & span:nth-child(1) {
                animation: fade-in 0.8s 2.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
            }

            & span:nth-child(2) {
                animation: fade-in 0.8s 2.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
            }

            & span:nth-child(3) {
                animation: fade-in 0.8s 2.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
            }

            & span:nth-child(4) {
                animation: fade-in 0.8s 2.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
            }

            & span:nth-child(5) {
                animation: fade-in 0.8s 3s forwards cubic-bezier(0.11, 0, 0.5, 0);
            }

            & span:nth-child(6) {
                animation: fade-in 0.8s 3.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
            }

            & span:nth-child(7) {
                animation: fade-in 0.8s 3.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
            }

            & span:nth-child(8) {
                animation: fade-in 0.8s 3.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
            }

            & span:nth-child(9) {
                animation: fade-in 0.8s 3.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
            }

            & span:nth-child(10) {
                animation: fade-in 0.8s 3.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
            }

            & span:nth-child(11) {
                animation: fade-in 0.8s 3.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
            }

            & span:nth-child(12) {
                animation: fade-in 0.8s 3.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
            }
        }

        & .git {
            position: relative;
            margin: 30px auto 0;
            width: 190px;

            transition: all 1.5s;
            transition-delay: 5s;
            opacity: 0;

            & a {
                font-size: 12px;
                font-family: 'Lexend Mega', sans-serif;
                font-weight: 900;
                color: #FCF7EE;
                transition: all .6s;
            }
            & a:hover {
                border-color: #E55934;
                color: #E55934;
            }

        }

        @media(min-width:1280px) {
            & a {
                padding-top: 10px;
                padding-bottom: 10px;
            }
        }
    }

    & .text-block {
        position: absolute;
        bottom: 0;
        width: 100%;
        color: #FCF7EE;
        font-family: 'Manrope', sans-serif;
        font-size: 16px;
        padding: 0 20px 50px;
        text-align: center;
        text-wrap: balance;

        opacity: 0;
        transform: translateY(100%);
        transition: all 1.5s;
        transition-delay: 5s;

    }

    & .big-title {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        font-family: 'Manrope', sans-serif;
        font-weight: 800;
        font-size: 60px; 
        text-align: center;
        color: rgba(252,247,238,.2);
        letter-spacing: 1rem;
        line-height: 1;
        transform: translateY(100%);
        opacity: 0;
        transition: all 1.5s;
        transition-delay: 5s;
    }

    & .bottom-texts {
        position: absolute;
        bottom: 6%;
        left: 0;
        width: 100%;

        transform: translateY(100%);
        opacity: 0;
        transition: all 1.5s;
        transition-delay: 6s;

        & a {
            color: #FCF7EE;
            transition: all .6s;
        }
        & a:hover {
            text-decoration: none;
            color:#E55934;
        }

        & span {
            color: #FCF7EE;
            display: inline-block;
            width: 100%;
            max-width: 433px;
            text-align: right;
        }
    }

}
.page-load {
    & .header {
        transform: translateY(0);
        opacity: 1;
    }
}
.page-load {
    & .pic-wrapper {
        transform: scale(1);
        & img {
            transform: scale(1);
        }
    }
    & .nav-block {
        opacity: 1;
    }
    & .header-block {
        & .git {
            opacity: 1;
        }
    }
    & .text-block {
        transform: translateY(0);
        opacity: 1;
    }
    & .big-title {
        transform: translateY(0);
        opacity: 1;
    }
    & .bottom-texts {
        transform: translateY(0);
        opacity: 1;
    }
}

.page-forms {
    & .header {
        overflow-x: hidden;
        overflow-y: scroll;
        height: 100dvh;
    }
    & .form {
        position: relative;
        transform: translateX(0%);
        @media(min-width:1280px) {
            position: absolute;
            &.red-form {
                transform: translateX(100%);
            }
        }
    }
    & .form-close {
        position: relative;
        transform: translateX(0%);
    }
}

#modal-lff {
    & .uk-modal-dialog {
        backdrop-filter: blur(10px);
        background: transparent;
        & picture {
            @media (min-width: 1280px) {
                max-width: 70%;
            }
        }
    }

    & .uk-modal-close-full {
        color: #E55934;
        background: transparent;

        & svg {
            width: 30px;

            & line {
                stroke-width: 2;
            }
        }
    }
}

@media (min-width: 1280px) {
    .main-block .big-title {
        font-size: 155px;
        line-height: .8;
    }
    .main-block .bottom-texts {
        bottom: 3%;
    }
}
@media (min-width: 1440px) {
    .main-block .big-title {
        font-size: 175px;
    }
    .main-block .bottom-texts {
        bottom: 4%;
    }
}
@media (min-width: 1600px) {
    .main-block .big-title {
        font-size: 240px;
    }
    .main-block .bottom-texts {
        bottom: 6%;
    }
}

@media (max-height:500px) {
  .landscape {
    display: grid;
    place-items: center;
    & img {
        height: 250px;
    }
  }
}

@keyframes scale {
  100% {
    transform: scale(1);
  }
}
@keyframes fade-in {
  100% {
    opacity: 1;
    filter: blur(0);
  }
}