#glitchOverlay{

position:fixed;

inset:0;

pointer-events:none;

z-index:99999;

visibility:hidden;

backdrop-filter:
invert(1)
grayscale(1)
brightness(.75)
contrast(2.2);

-webkit-backdrop-filter:
invert(1)
grayscale(1)
brightness(.75)
contrast(2.2);

}

#screen.glitchShake{

animation:
glitchShake .06s linear infinite,
glitchSkew .08s linear infinite;

transform-origin:center;

}


@keyframes glitchShake{

0%{

transform:
translate(0px,0px);

}

20%{

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

}

40%{

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

}

60%{

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

}

80%{

transform:
translate(8px,5px);

}

100%{

transform:
translate(0px,0px);

}

}


@keyframes glitchSkew{

0%{

filter:none;

}

25%{

transform:
skewX(-4deg);

}

50%{

transform:
skewX(5deg);

}

75%{

transform:
skewY(-3deg);

}

100%{

transform:none;

}

}

#screen.glitchSlices::before{

content:"";

position:absolute;

inset:0;

pointer-events:none;

z-index:99998;

background:
repeating-linear-gradient(
to bottom,

transparent 0px,
transparent 18px,

rgba(255,255,255,.10) 18px,
rgba(255,255,255,.10) 20px
);

animation:
sliceJump .08s linear infinite;

mix-blend-mode:difference;

}


@keyframes sliceJump{

0%{

transform:
translateX(0px);

}

20%{

transform:
translateX(-18px);

}

40%{

transform:
translateX(10px);

}

60%{

transform:
translateX(-12px);

}

80%{

transform:
translateX(16px);

}

100%{

transform:
translateX(0px);

}

}

/* ===== GLITCH REDES ===== */

.wifiName.glitchName{

animation:
nameShake .02s linear 2,
rgbSplit .06s linear 4;

}


@keyframes nameShake{

0%{

transform:
translate(0px,0px);

}

25%{

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

}

50%{

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

}

75%{

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

}

100%{

transform:
translate(0px,0px);

}

}


@keyframes rgbSplit{

0%{

text-shadow:
-3px 0 red,
3px 0 cyan;

}

25%{

text-shadow:
3px 0 blue,
-3px 0 red;

}

50%{

text-shadow:
-4px 0 lime,
4px 0 magenta;

}

75%{

text-shadow:
4px 0 cyan,
-4px 0 red;

}

100%{

text-shadow:none;

}

}

/* ===== DISTORSIÓN BODY CORTA ===== */

body.bodyDistortion{

animation:
bodyShake .03s linear 10;

}


@keyframes bodyShake{

0%{

transform:
translate(0px,0px)
skewX(0deg);

}

20%{

transform:
translate(-12px,4px)
skewX(-3deg);

}

40%{

transform:
translate(10px,-5px)
skewX(4deg);

}

60%{

transform:
translate(-8px,3px)
skewX(-4deg);

}

80%{

transform:
translate(12px,-4px)
skewX(3deg);

}

100%{

transform:
translate(0px,0px)
skewX(0deg);

}

}