@import "https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap";
.login-wrapper{--main-bg:#1c1c1c;--neon-color:#3b82f6;--neon-secondary:#06b6d4;--text-white:#fff;--glass-bg:#ffffff0d;--glass-border:#ffffff1a;--glass-shadow:0 8px 32px 0 #0000005e;background:linear-gradient(135deg,#090e16 0%,#0f172a 100%);justify-content:center;align-items:center;width:100%;height:100%;font-family:Poppins,sans-serif;display:flex;position:fixed;top:0;left:0;overflow:hidden}.login-wrapper .wrapper{background:var(--main-bg);border:2px solid var(--neon-color);width:920px;height:520px;box-shadow:0 0 25px var(--neon-color);transition:height .5s;animation:.6s cubic-bezier(.68,-.55,.265,1.55) scaleInBounce;position:relative;overflow:hidden}@keyframes scaleInBounce{0%{opacity:0;transform:scale(0)}60%{opacity:1;transform:scale(1.05)}80%{transform:scale(.95)}to{transform:scale(1)}}.login-wrapper .wrapper .bg-animate{background:linear-gradient(45deg,var(--main-bg),var(--neon-color));border-bottom:3px solid var(--neon-color);transform-origin:100% 100%;z-index:1;width:1000px;height:850px;transition:transform 1.75s;position:absolute;top:-4px;right:0;transform:rotate(10deg)skewY(44deg)}.login-wrapper .wrapper.active .bg-animate{transition-delay:.5s;transform:rotate(0)skewY(0)}.login-wrapper .wrapper .bg-animate2{background:var(--main-bg);border-top:3px solid var(--neon-color);transform-origin:0 100%;z-index:1;width:1000px;height:850px;transition:transform 1.75s;position:absolute;top:100%;left:250px;transform:rotate(0)skewY(0)}.login-wrapper .wrapper.active .bg-animate2{transition-delay:1.2s;transform:rotate(-11deg)skewY(-35deg)}.login-wrapper .wrapper .form-box{z-index:2;flex-direction:column;justify-content:center;width:50%;height:100%;transition:opacity .5s,transform .8s;display:flex;position:absolute;top:0}.login-wrapper .wrapper .form-box.login{padding:0 60px 0 40px;left:0}.login-wrapper .wrapper .form-box.register{pointer-events:none;opacity:0;perspective:1000px;padding:0;right:0}.login-wrapper .wrapper.active .form-box.login{opacity:0;pointer-events:none;transition-delay:0s;transform:translate(-100px)}.login-wrapper .wrapper.active .form-box.register{opacity:1;pointer-events:auto;transform:translate(0)}.login-wrapper .info-text{z-index:2;flex-direction:column;justify-content:center;width:50%;height:100%;display:flex;position:absolute;top:0}.login-wrapper .info-text.login{text-align:right;padding:0 40px 60px 150px;right:0}.login-wrapper .info-text.register{text-align:left;opacity:0;pointer-events:none;padding:0 150px 60px 40px;left:0}.login-wrapper .wrapper.active .info-text.login{opacity:0;pointer-events:none}.login-wrapper .wrapper.active .info-text.register{opacity:1;pointer-events:auto}.login-wrapper .animation{opacity:0;visibility:hidden;transition:all .5s;transform:translate(50px)}.login-wrapper .wrapper:not(.active) .form-box.login .animation,.login-wrapper .wrapper:not(.active) .info-text.login .animation,.login-wrapper .wrapper.active .form-box.register .animation,.login-wrapper .wrapper.active .info-text.register .animation{opacity:1;visibility:visible;transition-delay:calc(2s + .1s*var(--i));transform:translate(0)}.login-wrapper .wrapper.active .form-box.login .animation,.login-wrapper .wrapper.active .info-text.login .animation{opacity:0;visibility:hidden;transition-delay:calc(.1s*var(--i));transform:translate(-120px)}.login-wrapper .wrapper:not(.active) .form-box.register .animation,.login-wrapper .wrapper:not(.active) .info-text.register .animation{opacity:0;visibility:hidden;transition-delay:calc(.1s*var(--i));transform:translate(120px)}.login-wrapper .card-3d-container{width:100%;height:100%;position:relative}.login-wrapper .card-inner{text-align:center;width:100%;height:100%;transform-style:preserve-3d;justify-content:center;align-items:center;transition:transform .8s;display:flex;position:relative}.login-wrapper .card-3d-container.flipped .card-inner{transform:rotateY(180deg)}.login-wrapper .card-front,.login-wrapper .card-back{backface-visibility:hidden;background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);border:1px solid var(--glass-border);width:90%;height:90%;box-shadow:var(--glass-shadow);color:var(--text-white);border-radius:20px;flex-direction:column;justify-content:center;align-items:center;padding:20px;display:flex;position:absolute}.login-wrapper .card-back{transform:rotateY(180deg)}.login-wrapper h2{color:var(--text-white);text-align:center;padding:10px;font-size:28px}.login-wrapper .info-text h2{text-transform:uppercase}.login-wrapper .info-text p{color:var(--text-white);font-size:16px}.login-wrapper .btn{border:2px solid var(--neon-color);cursor:pointer;color:#fff;z-index:1;background:0 0;border-radius:40px;outline:none;width:100%;height:45px;margin-top:20px;font-size:16px;font-weight:600;transition:opacity .5s,transform .5s,box-shadow .5s;position:relative;overflow:hidden;box-shadow:0 0 10px #00000080}.login-wrapper .btn:before{content:"";background:linear-gradient(to top,var(--neon-color),var(--neon-secondary));z-index:-1;width:100%;height:100%;transition:top .5s;position:absolute;top:100%;left:0}.login-wrapper .btn:hover:before{top:0}.login-wrapper .btn:hover{box-shadow:0 0 20px var(--neon-color);border-color:var(--neon-color)}.login-wrapper .input-box{border-bottom:2px solid var(--text-white);width:100%;height:50px;margin:20px 0;position:relative}.login-wrapper .input-box input{width:100%;height:100%;color:var(--text-white);background:0 0;border:none;outline:none;padding-right:23px;font-size:16px;font-weight:600}.login-wrapper .input-box label{color:var(--text-white);pointer-events:none;font-size:16px;transition:all .5s;position:absolute;top:50%;left:0;transform:translateY(-50%)}.login-wrapper .input-box input:focus~label,.login-wrapper .input-box input:not(:placeholder-shown)~label{color:var(--neon-color);top:-5px}.login-wrapper .input-box i{color:var(--text-white);font-size:18px;transition:all .5s;display:flex;position:absolute;top:50%;right:0;transform:translateY(-50%)}.login-wrapper .logreg-link{color:var(--text-white);text-align:center;margin:20px 0 15px;font-size:14.5px}.login-wrapper .logreg-link p span{color:var(--neon-color);cursor:pointer;font-weight:600;text-decoration:none}.login-wrapper .logreg-link p span:hover{text-decoration:underline}.login-wrapper .close-btn-abs{color:#fff;z-index:105;cursor:pointer;position:absolute;top:15px;right:15px}@media (max-width:768px){.login-wrapper .wrapper{border-radius:20px;width:90%;max-width:400px;height:600px}.login-wrapper .wrapper .bg-animate,.login-wrapper .wrapper .bg-animate2,.login-wrapper .info-text{display:none}.login-wrapper .wrapper .form-box{width:100%;height:100%;padding:0 20px}.login-wrapper .wrapper:not(.active) .form-box.login{opacity:1;pointer-events:auto;z-index:10;transform:translate(0)}.login-wrapper .wrapper.active .form-box.login,.login-wrapper .wrapper:not(.active) .form-box.register{opacity:0;pointer-events:none;transition-delay:0s;transform:scale(.95)}.login-wrapper .wrapper.active .form-box.register{opacity:1;pointer-events:auto;z-index:10;left:0;transform:scale(1)}.login-wrapper .input-box{width:100%}.login-wrapper .card-front,.login-wrapper .card-back{width:100%;height:100%;box-shadow:none;background:0 0;border:none;padding:10px}.login-wrapper .card-3d-container{height:90%}}