/* cover modal */
.cover {
    position: fixed;
    top: 0px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    background: #131313;

    &.hidden,
    &.uncover {
        animation: uncover 0.7s forwards;
    }
}

@keyframes uncover {
    0% {
        opacity: 1;
        transform: scale(1);
        display: block;
    }

    99% {
        opacity: 0;
        transform: scale(1);
        display: block;
    }

    100% {
        opacity: 0;
        transform: scale(0);
        display: none;
    }
}

.logo-container {
    width: max(20vw, 20vh);
    transform: translateX(-50%);
    position: absolute;
    bottom: 50%;
    left: 50%;

    & img {
        width: 100%;
        height: 100%;
    }

    &::before {
        content: "loading...";
        font-size: xx-small;
        color: ivory;
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 1;
    }

    &::after {
        content: "";
        width: 120%;
        height: 110%;
        position: absolute;
        top: -5%;
        left: -10%;
        z-index: 2;
        background: linear-gradient(45deg,
                transparent,
                transparent 26%,
                #fff 33%,
                transparent 40%,
                #fff 50%,
                transparent 60%) no-repeat;
        background-size: 200% 100%;
        animation: shine 2s infinite;
        border-radius: 4px;
    }
}

@keyframes shine {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

#cover-content-container {
    width: max(20vw, 20vh);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 21;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;

    & .logo-container {
        width: 100%;
        position: relative;
        transform: translateX(0);
        bottom: auto;
        left: auto;
    }

    & .loading-container {
        width: 120%;
        height: 2px;
        outline: 1px solid gray;

        & #loading-bar {
            width: 100%;
            height: 100%;
            background: #0909c0;
            transition: all 0.3s ease-in-out;
            transform: scaleX(0);
            transform-origin: center left;
            box-shadow: inset 0 0 4px #f5f5f5, inset 1px 0 2px #26008f, inset -1px 0 2px #55c8f8, 1px 0 8px #26008f, 1px 0 8px #55c8f8, 0 0 10px #fff, -1px 0 4px #26008f, 1px 0 4px #55c8f8;
        }
    }
}