/* =========================================================
   ZIKA LABS - VOID
   COMPLETE CSS
   ========================================================= */


/* =========================================================
   ORIGINAL WEBSITE
   ========================================================= */

body {

    background: #bcc7d4;

    color: #222;

    font-family:
        Verdana,
        Arial,
        sans-serif;

    font-size: 13px;

    margin: 0;

    padding: 20px;

    overflow-x: hidden;

    transition:
        background 3s ease,
        color 2s ease;
}


/* =========================================================
   MAIN WRAPPER
   ========================================================= */

#wrapper {

    width: 760px;

    margin: 0 auto;

    background: #ffffff;

    border: 1px solid #6d7782;

    position: relative;

    transition:
        background 2s ease,
        border-color 2s ease;
}


/* =========================================================
   HEADER
   ========================================================= */

#header {

    background:
        linear-gradient(
            #35597d,
            #243d58
        );

    color: white;

    padding:
        12px
        15px
        10px
        15px;

    border-bottom:
        1px solid #5b6773;

    position: relative;
}


.header-main {

    display: flex;

    align-items: center;
}


.site-icon {

    width: 59px;

    height: 63px;

    object-fit: contain;

    margin-right: 14px;

    border:
        1px solid #182b3e;

    background: #dce5ed;
}


.header-text h1 {

    margin: 0;

    font-family:
        Georgia,
        serif;

    font-size: 32px;

    font-weight: normal;
}


.header-text p {

    margin:
        5px
        0
        0
        0;

    color: #d5e1ee;
}


/* =========================================================
   MARQUEE
   ========================================================= */

marquee {

    margin-top: 10px;

    color: #ffe08a;

    font-size: 12px;

    font-weight: bold;

    border-top:
        1px solid #4c6984;

    padding-top: 6px;
}


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

#content {

    padding: 20px;

    line-height: 1.6;
}


h2 {

    color: #2b4f73;

    border-bottom:
        1px solid #d6d6d6;

    padding-bottom: 5px;

    margin-top: 0;
}


h3 {

    color: #2b4f73;
}


p {

    margin-bottom: 15px;
}


a {

    color: #0047ab;

    text-decoration: none;
}


a:hover {

    color: #cc6600;

    text-decoration: underline;
}


ul {

    padding-left: 20px;
}


hr {

    border: none;

    border-top:
        1px solid #d6d6d6;

    margin:
        20px 0;
}


/* =========================================================
   NOTICE BOX
   ========================================================= */

.notice-box {

    background: #f5f7fa;

    border:
        1px solid #c7d1db;

    padding: 10px;

    margin:
        20px 0;
}


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

#footer {

    background: #efefef;

    border-top:
        1px solid #cfcfcf;

    padding: 10px;

    text-align: center;

    color: #666;

    font-size: 11px;
}


/* =========================================================
   VOID EVENT STARTS
   ========================================================= */

body.breaking {

    background: #080808;
}


/* =========================================================
   GENERAL GLITCH
   ========================================================= */

body.breaking #wrapper {

    animation:
        screenShake 0.09s infinite,
        wrapperGlitch 0.14s infinite;
}


body.breaking #wrapper * {

    animation:
        elementGlitch 0.12s infinite;
}


/* =========================================================
   FALLING ELEMENTS
   ========================================================= */

.falling {

    animation:
        fallApart
        var(--fall-duration, 2s)
        cubic-bezier(.25, 0, .9, 1)
        forwards !important;

    transform-origin:
        center center;

    position: relative;

    z-index: 10;
}


