/* =========================================================
   SHADOWNET // GRID INTERFACE v2
   ========================================================= */


/* =========================================================
   MASTER OVERLAY
   ========================================================= */

.sn-grid-overlay {
    position: fixed;
    inset: 0;

    z-index: 999999;

    width: 100vw;
    height: 100vh;

    overflow: hidden;

    font-family:
        "Courier New",
        Courier,
        monospace;

    user-select: none;

    isolation: isolate;

    pointer-events: auto;
}


.sn-grid-canvas {
    position: absolute;
    inset: 0;

    z-index: 2;

    width: 100%;
    height: 100%;

    display: block;

    pointer-events: none;
}


/* =========================================================
   APERTURE MODE

   IMPORTANT:
   SHADOWNET REMAINS VISIBLE BEHIND THE DIALOG
   ========================================================= */

.sn-grid-aperture-mode {
    background:
        rgba(
            19,
            115,
            145,
            0.12
        );

    backdrop-filter:
        saturate(0.75)
        sepia(0.08)
        hue-rotate(145deg)
        brightness(1.13)
        contrast(1.08);

    -webkit-backdrop-filter:
        saturate(0.75)
        sepia(0.08)
        hue-rotate(145deg)
        brightness(1.13)
        contrast(1.08);

    transition:
        background 400ms ease;
}


/* scan lines */

.sn-grid-aperture-mode::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 3;

    pointer-events: none;

    opacity: 0.14;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(
                210,
                249,
                255,
                0.13
            )
            0,
            rgba(
                210,
                249,
                255,
                0.13
            )
            1px,
            transparent
            1px,
            transparent
            4px
        );
}


/* =========================================================
   APERTURE DIALOG

   Intentionally more like an old system dialog than
   the normal SHADOWNET interface.
   ========================================================= */

.sn-grid-aperture {
    position: absolute;

    left: 50%;
    top: 54%;

    z-index: 20;

    width: 420px;
    max-width:
        calc(
            100vw - 50px
        );

    padding:
        18px
        24px
        20px;

    box-sizing:
        border-box;

    opacity: 0;

    transform:
        translate(
            -50%,
            -50%
        )
        scale(0.97);

    color:
        #34321f;

    background:
        linear-gradient(
            180deg,
            #f1edba 0%,
            #ddd89b 100%
        );

    border:
        4px solid
        #d8e7d8;

    outline:
        2px solid
        rgba(
            65,
            90,
            90,
            0.8
        );

    box-shadow:
        0 0 0 1px
        rgba(
            255,
            255,
            255,
            0.7
        ),

        0 7px 22px
        rgba(
            0,
            0,
            0,
            0.48
        ),

        inset 0 0 18px
        rgba(
            255,
            255,
            215,
            0.55
        );

    transition:
        opacity 180ms ease,
        transform 180ms ease;
}


.sn-grid-aperture.is-visible {
    opacity: 1;

    transform:
        translate(
            -50%,
            -50%
        )
        scale(1);
}


/* =========================================================
   APERTURE TITLE
   ========================================================= */

.sn-grid-aperture-title {
    padding:
        5px
        0
        16px;

    text-align: center;

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size: 25px;
    font-weight: 700;

    letter-spacing:
        0.035em;

    color:
        #353321;

    text-shadow:
        1px 1px 0
        rgba(
            255,
            255,
            255,
            0.42
        );
}


/* =========================================================
   APERTURE OPTIONS
   ========================================================= */

.sn-grid-aperture-options {
    display: flex;

    align-items: center;
    justify-content: space-around;

    gap: 34px;
}


.sn-grid-choice {
    appearance: none;
    -webkit-appearance: none;

    border: 0;

    padding:
        6px
        14px;

    background:
        transparent;

    color:
        #4c4a2c;

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size: 21px;
    font-weight: 700;

    letter-spacing:
        0.04em;

    cursor: pointer;

    text-transform:
        uppercase;
}


.sn-grid-choice:hover,
.sn-grid-choice:focus {
    outline: none;

    color:
        #eefcff;

    background:
        #72bcd4;

    text-shadow:
        0 0 3px
        rgba(
            255,
            255,
            255,
            0.8
        );
}


.sn-grid-choice-yes {
    color:
        #f4ffff;

    background:
        #76bfd6;

    box-shadow:
        inset 0 0 0 1px
        rgba(
            255,
            255,
            255,
            0.55
        );
}


