.all{
    position: fixed;
    width: 100vw;
    height: 100%;
    z-index: 1000000000;
    animation: allclose 7s;
    animation-fill-mode: forwards;
}

@keyframes allclose{
    0%{
        height: 100vh;
        height: 100svh;
    }
    99%{
        height: 100vh;
        height: 100svh;
    }
    100%{
        height: 0;
    }
}

.nozzlebox-logoicon{
    width: 100%;
    height: 30%;
    top: 60%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: end;
}
.logoicon{
    width: 80vw;
    position: absolute;
    display: flex;
    animation: logoanimation 4.5s;
    animation-fill-mode: forwards;
    animation-delay: 1s;
}
@keyframes logoanimation{
    0%{
        transform: translateY(0);
    }
    66%{
        transform: translateY(0);
    }
    85%{
        transform: translateY(calc(-40vh + (80vw / 8)));
        transform: translateY(calc(-40svh + (80vw / 8)));
    }
    100%{
        transform: translateY(-500vh);
        transform: translateY(-500svh);
    }
}
.nozzlebox{
    height: calc(80vw / 4);
    position: absolute;
    z-index: 2;
    animation: z-axes 4.5s;
    animation-fill-mode: forwards;
    animation-delay: 1s;
}
.nozzle{
    height: 100%;
    animation: xy-axes 4.5s;
    animation-fill-mode: forwards;
    animation-delay: 1s;
    transform: translateX(-30vw);
}
.white{
    background: linear-gradient(to bottom,#fff, #fff 20%, #c6c6c4 20%, #c6c6c4 40%,#fff 40%, #fff 60%, #c6c6c4 60%, #c6c6c4 80%,#fff 80%);
    width: 300vw;
    height: calc(80vw / 4);
    z-index: 1;
    animation: z-axes 4.5s;
    animation-fill-mode: forwards;
    animation-delay: 1s;
}
@keyframes z-axes{
    0%{
        transform: translateY(0);
    }
    66%{
        transform: translateY(calc(-80vw / 4));
    }
    85%{
        transform: translateY(-100vh);
        transform: translateY(-100svh);
    }
    100%{
        transform: translateY(-100vh);
        transform: translateY(-100svh);
    }
}
@keyframes xy-axes{
    0%{
        transform: translateX(-30vw);
    }
    10%{
        transform: translateX(30vw);
    }
    20%{
        transform: translateX(-30vw);
    }
    30%{
        transform: translateX(30vw);
    }
    40%{
        transform: translateX(-30vw);
    }
    50%{
        transform: translateX(30vw);
    }
    66%{
        transform: translateX(-30vw);
    }
    100%{
        transform: translateX(-10vw);
    }
}

.stage{
    position: fixed;
    width: 100vw;
    bottom: 0;
    height: 10%;
    background-color: silver;
    animation: stage-z-axis 4.5s;
    animation-fill-mode: forwards;
    animation-delay: 1s;
}
@keyframes stage-z-axis{
    0%{
        transform: translateY(0);
    }
    66%{
        transform: translateY(0);
    }
    85%{
        transform: translateY(10vh);
        transform: translateY(10svh);
    }
    100%{
        transform: translateY(100vh);
        transform: translateY(100svh);
    }
}
.all-whiters{
    position: absolute;
    display: flex;
    top: 0;
    margin: 0;
    padding: 0;
    z-index: -10;
}
.white1{
    background-color: white;
    height: 100vh;
    height: 100svh;
    animation-name: animation-after;
    animation-duration: 5s;
    animation-delay: 2.0s;
    animation-fill-mode: forwards;
    transition-timing-function: linear;
}
.white2{
    background-color: white;
    height: 100vh;
    height: 100svh;
    animation-name: animation-after;
    animation-duration: 5s;
    animation-delay:1.9s;
    animation-fill-mode: forwards;
    transition-timing-function: linear;
}
.white3{
    background-color: white;
    height: 100vh;
    height: 100svh;
    animation-name: animation-after;
    animation-duration: 5s;
    animation-delay: 1.8s;
    animation-fill-mode: forwards;
    transition-timing-function: linear;
}
.white1, .white2, .white3{
    width: calc(100vw / 3.00001);
}
@keyframes animation-after{

    0%{
        transform: translateY(0%);
    }
    89%{
        transform: translateY(0%);
    }
    99%{
        transform: translateY(-1000px);
        height: 100vh;
        height: 100svh;
    }
    100%{
        transform: translateY(-1000px);
        height: 0;
    }
}

body{
    animation: lockscreen 7s;
    animation-fill-mode: forwards;
}
@keyframes lockscreen{
    0%{
        overflow-y: hidden;
    }
    99%{
        overflow-y: hidden;
    }
    100%{
        overflow-y: scroll;
    }
}