@keyframes fallApart {

    0% {

        transform:
            translate(0, 0)
            rotate(0deg)
            skew(0deg);

        opacity: 1;
    }


    8% {

        transform:
            translate(
                calc(var(--fall-x) * 0.1),
                4px
            )
            rotate(
                calc(var(--fall-rotation) * 0.1)
            )
            skew(2deg);

        opacity: 1;
    }


    20% {

        transform:
            translate(
                calc(var(--fall-x) * 0.3),
                25px
            )
            rotate(
                calc(var(--fall-rotation) * 0.3)
            )
            skew(-4deg);

        opacity: 0.95;
    }


    45% {

        transform:
            translate(
                calc(var(--fall-x) * 0.6),
                120px
            )
            rotate(
                calc(var(--fall-rotation) * 0.6)
            )
            skew(7deg);

        opacity: 0.75;
    }


    100% {

        transform:
            translate(
                var(--fall-x),
                var(--fall-distance)
            )
            rotate(var(--fall-rotation))
            skew(12deg);

        opacity: 0;
    }
}


/* =========================================================
   GENERAL ELEMENT GLITCH
   ========================================================= */

@keyframes elementGlitch {

    0% {

        transform:
            translateX(0);

        filter: none;
    }


    15% {

        transform:
            translateX(-3px);

        filter:
            contrast(1.4);
    }


    30% {

        transform:
            translateX(4px);

        filter:
            brightness(0.6);
    }


    45% {

        transform:
            translateX(-6px);

        filter:
            contrast(2);
    }


    60% {

        transform:
            translateX(2px);

        filter:
            brightness(1.5);
    }


    75% {

        transform:
            translateX(5px);

        filter:
            contrast(0.7);
    }


    100% {

        transform:
            translateX(0);

        filter: none;
    }
}


/* =========================================================
   SCREEN SHAKE
   ========================================================= */

@keyframes screenShake {

    0% {
        transform: translate(0, 0);
    }

    20% {
        transform: translate(-3px, 2px);
    }

    40% {
        transform: translate(4px, -2px);
    }

    60% {
        transform: translate(-5px, 1px);
    }

    80% {
        transform: translate(2px, -3px);
    }

    100% {
        transform: translate(0, 0);
    }
}


/* =========================================================
   WRAPPER GLITCH
   ========================================================= */

@keyframes wrapperGlitch {

    0% {
        filter: none;
    }

    20% {
        filter: contrast(1.5);
    }

    40% {
        filter: brightness(0.6);
    }

    60% {
        filter: contrast(2);
    }

    80% {
        filter: brightness(1.4);
    }

    100% {
        filter: none;
    }
}


/* =========================================================
   TEXT GLITCH
   ========================================================= */

.text-glitch {

    position: relative;

    animation:
        textCorruption
        0.11s
        infinite
        steps(2),

        textFlicker
        0.17s
        infinite
        steps(2);
}


/* =========================================================
   TEXT GLITCH TOP COPY
   ========================================================= */

.text-glitch::before {

    content: attr(data-glitch);

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    overflow: hidden;

    color: #777;

    transform:
        translate(-4px, 0);

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

    opacity: 0.8;

    animation:
        textSliceTop
        0.13s
        infinite
        steps(2);
}


/* =========================================================
   TEXT GLITCH BOTTOM COPY
   ========================================================= */

.text-glitch::after {

    content: attr(data-glitch);

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    overflow: hidden;

    color: #aaa;

    transform:
        translate(5px, 0);

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

    opacity: 0.7;

    animation:
        textSliceBottom
        0.16s
        infinite
        steps(2);
}


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

@keyframes textCorruption {

    0% {

        transform:
            translate(0, 0)
            skew(0deg);
    }


    10% {

        transform:
            translate(-4px, 0)
            skew(-3deg);
    }


    20% {

        transform:
            translate(6px, 1px)
            skew(4deg);
    }


    30% {

        transform:
            translate(-8px, -1px)
            skew(-6deg);
    }


    40% {

        transform:
            translate(3px, 0)
            skew(2deg);
    }


    50% {

        transform:
            translate(9px, 2px)
            skew(7deg);
    }


    60% {

        transform:
            translate(-5px, -2px)
            skew(-4deg);
    }


    70% {

        transform:
            translate(4px, 0)
            skew(5deg);
    }


    80% {

        transform:
            translate(-7px, 1px)
            skew(-3deg);
    }


    90% {

        transform:
            translate(2px, -1px)
            skew(2deg);
    }


    100% {

        transform:
            translate(0, 0)
            skew(0deg);
    }
}


