body{display:flex;align-items:center;justify-content:center;height:100vh;margin:0;padding:0}.glitch-input-wrapper{--bg-color: #0d0d0d;--primary-color: #00f2ea;--secondary-color: #a855f7;--text-color: #e5e5e5;--font-family: "Fira Code", Consolas, "Courier New", Courier, monospace;--glitch-anim-duration: .4s;display:flex;justify-content:center;align-items:center;font-family:var(--font-family);font-size:16px;padding:3rem}.input-container{position:relative;width:19rem}.holo-input{width:100%;height:3.5rem;background:#0d0d0db3;border:none;border-bottom:2px solid #0b0b0b;outline:none;padding:0 1rem;color:var(--primary-color);font-family:inherit;font-size:1.1rem;caret-color:var(--primary-color);z-index:10;transition:background .3s ease,border-color .3s ease}.input-label{position:absolute;top:1rem;left:1rem;color:var(--text-color);opacity:.6;text-transform:uppercase;letter-spacing:.1em;pointer-events:none;transition:all .3s ease;z-index:11}.holo-input:focus+.input-label,.holo-input:not(:placeholder-shown)+.input-label{top:-1.5rem;left:0;font-size:.8rem;opacity:1;color:var(--primary-color)}.holo-input:focus+.input-label:before,.holo-input:focus+.input-label:after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;background-color:#212121}.holo-input:focus+.input-label:before{color:var(--secondary-color);animation:glitch-label var(--glitch-anim-duration) cubic-bezier(.25,.46,.45,.94) both}.holo-input:focus+.input-label:after{color:var(--primary-color);animation:glitch-label var(--glitch-anim-duration) cubic-bezier(.25,.46,.45,.94) reverse both}.input-border,.input-scanline,.input-glow,.input-corners{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.input-border{border:1px solid rgba(0,242,234,.2);opacity:.5;transition:all .3s ease}.corner{position:absolute;width:1rem;height:1rem;border:2px solid var(--primary-color);transition:all .3s ease;opacity:.5}.corner-tl{top:-.3rem;left:-.3rem;border-right:none;border-bottom:none}.corner-tr{top:-.3rem;right:-.3rem;border-left:none;border-bottom:none}.corner-bl{bottom:-.3rem;left:-.3rem;border-right:none;border-top:none}.corner-br{bottom:-.3rem;right:-.3rem;border-left:none;border-top:none}.input-glow{background:radial-gradient(ellipse at center,rgba(0,242,234,.2) 0%,transparent 70%);opacity:0;transition:opacity .4s ease}.input-scanline{height:100%;background:linear-gradient(to bottom,transparent 0%,rgba(0,242,234,.1) 48%,rgba(0,242,234,.3) 50%,rgba(0,242,234,.1) 52%,transparent 100%);opacity:0}.input-data-stream{position:absolute;bottom:2px;left:0;width:100%;height:.3rem;display:flex;opacity:0;transition:opacity .3s ease .1s}.stream-bar{flex-grow:1;background-color:var(--primary-color);transition:transform .2s,opacity .2s;transform:scaleY(0);transform-origin:bottom}.holo-input:focus{border-color:transparent}.holo-input:focus~.input-border{opacity:1;border-color:#00f2ea80}.holo-input:focus~.input-corners .corner{width:1.25rem;height:1.25rem;border-width:3px;opacity:1}.holo-input:focus~.input-glow{opacity:1}.holo-input:focus~.input-scanline{animation:scan-vertical 4s linear infinite}.holo-input:focus~.input-data-stream{opacity:1}.holo-input:focus~.input-data-stream .stream-bar{animation:data-pulse 2s infinite;animation-delay:calc(var(--i) * .1s)}@keyframes glitch-label{0%{transform:translate(0);clip-path:inset(0 0 0 0)}20%{transform:translate(-.2rem,.1rem);clip-path:inset(50% 0 20% 0)}40%{transform:translate(.1rem,-.1rem);clip-path:inset(20% 0 60% 0)}60%{transform:translate(-.15rem,.1rem);clip-path:inset(80% 0 5% 0)}80%{transform:translate(.15rem,-.15rem);clip-path:inset(30% 0 45% 0)}to{transform:translate(0);clip-path:inset(0 0 0 0)}}@keyframes scan-vertical{0%{opacity:0;transform:translateY(-100%)}25%{opacity:.5}75%{opacity:.5}to{opacity:0;transform:translateY(100%)}}@keyframes data-pulse{0%,to{transform:scaleY(.2);opacity:.3}50%{transform:scaleY(1);opacity:.8}}@keyframes reverse-position{0%{left:0;top:0}50%{left:-3px;top:-3px}to{left:0;top:0}}@keyframes forward-position{0%{left:0;top:0}50%{left:3px;top:3px}to{left:0;top:0}}@keyframes lines{0%{opacity:.8}30%{opacity:0}50%{opacity:.4}80%{opacity:0}to{opacity:.8}}@keyframes text{0%{color:#222}50%{color:#fff}to{color:#222}}@keyframes background{0%{background:#efefef}50%{background:#222}to{background:#efefef}}body{background:#adc5cc;padding:0;margin:0;color:#fff;font-family:arial,sans-serif}.container{position:relative;left:50%;top:50%;transform:translate(-50%,-50%);width:100px;height:50px;background:#efefef;border-radius:3px;overflow:hidden;box-shadow:0 2px 5px #03eaf6;-webkit-user-select:none;user-select:none}.container:before{content:" ";display:block;opacity:0;width:40px;height:2px;background:#fff;border-bottom:2px solid #000;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:30;margin-left:-90px;margin-top:20px}.container:after{content:" ";display:block;opacity:0;width:100px;height:2px;background:#fff;border-bottom:2px solid #000;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:30;margin-left:90px;margin-top:-10px}.text{font-size:20px;line-height:50px;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;width:100%;height:100%;color:#222;z-index:20}.text:before{content:attr(data-text);display:block;width:100%;height:100%;position:absolute;left:0;top:0;color:#0ff;z-index:-1}.text:after{content:attr(data-text);display:block;width:100%;height:100%;position:absolute;left:0;top:0;color:red;z-index:-1}.container:active,.container:focus{background:#111}.container:active .text,.container:focus .text{color:#efefef}.container:hover{cursor:none}.container:hover:before,.container:hover:after{animation:lines .1s infinite}.container:hover .text:before{animation:reverse-position .1s infinite}.container:hover .text:after{animation:forward-position .1s infinite}