/* Keep the page visible unless the browser can play the whole opening sequence. */
@media screen and (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    .st-Loading[hidden] {
        position: fixed;
        inset: 0;
        z-index: 100;
        display: grid;
        place-items: center;
        pointer-events: none;
        animation: loading-finish 4.5s step-end forwards;
    }

    .loading-Title {
        position: relative;
        z-index: 1;
        display: grid;
        place-items: center;
        width: 100%;
        height: 420px;
        background: url("../images/common/bg_loading_title.png") center / contain no-repeat;
        opacity: 0;
        animation: loading-show 1.5s ease-out 0.5s forwards,
                   loading-hide 1.5s ease-out 3s forwards;
    }

    .loading-Title img {
        max-width: 100%;
        height: auto;
    }

    .loading-Curtain {
        position: absolute;
        inset: auto 0 0;
        height: 120%;
        --pattern-width: 282px;
        --pattern-height: 2022px;
        background: url("../images/common/bg_loading_pattern.png") center bottom / var(--pattern-width) repeat-x;
        animation: loading-lift 1.5s cubic-bezier(.6, -.28, .735, .045) 2.5s forwards;
    }

    .loading-Curtain::before {
        content: "";
        position: absolute;
        inset: 0 0 var(--pattern-height);
        background: url("../images/common/bg_pattern_displacement.png") center top / var(--pattern-width) repeat;
    }

    .st-Content {
        animation: loading-show 1s ease-out 3.5s backwards;
    }

    @media (max-width: 1024px) {
        .loading-Title { height: 50.1302083333vw; }
        .loading-Curtain {
            --pattern-width: 34.1145833333vw;
            --pattern-height: 263.28125vw;
        }
    }
}

@keyframes loading-show {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes loading-hide {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes loading-lift {
    to { transform: translateY(-100%); }
}

@keyframes loading-finish {
    from { visibility: visible; }
    to { visibility: hidden; }
}

@media screen and (prefers-reduced-motion: no-preference) {
    [data-swarm-wait]:not(:focus-within) { opacity: 0 !important; }
    [data-swarm-draw]:not(:focus-within) {
        clip-path: var(--swarm-clip);
        translate: var(--swarm-x, 0) var(--swarm-y, 0);
        scale: var(--swarm-scale, 1);
        transform-origin: top left;
    }
}

.swarm-overlay {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 10000;
    pointer-events: none;
}