/* =========================================================
   WRATH64 STUDIOS
   GLOBAL ACCESS CONTROL
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

.wrath64-access-gate {

    position:
        fixed;

    inset:
        0;

    z-index:
        300000;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        24px;

    box-sizing:
        border-box;

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

    color:
        #d9ffe7;

}

/* =========================================================
   REAL HIDDEN STATE
   ========================================================= */

.wrath64-access-gate[hidden] {

    display:
        none !important;

}



/* =========================================================
   BACKDROP
   ========================================================= */

.access-gate-backdrop {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(0, 0, 0, 0.95);

    backdrop-filter:
        blur(3px);

    -webkit-backdrop-filter:
        blur(3px);

}



/* =========================================================
   WINDOW
   ========================================================= */

.access-gate-window {

    position:
        relative;

    z-index:
        10;

    display:
        flex;

    flex-direction:
        column;

    width:
        min(980px, 96vw);

    max-height:
        min(92vh, 880px);

    overflow:
        hidden;

    background:
        #080a09;

    border-top:
        1px solid #c7c7c7;

    border-left:
        1px solid #c7c7c7;

    border-right:
        2px solid #262626;

    border-bottom:
        2px solid #262626;

    box-shadow:
        5px 6px 0 #000,
        0 0 0 1px #080808,
        0 0 42px rgba(0,0,0,.98);

    outline:
        none;

    animation:
        access-gate-window-in
        180ms
        steps(3,end);

}


@keyframes access-gate-window-in {

    0% {

        opacity:
            0;

        transform:
            translate(-4px,3px)
            scale(.996);

    }

    45% {

        opacity:
            1;

        transform:
            translate(3px,-2px);

    }

    100% {

        opacity:
            1;

        transform:
            none;

    }

}



/* =========================================================
   TITLEBAR
   ========================================================= */

.access-gate-titlebar {

    flex:
        0 0 auto;

    min-height:
        31px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        5px 8px;

    background:
        #111411;

    border-bottom:
        1px solid #515853;

    color:
        #effff3;

    font-size:
        10px;

    user-select:
        none;

}


.access-gate-titlebar-left,
.access-gate-titlebar-status {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

}


.access-gate-titlebar-status {

    color:
        #9fb2a5;

    font-size:
        9px;

}



/* =========================================================
   LIGHTS
   ========================================================= */

.access-gate-titlebar-led,
.access-gate-titlebar-lock-led,
.access-gate-warning-led,
.access-gate-button-led,
.access-gate-network-led,
.access-gate-node-led,
.access-gate-attention-notice-led {

    width:
        6px;

    height:
        6px;

    display:
        inline-block;

    flex:
        0 0 auto;

    background:
        #00ff66;

    box-shadow:
        0 0 3px #00ff66,
        0 0 7px rgba(0,255,102,.65);

}


.access-gate-titlebar-led {

    animation:
        access-gate-basic-led
        1.8s
        steps(1,end)
        infinite;

}


.access-gate-titlebar-lock-led {

    animation:
        access-gate-basic-led
        1.3s
        steps(1,end)
        infinite;

}


@keyframes access-gate-basic-led {

    0%,
    84%,
    100% {

        opacity:
            1;

    }

    85%,
    92% {

        opacity:
            .22;

    }

}



/* =========================================================
   PANELS
   ========================================================= */

.access-gate-panel {

    position:
        relative;

    flex:
        1 1 auto;

    min-height:
        0;

}


.access-gate-panel[hidden] {

    display:
        none !important;

}



/* =========================================================
   FIRST ATTENTION SCREEN
   ========================================================= */

.access-gate-attention-panel {

    min-height:
        460px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        42px;

    background:
        #080a09;

}


.access-gate-attention-content {

    width:
        min(100%, 600px);

    text-align:
        center;

}


.access-gate-attention-symbol {

    width:
        62px;

    height:
        62px;

    margin:
        0 auto 20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid #4d5951;

    background:
        #101410;

    color:
        #00ff66;

    font-size:
        38px;

    font-weight:
        bold;

    text-shadow:
        0 0 7px #00ff66,
        0 0 18px rgba(0,255,102,.35);

}


.access-gate-system-label {

    color:
        #819087;

    font-size:
        9px;

    letter-spacing:
        .10em;

}


.access-gate-attention-title {

    margin:
        12px 0 21px;

    color:
        #f5fff7;

    font-size:
        clamp(34px,6vw,58px);

    line-height:
        1;

    font-weight:
        500;

    letter-spacing:
        .08em;

    text-shadow:
        0 0 3px rgba(255,255,255,.55),
        0 0 9px rgba(0,255,102,.32);

}


.access-gate-attention-message {

    margin:
        0 auto 13px;

    max-width:
        530px;

    color:
        #d8e4dc;

    font-size:
        13px;

    line-height:
        1.65;

}