/* =========================================================
   TEXT FLICKER
   ========================================================= */

@keyframes textFlicker {

    0% {
        opacity: 1;
    }

    15% {
        opacity: 0.7;
    }

    17% {
        opacity: 0.2;
    }

    20% {
        opacity: 1;
    }

    35% {
        opacity: 0.4;
    }

    38% {
        opacity: 1;
    }

    55% {
        opacity: 0.8;
    }

    57% {
        opacity: 0.1;
    }

    60% {
        opacity: 1;
    }

    80% {
        opacity: 0.5;
    }

    82% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}


/* =========================================================
   TOP TEXT SLICE
   ========================================================= */

@keyframes textSliceTop {

    0% {

        transform:
            translate(-4px, 0);

        clip-path:
            inset(0 0 75% 0);
    }


    25% {

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

        clip-path:
            inset(15% 0 50% 0);
    }


    50% {

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

        clip-path:
            inset(35% 0 40% 0);
    }


    75% {

        transform:
            translate(6px, 2px);

        clip-path:
            inset(5% 0 65% 0);
    }


    100% {

        transform:
            translate(-8px, 0);

        clip-path:
            inset(0 0 75% 0);
    }
}


/* =========================================================
   BOTTOM TEXT SLICE
   ========================================================= */

@keyframes textSliceBottom {

    0% {

        transform:
            translate(5px, 0);

        clip-path:
            inset(65% 0 0 0);
    }


    25% {

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

        clip-path:
            inset(45% 0 15% 0);
    }


    50% {

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

        clip-path:
            inset(60% 0 5% 0);
    }


    75% {

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

        clip-path:
            inset(30% 0 30% 0);
    }


    100% {

        transform:
            translate(7px, 0);

        clip-path:
            inset(65% 0 0 0);
    }
}


/* =========================================================
   STATIC
   ========================================================= */

#static {

    position: fixed;

    inset: -20px;

    pointer-events: none;

    opacity: 0;

    z-index: 9000;


    background-image:

        repeating-radial-gradient(
            circle at 17% 32%,
            rgba(255, 255, 255, 0.7) 0px,
            rgba(255, 255, 255, 0.7) 1px,
            transparent 1px,
            transparent 3px
        ),

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


    background-size:
        5px 5px,
        100% 4px;


    mix-blend-mode: screen;


    animation:
        staticNoise
        0.06s
        steps(2)
        infinite;
}


/* =========================================================
   STATIC HORIZONTAL LINES
   ========================================================= */

#static::before {

    content: "";

    position: absolute;

    inset: 0;


    background:

        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 6px,
            rgba(255, 255, 255, 0.15) 7px,
            transparent 8px
        );


    animation:
        scanlines
        0.12s
        linear
        infinite;


    opacity: 0.7;
}


/* =========================================================
   STATIC VERTICAL INTERFERENCE
   ========================================================= */

#static::after {

    content: "";

    position: absolute;

    inset: 0;


    background:

        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 20px,
            rgba(255, 255, 255, 0.08) 21px,
            transparent 23px
        );


    animation:
        staticHorizontal
        0.09s
        steps(2)
        infinite;


    opacity: 0.6;
}


/* =========================================================
   STATIC ACTIVATED
   ========================================================= */

body.static-active #static {

    opacity: 0.85;
}


/* =========================================================
   HEAVY STATIC
   ========================================================= */

body.heavy-static #static {

    opacity: 1;

    animation:
        staticNoise
        0.035s
        steps(2)
        infinite;
}


/* =========================================================
   STATIC NOISE
   ========================================================= */

@keyframes staticNoise {

    0% {

        transform:
            translate(0, 0);

        background-position:
            0 0;
    }


    20% {

        transform:
            translate(-8px, 4px);

        background-position:
            20px -10px;
    }


    40% {

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

        background-position:
            -15px 15px;
    }


    60% {

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

        background-position:
            30px 5px;
    }


    80% {

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

        background-position:
            -20px -15px;
    }


    100% {

        transform:
            translate(0, 0);

        background-position:
            0 0;
    }
}


