@charset "UTF-8";

#loading{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    animation: loading-out 1s 1.3s forwards;
}
#loading::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: -1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 50% 100%, 50% 100%, 0 100%);
    animation: loading-clip 1.3s ease-in forwards;
}
.loading-tanker{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    z-index: 1;
    animation: loading-tanker 1.3s ease-in forwards;
}
@keyframes loading-clip{
    0%{
        clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 50% 100%, 50% 100%, 0 100%);
    }
    65%{
        clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 50% 50%, 45% 100%, 0 100%);
    }
    100%{
        clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 50% 0, 0 100%, 0 100%);
    }
}
@keyframes loading-tanker{
    0%{
        bottom: 0;
    }
    100%{
        bottom: 100%;
    }
}
@keyframes loading-out{
    0%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(-100%);
    }
}