.mod_article.intro-loading {
    position: relative;
    width: 100vw; height: 100dvh;

    padding: calc(var(--distance-std) * 0.5);
}

.mod_article.intro-loading .logo-before,
.mod_article.intro-loading .logo-after {
    position: absolute;
    inset: 0;

    display: flex;
    place-content: center;
    place-items: center;

    /*width: 100%;*/
    max-width: 100%;

    padding: 0;

    z-index: 2;
}

.mod_article.intro-loading .logo-before {
    background: var(--loading-bg-start, #000);

    z-index: 3;
}

.mod_article.intro-loading .logo-after {
    background: var(--loading-bg-end, #fff);
}

@keyframes loadingIntro {
    0% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    /*20% {*/
    /*    clip-path: polygon(25% 0, 100% 0, 100% 100%, 25% 100%);*/
    /*}*/
    /*30% {*/
    /*    clip-path: polygon(25% 0, 100% 0, 100% 100%, 25% 100%);*/
    /*}*/

    /*80% {*/
    /*    clip-path: polygon(80% 0, 100% 0, 100% 100%, 80% 100%);*/
    /*}*/
    /*90% {*/
    /*    clip-path: polygon(80% 0, 100% 0, 100% 100%, 80% 100%);*/
    /*}*/

    100% {
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    }
}

body.ready .mod_article.intro-loading .logo-before {
    /*animation: loadingIntro 5s ease-out;*/
    animation: loadingIntro 5s linear;
    animation-fill-mode: forwards;
}