.access-gate-attention-secondary {

    margin:
        0 auto 24px;

    max-width:
        530px;

    color:
        #8f9c94;

    font-size:
        11px;

    line-height:
        1.7;

}


.access-gate-attention-notice {

    width:
        fit-content;

    max-width:
        100%;

    margin:
        0 auto 27px;

    padding:
        8px 11px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    background:
        #0c0f0d;

    border:
        1px solid #303832;

    color:
        #a5b2a9;

    font-size:
        9px;

}



/* =========================================================
   MAIN AGE PANEL
   ========================================================= */

.access-gate-main-panel {

    display:
        grid;

    grid-template-columns:
        minmax(260px,320px)
        minmax(0,1fr);

    overflow:
        auto;

    background:
        #0a0c0b;

}



/* =========================================================
   CHARACTER
   ========================================================= */

.access-gate-character-column {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        520px;

    padding:
        24px;

    background:
        #050605;

    border-right:
        1px solid #323733;

}


.access-gate-character-frame {

    position:
        relative;

    width:
        min(100%,285px);

    aspect-ratio:
        1 / 1;

    overflow:
        hidden;

    background:
        #000;

    border:
        1px solid #3a403c;

}


.access-gate-character {

    position:
        relative;

    z-index:
        1;

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    background:
        #000;

    image-rendering:
        pixelated;

    filter:
        grayscale(1)
        contrast(1.15)
        brightness(.95);

    user-select:
        none;

    -webkit-user-drag:
        none;

    animation:
        access-gate-character-idle-glitch
        8.2s
        steps(1, end)
        infinite;

}


/* =========================================================
   CHARACTER IDLE GLITCH
   Rare, brief distortion while the age panel is visible.
   ========================================================= */

@keyframes access-gate-character-idle-glitch {

    0%,
    86%,
    90%,
    93%,
    96%,
    100% {

        transform:
            none;

        filter:
            grayscale(1)
            contrast(1.15)
            brightness(.95);

        clip-path:
            inset(0 0 0 0);

    }

    87% {

        transform:
            translateX(-3px)
            skewX(-1deg);

        filter:
            grayscale(1)
            contrast(1.8)
            brightness(1.30);

        clip-path:
            inset(7% 0 62% 0);

    }

    88% {

        transform:
            translateX(4px);

        filter:
            grayscale(1)
            contrast(2.1)
            brightness(.75);

        clip-path:
            inset(46% 0 18% 0);

    }

    89% {

        transform:
            translateX(-1px);

        filter:
            grayscale(1)
            contrast(1.45)
            brightness(1.15);

        clip-path:
            inset(21% 0 51% 0);

    }

    94% {

        transform:
            translateX(2px);

        filter:
            grayscale(1)
            contrast(1.55)
            brightness(1.08);

        clip-path:
            inset(0 0 0 0);

    }

    95% {

        transform:
            translateX(-1px);

        filter:
            grayscale(1)
            contrast(1.25)
            brightness(.90);

    }

}


.access-gate-character-scanlines {

    position:
        absolute;

    z-index:
        4;

    inset:
        0;

    pointer-events:
        none;

    background:

        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,.025) 0,
            rgba(255,255,255,.025) 1px,
            rgba(0,0,0,.12) 2px,
            rgba(0,0,0,.12) 4px
        );

}


.access-gate-character-noise {

    position:
        absolute;

    z-index:
        5;

    inset:
        0;

    opacity:
        0;

    pointer-events:
        none;

    background:

        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 2px,
            rgba(255,255,255,.08) 3px,
            transparent 4px
        );

}



/* =========================================================
   HORROR HIT VISUAL IMPACT
   ========================================================= */

.wrath64-access-gate.is-impacting
.access-gate-character-frame {

    animation:
        access-gate-impact-character
        390ms
        steps(2,end);

}


.wrath64-access-gate.is-impacting
.access-gate-character-noise {

    animation:
        access-gate-impact-noise
        390ms
        steps(2,end);

}


.wrath64-access-gate.is-impacting
.access-gate-window {

    animation:
        access-gate-impact-window
        390ms
        steps(2,end);

}


@keyframes access-gate-impact-window {

    0% {

        transform:
            none;

    }

    12% {

        transform:
            translate(-5px,1px);

    }

    25% {

        transform:
            translate(6px,-2px);

    }

    41% {

        transform:
            translate(-2px,2px);

    }

    56% {

        transform:
            translate(2px,-1px);

    }

    100% {

        transform:
            none;

    }

}


@keyframes access-gate-impact-character {

    0% {

        transform:
            scaleY(.08);

        filter:
            brightness(2);

    }

    20% {

        transform:
            scaleY(1)
            translateX(-7px);

    }

    38% {

        transform:
            translateX(6px);

    }

    54% {

        transform:
            translateX(-3px);

    }

    100% {

        transform:
            none;

        filter:
            none;

    }

}


