/* =========================================================
   SHADOWNET GRID STAGE // SVG CINEMATIC PASS
   ========================================================= */

.sn-grid-stage {
    position: fixed;
    inset: 0;
    z-index: 2147482600;
    overflow: hidden;
    background: #000;
    opacity: 0;
    transition: opacity 900ms ease;
    pointer-events: none;
}

.sn-grid-stage.is-visible { opacity: 1; }

.sn-grid-stage__world {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.sn-grid-stage__district--far {
    filter: blur(.5px);
    opacity: .58;
}

.sn-grid-stage__district--mid {
    opacity: .78;
}

.sn-grid-stage__district--core {
    opacity: .92;
}

.sn-grid-stage__architecture-lines {
    opacity: .42;
}

.sn-grid-stage__svg-horizon {
    opacity: .12;
    transition: opacity 4.2s ease;
}

.sn-grid-stage__core-light {
    opacity: 0;
    transition: opacity 900ms ease;
}

.sn-grid-stage__floor-svg {
    opacity: .42;
    transition: opacity 3.8s ease;
}

.sn-grid-stage__energy-road {
    opacity: .18;
    transition: opacity 2.8s ease;
}

.sn-grid-stage.is-awakening .sn-grid-stage__svg-horizon {
    opacity: 1;
}

.sn-grid-stage.is-awakening .sn-grid-stage__core-light {
    opacity: 1;
}

.sn-grid-stage.is-awakening .sn-grid-stage__floor-svg {
    opacity: .8;
}

.sn-grid-stage.is-awakening .sn-grid-stage__energy-road {
    opacity: .72;
}

.sn-grid-stage__lights {
    position: absolute;
    inset: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
}

.sn-grid-stage__vignette {
    position: absolute;
    inset: 0;
    z-index: 8;
    background:
        radial-gradient(
            ellipse at 50% 56%,
            transparent 0%,
            transparent 28%,
            rgba(0,0,0,.16) 50%,
            rgba(0,0,0,.68) 83%,
            #000 100%
        ),
        linear-gradient(
            90deg,
            #000 0%,
            rgba(0,0,0,.64) 10%,
            transparent 27%,
            transparent 73%,
            rgba(0,0,0,.64) 90%,
            #000 100%
        ),
        linear-gradient(
            0deg,
            rgba(0,0,0,.86) 0%,
            transparent 32%,
            transparent 100%
        );
}

@media (max-width: 800px) {
    .sn-grid-stage__world {
        width: 150%;
        left: -25%;
    }
}