/* =========================================================
   ACCEPT / REJECT
   ========================================================= */

.sn-grid-aperture.is-accepted {
    filter:
        brightness(1.25);

    box-shadow:
        0 0 24px
        rgba(
            144,
            231,
            255,
            0.7
        ),

        0 0 80px
        rgba(
            71,
            196,
            235,
            0.28
        );
}


.sn-grid-aperture.is-rejected {
    opacity: 0;

    transform:
        translate(
            -50%,
            -50%
        )
        scale(0.9);

    transition:
        opacity 350ms ease,
        transform 350ms ease;
}


/* =========================================================
   DIGITIZATION
   ========================================================= */

.sn-grid-digitizing {
    background:
        rgba(
            13,
            100,
            137,
            0.17
        );

    backdrop-filter:
        saturate(0.55)
        hue-rotate(150deg)
        brightness(1.32)
        contrast(1.15);

    -webkit-backdrop-filter:
        saturate(0.55)
        hue-rotate(150deg)
        brightness(1.32)
        contrast(1.15);
}


.sn-grid-digitizing::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        radial-gradient(
            circle
            at 50% 48%,

            rgba(
                190,
                244,
                255,
                0.24
            )
            0%,

            rgba(
                84,
                202,
                238,
                0.11
            )
            30%,

            transparent
            68%
        );

    animation:
        sn-grid-conversion-pulse
        1100ms
        ease-out
        forwards;
}


@keyframes
sn-grid-conversion-pulse {

    0% {
        opacity: 0;
    }

    18% {
        opacity: 1;
    }

    100% {
        opacity: 0.25;
    }

}


.sn-grid-aperture.is-digitizing {
    animation:
        sn-grid-dialog-dissolve
        520ms
        ease-in
        forwards;
}


@keyframes
sn-grid-dialog-dissolve {

    0% {
        opacity: 1;

        filter:
            brightness(1.2);
    }

    35% {
        opacity: 1;

        filter:
            brightness(2);
    }

    100% {
        opacity: 0;

        filter:
            brightness(3)
            blur(3px);

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1.08);
    }

}


/* =========================================================
   BLACKOUT
   ========================================================= */

.sn-grid-blackout {
    background:
        #000;
}


/* =========================================================
   GRID WORLD
   ========================================================= */

.sn-grid-world {
    background:
        #010609;
}


/* CRT scan texture */

.sn-grid-world::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 4;

    pointer-events: none;

    opacity: 0.08;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(
                255,
                255,
                255,
                0.035
            )
            0,
            rgba(
                255,
                255,
                255,
                0.035
            )
            1px,
            transparent
            1px,
            transparent
            4px
        );
}


/* vignette */

.sn-grid-world::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 5;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse
            at center,

            transparent
            38%,

            rgba(
                0,
                0,
                0,
                0.16
            )
            65%,

            rgba(
                0,
                0,
                0,
                0.64
            )
            100%
        );
}


/* =========================================================
   CONNECTION MESSAGE
   ========================================================= */

.sn-grid-message {
    position: absolute;

    left: 50%;
    top: 29%;

    z-index: 20;

    opacity: 0;

    transform:
        translate(
            -50%,
            7px
        );

    white-space: nowrap;

    color:
        #c6f5ff;

    font-size:
        17px;

    font-weight:
        700;

    letter-spacing:
        0.24em;

    text-shadow:
        0 0 7px
        #50ddff,

        0 0 24px
        rgba(
            50,
            211,
            255,
            0.55
        );

    transition:
        opacity 280ms ease,
        transform 280ms ease;
}


.sn-grid-message.is-visible {
    opacity: 1;

    transform:
        translate(
            -50%,
            0
        );
}


/* =========================================================
   FINISH
   ========================================================= */

.sn-grid-finish {
    opacity: 0;

    transition:
        opacity 500ms ease;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media
(max-width: 700px) {

    .sn-grid-aperture {
        width:
            calc(
                100vw - 36px
            );

        top: 50%;

        padding:
            16px
            16px
            18px;
    }


    .sn-grid-aperture-title {
        font-size:
            20px;
    }


    .sn-grid-choice {
        font-size:
            17px;
    }


    .sn-grid-message {
        width:
            calc(
                100vw - 40px
            );

        white-space:
            normal;

        text-align:
            center;

        font-size:
            13px;

        line-height:
            1.5;
    }

}