@keyframes access-gate-impact-noise {

    0% {

        opacity:
            .9;

    }

    30% {

        opacity:
            .2;

    }

    48% {

        opacity:
            .75;

    }

    75% {

        opacity:
            .15;

    }

    100% {

        opacity:
            0;

    }

}



/* =========================================================
   CONTENT
   ========================================================= */

.access-gate-content {

    padding:
        34px;

    overflow-y:
        auto;

}


.access-gate-heading {

    margin:
        12px 0 17px;

    color:
        #f3fff6;

    font-size:
        clamp(25px,4vw,38px);

    font-weight:
        600;

    line-height:
        1;

}


.access-gate-intro {

    margin:
        0 0 13px;

    color:
        #d9e8de;

    font-size:
        13px;

    line-height:
        1.55;

}


.access-gate-copy {

    max-width:
        650px;

    margin:
        0 0 22px;

    color:
        #aebbb2;

    font-size:
        12px;

    line-height:
        1.65;

}



/* =========================================================
   CONTENT NOTICE
   ========================================================= */

.access-gate-content-notice {

    max-width:
        620px;

    margin:
        0 0 22px;

    padding:
        15px 17px;

    background:
        #0f1210;

    border:
        1px solid #343b36;

    border-left:
        3px solid #51705b;

}


.access-gate-content-notice-title {

    margin-bottom:
        10px;

    color:
        #dce8df;

    font-size:
        10px;

    letter-spacing:
        .08em;

}


.access-gate-content-list {

    margin:
        0;

    padding-left:
        19px;

    color:
        #aab8af;

    font-size:
        11px;

    line-height:
        1.7;

}



/* =========================================================
   CONFIRMATION
   ========================================================= */

.access-gate-confirmation {

    max-width:
        650px;

    margin:
        20px 0;

    color:
        #c3cdc6;

    font-size:
        11px;

    line-height:
        1.65;

}


.access-gate-confirmation p {

    margin:
        0 0 7px;

}



/* =========================================================
   POLICY
   ========================================================= */

.access-gate-policy-row {

    margin:
        0 0 24px;

}


.access-gate-policy-link,
.access-gate-policy-link:link,
.access-gate-policy-link:visited {

    color:
        #d9ffe7;

    font-size:
        10px;

    text-decoration:
        none;

    text-shadow:
        0 0 5px rgba(0,255,102,.45);

}


.access-gate-policy-link:hover {

    color:
        #fff;

    text-shadow:
        0 0 3px #fff,
        0 0 8px #00ff66;

}



/* =========================================================
   BUTTONS
   ========================================================= */

.access-gate-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

}


.access-gate-button {

    min-height:
        38px;

    padding:
        7px 14px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    background:
        #191d1a;

    color:
        #effff3;

    border-top:
        1px solid #d0d5d2;

    border-left:
        1px solid #d0d5d2;

    border-right:
        2px solid #333734;

    border-bottom:
        2px solid #333734;

    border-radius:
        0;

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

    font-size:
        10px;

    cursor:
        pointer;

}


.access-gate-button:hover {

    background:
        #222723;

    color:
        #fff;

    text-shadow:
        0 0 6px rgba(0,255,102,.65);

}


.access-gate-button:focus-visible {

    outline:
        1px dotted #00ff66;

    outline-offset:
        3px;

}


.access-gate-button:active {

    border-top:
        2px solid #333734;

    border-left:
        2px solid #333734;

    border-right:
        1px solid #d0d5d2;

    border-bottom:
        1px solid #d0d5d2;

    transform:
        translate(1px,1px);

}


.access-gate-continue-button {

    min-width:
        180px;

}


.access-gate-button-accept {

    min-width:
        170px;

}


.access-gate-button-reject {

    min-width:
        145px;

    background:
        #101210;

    color:
        #b8c0bb;

}



/* =========================================================
   RESULTS
   ========================================================= */

.access-gate-result-panel {

    min-height:
        470px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        36px;

    background:
        #080a09;

}


.access-gate-result-content {

    width:
        min(100%,540px);

    text-align:
        center;

}


.access-gate-result-symbol {

    width:
        52px;

    height:
        52px;

    margin:
        0 auto 18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid #3a423c;

    background:
        #101310;

    font-size:
        28px;

}


.access-gate-result-symbol-granted {

    color:
        #00ff66;

    text-shadow:
        0 0 10px rgba(0,255,102,.75);

}


.access-gate-result-symbol-denied {

    color:
        #d8d8d8;

}


.access-gate-result-label {

    margin-bottom:
        10px;

    color:
        #7c8a81;

    font-size:
        9px;

}


