/* loading animation */

@keyframes appear {
    0% {
        visibility: visible;
        display: block
    }
    99% {
        visibility: hidden;
        display: none
    }
}

.nojs {
    animation: 4.5s 1 reverse appear;
    animation-delay: 4.5s;
    animation-fill-mode: forwards;
    visibility: hidden;
    position: fixed
}

.credit {
    animation: 4.5s 1 reverse appear;
    animation-delay: 4.5s;
    animation-fill-mode: forwards;
    visibility: hidden;
    position: fixed
}

.skip-animation {
    animation: 4.5s 1 linear appear;
    visibility: hidden;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
}

.loading > p:first-child {
    animation: 0.9s 1 linear appear;
    animation-fill-mode: forwards;
    animation-delay: 0.3s;
    visibility: hidden;
    position: fixed
}

.loading > p:not(:first-child):not(:last-child) {
    animation: 0.9s 1 linear appear;
    animation-delay: 1.2s;
    animation-fill-mode: forwards;
    visibility: hidden;
    position: fixed
}

.loading > p:last-child {
    animation: 0.9s 1 linear appear;
    animation-delay: 2.1s;
    animation-fill-mode: forwards;
    visibility: hidden;
    position: fixed
}

@keyframes splash {
    0%, 100% {
        visibility: visible;
        color: var(--c-bg);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

.splash {
    animation-duration: 1.5s, 1.5s;
    animation-iteration-count: 1, 1;
    animation-timing-function: linear, linear;
    animation-name: appear, splash;
    animation-delay: 3s, 3s;
    visibility: hidden;
    position: fixed
}

@keyframes splash-bg {
    0%, 100% {
        background-color: var(--c-splash);
    }
}

html {
    animation: 1.5s 1 linear splash-bg;
    animation-delay: 3s
}

@keyframes splash-fg {
    0%, 100% {
        color: var(--c-bg);
    }
}

.skip-notice {
    animation-duration: 4.5s, 1.5s;
    animation-iteration-count: 1, 1;
    animation-timing-function: linear, linear;
    animation-name: appear, splash-fg;
    animation-delay: 0s, 3s;
    visibility: hidden;
}

@keyframes js {
    0%, 100% {
        visibility: hidden;
    }
}

.js {
    animation: 4.5s 1 linear js;
    position: fixed;
}