/* =========================================================
   SCANLINES
   ========================================================= */

@keyframes scanlines {

    0% {
        transform:
            translateY(0);
    }


    50% {
        transform:
            translateY(12px);
    }


    100% {
        transform:
            translateY(-8px);
    }
}


/* =========================================================
   HORIZONTAL STATIC
   ========================================================= */

@keyframes staticHorizontal {

    0% {
        transform:
            translateX(0);
    }


    25% {
        transform:
            translateX(-30px);
    }


    50% {
        transform:
            translateX(25px);
    }


    75% {
        transform:
            translateX(-15px);
    }


    100% {
        transform:
            translateX(40px);
    }
}


/* =========================================================
   VOID SCREEN
   ========================================================= */

#void-screen {

    position: fixed;

    inset: 0;


    display: flex;

    align-items: center;

    justify-content: center;


    background: #000;


    opacity: 0;

    visibility: hidden;


    z-index: 10000;


    transition:
        opacity 0.8s ease,
        visibility 0.8s ease;
}


body.void-active #void-screen {

    opacity: 1;

    visibility: visible;
}


/* =========================================================
   VOID TEXT
   ========================================================= */

.void-text {

    position: relative;


    color: #fff;


    font-family:
        "Courier New",
        monospace;


    font-size:
        clamp(70px, 14vw, 180px);


    font-weight: bold;


    letter-spacing: 0.12em;


    text-shadow:
        4px 0 #777,
        -4px 0 #aaa;


    animation:
        voidFlicker
        0.1s
        infinite
        steps(2),

        voidShake
        0.07s
        infinite;
}


/* =========================================================
   VOID TOP COPY
   ========================================================= */

.void-text::before {

    content: attr(data-text);

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    overflow: hidden;

    color: #888;


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


    clip-path:
        inset(5% 0 65% 0);


    animation:
        voidSlice1
        0.18s
        infinite
        steps(2);
}


/* =========================================================
   VOID BOTTOM COPY
   ========================================================= */

.void-text::after {

    content: attr(data-text);

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    overflow: hidden;

    color: #aaa;


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


    clip-path:
        inset(60% 0 5% 0);


    animation:
        voidSlice2
        0.14s
        infinite
        steps(2);
}


/* =========================================================
   VOID FLICKER
   ========================================================= */

@keyframes voidFlicker {

    0% {
        opacity: 1;
    }


    15% {
        opacity: 0.2;
    }


    18% {
        opacity: 1;
    }


    35% {
        opacity: 0.8;
    }


    37% {
        opacity: 0;
    }


    40% {
        opacity: 1;
    }


    65% {
        opacity: 0.4;
    }


    70% {
        opacity: 1;
    }


    100% {
        opacity: 1;
    }
}


/* =========================================================
   VOID SHAKE
   ========================================================= */

@keyframes voidShake {

    0% {
        transform:
            translate(0);
    }


    25% {
        transform:
            translate(-5px, 2px);
    }


    50% {
        transform:
            translate(4px, -3px);
    }


    75% {
        transform:
            translate(-2px, 3px);
    }


    100% {
        transform:
            translate(0);
    }
}


/* =========================================================
   VOID SLICE 1
   ========================================================= */

@keyframes voidSlice1 {

    0% {

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

        clip-path:
            inset(5% 0 70% 0);
    }


    50% {

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

        clip-path:
            inset(35% 0 40% 0);
    }


    100% {

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

        clip-path:
            inset(70% 0 5% 0);
    }
}


/* =========================================================
   VOID SLICE 2
   ========================================================= */

@keyframes voidSlice2 {

    0% {

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

        clip-path:
            inset(65% 0 5% 0);
    }


    50% {

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

        clip-path:
            inset(25% 0 55% 0);
    }


    100% {

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

        clip-path:
            inset(5% 0 70% 0);
    }
}