.access-gate-result-title {

    margin:
        0 0 18px;

    color:
        #f1fff5;

    font-size:
        30px;

    font-weight:
        500;

}


.access-gate-result-message {

    color:
        #d2ded6;

    font-size:
        12px;

}


.access-gate-result-secondary {

    color:
        #839087;

    font-size:
        10px;

}


.access-gate-denied-actions {

    margin-top:
        24px;

}



/* =========================================================
   NETWORK FOOTER
   ========================================================= */

.access-gate-network {

    flex:
        0 0 auto;

    min-height:
        35px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    padding:
        6px 9px;

    background:
        #080a08;

    border-top:
        1px solid #404743;

    color:
        #839087;

    font-size:
        9px;

}


.access-gate-network-left {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

}


.access-gate-network-indicator,
.access-gate-network-right {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

}


.access-gate-network-led-rx {

    animation:
        access-gate-rx
        1.7s
        steps(1,end)
        infinite;

}


.access-gate-network-led-tx {

    animation:
        access-gate-tx
        2.2s
        steps(1,end)
        infinite;

}


.access-gate-network-led-link {

    animation:
        access-gate-link
        3.1s
        steps(1,end)
        infinite;

}


@keyframes access-gate-rx {

    0%,10%,27%,36%,59%,71% {

        opacity:
            1;

    }

    11%,26%,37%,58%,72%,100% {

        opacity:
            .12;

    }

}


@keyframes access-gate-tx {

    0%,18%,31%,51%,63%,80% {

        opacity:
            .12;

    }

    19%,30%,52%,62%,81%,88% {

        opacity:
            1;

    }

    89%,100% {

        opacity:
            .12;

    }

}


@keyframes access-gate-link {

    0%,92%,100% {

        opacity:
            1;

    }

    93%,96% {

        opacity:
            .28;

    }

}



/* =========================================================
   TEXT CORRUPTION
   ========================================================= */

.access-gate-corrupt {

    display:
        inline-block;

}


.access-gate-corrupt.is-corrupting {

    color:
        #f4fff7;

    text-shadow:
        -1px 0 rgba(255,255,255,.75),
        1px 0 rgba(0,255,102,.85),
        0 0 7px rgba(0,255,102,.35);

    transform:
        translateX(1px)
        skewX(-1deg);

    filter:
        contrast(1.25)
        brightness(1.12);

}



/* =========================================================
   BODY LOCK
   ========================================================= */

body.access-gate-open {

    overflow:
        hidden !important;

}



/* =========================================================
   GRANT / DENY GLITCH
   ========================================================= */

.wrath64-access-gate.is-granting
.access-gate-window,
.wrath64-access-gate.is-denying
.access-gate-window {

    animation:
        access-gate-system-glitch
        95ms
        steps(2,end)
        infinite;

}


@keyframes access-gate-system-glitch {

    0% {

        transform:
            none;

    }

    25% {

        transform:
            translate(-3px,1px);

    }

    50% {

        transform:
            translate(3px,-1px);

    }

    75% {

        transform:
            translate(-1px,0);

    }

    100% {

        transform:
            none;

    }

}



/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 780px) {

    .wrath64-access-gate {

        padding:
            12px;

    }


    .access-gate-window {

        width:
            100%;

        max-height:
            95vh;

    }


    .access-gate-main-panel {

        grid-template-columns:
            220px 1fr;

    }


    .access-gate-character-column {

        min-height:
            460px;

    }

}



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

@media (max-width: 620px) {

    .wrath64-access-gate {

        padding:
            7px;

    }


    .access-gate-window {

        max-height:
            97vh;

    }


    .access-gate-attention-panel {

        min-height:
            420px;

        padding:
            28px 18px;

    }


    .access-gate-main-panel {

        display:
            block;

        overflow-y:
            auto;

    }


    .access-gate-character-column {

        min-height:
            auto;

        padding:
            15px;

        border-right:
            0;

        border-bottom:
            1px solid #323733;

    }


    .access-gate-character-frame {

        width:
            170px;

    }


    .access-gate-content {

        overflow:
            visible;

        padding:
            22px 17px 25px;

    }


    .access-gate-actions {

        flex-direction:
            column;

    }


    .access-gate-button {

        width:
            100%;

    }


    .access-gate-network-name {

        display:
            none;

    }

}



/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .access-gate-window,
    .access-gate-character,
    .access-gate-titlebar-led,
    .access-gate-titlebar-lock-led,
    .access-gate-network-led-rx,
    .access-gate-network-led-tx,
    .access-gate-network-led-link,
    .wrath64-access-gate.is-impacting
    .access-gate-window,
    .wrath64-access-gate.is-impacting
    .access-gate-character-frame,
    .wrath64-access-gate.is-impacting
    .access-gate-character-noise {

        animation:
            none !important;

    }

}