.headertext {
    opacity: 0;
    visibility: hidden; 
    transition: opacity 1.8s cubic-bezier(0.5, 0, 0.75, 1);
}
.headertext h1 {
    transform: translateY(-100%);
    transition: transform 1s linear;
}
.headertext p {
    transform: translateY(200%);
    transition: transform 1s linear;
}
.top-show-h1p {
    opacity: 1; 
    visibility: visible;
}
.top-show-h1p h1 {
    transform: translateY(0);
}
.top-show-h1p p {
    transform: translateY(0);
}
/*второй блок--------------------------------*/
.h-box {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.8s cubic-bezier(0.5, 0, 0.75, 1);
}

.h-box h2 {
    transform: translateY(-100%);
    transition: transform 1s linear;
}

.h-box p {
    transform: translateY(200%);
    transition: transform 1s linear;
}

.h-box-show {
    opacity: 1;
    visibility: visible;
}
.h-box-show h2 {transform: translateY(0);}
.h-box-show p {transform: translateY(0);}
/*3тий блок--------------------------------*/
.container2 {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.8s cubic-bezier(0.5, 0, 0.75, 1);
}

.container2 h2 {
    transform: translateY(-100%);
    transition: transform 1s linear;
}

.container2 ul {
    transform: translateY(200%);
    transition: transform 1s linear;
}

.container2-show {
    opacity: 1;
    visibility: visible;
}
.container2-show h2 {transform: translateY(0);}
.container2-show ul {transform: translateY(0);}
/*4тий блок--------------------------------*/
.text-separator {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.8s cubic-bezier(0.5, 0, 0.75, 1);
}
.text-separator-show {
    opacity: 1;
    visibility: visible;
}
/*5тий блок--------------------------------*/
.text-connect {
    opacity: 0;
    visibility: hidden;
    transition: opacity 2.8s cubic-bezier(0.5, 0, 0.75, 1);
}

.text-connect h2 {
    transform: translateY(-100%);
    transition: transform 1s linear;
}

.text-connect .joinbtn {
    transform: translateY(200%);
    transition: transform 1s linear;
}

.text-connect-show {
    opacity: 1;
    visibility: visible;
}
.text-connect-show .joinbtn {transform: translateY(-70%) translateX(-70%);}

.text-connect-show h2 {transform: translateY(0);}
.text-connect-show ul {transform: translateY(0);}
/*6тий блок--------------------------------*/
.welcome-message p {
    opacity: 0;
    visibility: hidden;
font-size: 0;
width:0;
    transition: all 1s cubic-bezier(0.5, 0, 0.75, 1);
}
.welcome-message-show p {
    opacity: 1;
    visibility: visible;
font-size: 32px;
width:100%;
}
/*7мой блок--------------------------------*/
.final-separator {
  width: .1%;
transition: all .8s cubic-bezier(0.5, 0, 0.75, 1);
}
.final-separator-show {
  width: 100%;
}
/*8мой блок--------------------------------*/
.streamers-wrapper {
    opacity: 0;
    visibility: hidden;
    transition: opacity 2.8s cubic-bezier(0.5, 0, 0.75, 1);
}

.streamers-wrapper h2 {
    transform: translateY(-100%);
    transition: transform 1s linear;
}

.streamers-wrapper .streamers-container {
    transform: translateY(200%);
    transition: transform 1s linear;
}

.streamers-wrapper-show {
    opacity: 1;
    visibility: visible;
}
.streamers-wrapper-show h2 {transform: translateY(0);}
.streamers-wrapper-show .streamers-container {transform: translateY(0);}
/*9тый блок--------------------------------*/
.join-dev-block h2, .join-dev-block p, .join-dev-block .button-wrapper {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.8s cubic-bezier(0.5, 0, 0.75, 1);
}

.join-dev-block h2 {
    transform: translateY(-100%);
    transition: transform 1s linear;
}

.join-dev-block p {
    transform: translateY(200%);
    transition: transform 1s linear;
}
.join-dev-block .button-wrapper {
transition: all 1s linear;
transform: scale(2);
}

.join-dev-block-show h2, .join-dev-block-show p, .join-dev-block-show .button-wrapper {
    opacity: 1;
    visibility: visible;
}
.join-dev-block-show h2 {transform: translateY(0);}
.join-dev-block-show p {transform: translateY(0);}
.join-dev-block-show .button-wrapper { transform: scale(1);}

/* оптимизация футера */
.headertext,
.h-box,
.container2,
.text-separator,
.text-connect,
.welcome-message,
.final-separator,
.streamers-wrapper,
.join-dev-block {
    will-change: opacity, transform;
}
.back-to-top {font-family: 'Cormorant Garamond', serif;}
.back-to-top:hover {text-decoration: none !important;}