.hacker-loader{background-color:#0a0a0a;border:.2em solid #0f0;border-radius:.5em;width:90%;min-width:280px;max-width:24em;height:auto;min-height:6em;margin:0 auto;padding:1em;position:relative;overflow:hidden;box-shadow:0 0 1em #00ff004d}.loader-text{text-align:center;margin-bottom:1em}.text-glitch{color:#0f0;font-family:monospace;font-size:1.5em;display:inline-block;position:relative}.text-glitch:before,.text-glitch:after{content:attr(data-text);clip:rect(0,0,0,0);background-color:#0a0a0a;width:100%;height:100%;position:absolute;top:0;left:0}.text-glitch:before{text-shadow:.1em 0 #f0f;animation:3s linear infinite alternate-reverse glitch-effect;left:-.1em}.text-glitch:after{text-shadow:-.1em 0 #0ff;animation:2s linear infinite alternate-reverse glitch-effect;left:.1em}.loader-bar{background-color:#030;border-radius:.25em;width:100%;height:.5em;position:relative;overflow:hidden}.bar-fill{background-color:#0f0;width:0;height:100%;animation:2s ease-in-out infinite bar-fill-animation;position:absolute;top:0;left:0}.bar-glitch{background:linear-gradient(45deg,#0000,#0f03,#0000) 0 0/200% 200%;width:100%;height:100%;animation:2s linear infinite bar-glitch-animation;position:absolute;top:0;left:0}.particles{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.particle{opacity:0;background-color:#0f0;border-radius:50%;width:.2em;height:.2em;animation:2s linear infinite particle-animation;position:absolute}.particle:first-child{animation-delay:0s;top:10%;left:10%}.particle:nth-child(2){animation-delay:.5s;top:30%;left:60%}.particle:nth-child(3){animation-delay:1s;top:70%;left:30%}.particle:nth-child(4){animation-delay:1.5s;top:90%;left:90%}.particle:nth-child(5){animation-delay:2s;top:50%;left:50%}@keyframes glitch-effect{0%{clip:rect(42px,9999px,44px,0)}5%{clip:rect(12px,9999px,59px,0)}10%{clip:rect(48px,9999px,29px,0)}15%{clip:rect(42px,9999px,73px,0)}20%{clip:rect(63px,9999px,27px,0)}25%{clip:rect(34px,9999px,55px,0)}30%{clip:rect(86px,9999px,73px,0)}35%{clip:rect(20px,9999px,20px,0)}40%{clip:rect(26px,9999px,60px,0)}45%{clip:rect(25px,9999px,66px,0)}50%{clip:rect(57px,9999px,98px,0)}55%{clip:rect(5px,9999px,46px,0)}60%{clip:rect(82px,9999px,31px,0)}65%{clip:rect(54px,9999px,27px,0)}70%{clip:rect(28px,9999px,99px,0)}75%{clip:rect(45px,9999px,69px,0)}80%{clip:rect(23px,9999px,85px,0)}85%{clip:rect(54px,9999px,84px,0)}90%{clip:rect(45px,9999px,47px,0)}95%{clip:rect(37px,9999px,20px,0)}to{clip:rect(4px,9999px,91px,0)}}@keyframes bar-fill-animation{0%,to{width:0}50%{width:100%}}@keyframes bar-glitch-animation{0%{background-position:0 0}to{background-position:200% 0}}@keyframes particle-animation{0%{opacity:0;transform:translate(0)}50%{opacity:1}to{opacity:0;transform:translate(2em,2em)}}
