.nebula-input{position:relative}.nebula-input .input{width:100%;padding:12px;border:2px solid rgba(29,163,243,.2);color:white;font-size:16px;outline:none;border-radius:8px}.nebula-input .input,.nebula-input .user-label{background:transparent;transition:all .4s ease-out}.nebula-input .user-label{position:absolute;top:15px;pointer-events:none;color:rgba(173,216,255,.6);padding:0 5px}.nebula-input .input:focus{border-color:var(--color-primary);box-shadow:0 5px 8px rgba(29,163,243,.3),0 10px 20px rgba(29,163,243,.2),0 15px 40px rgba(29,163,243,.15),0 20px 60px rgba(29,163,243,.1)}.nebula-input .input:focus~.user-label,.nebula-input .input:not(:placeholder-shown)~.user-label{transform:translateY(-38px);font-size:12px;color:#57c4ff;left:10px;-webkit-transform:translateY(-38px);-moz-transform:translateY(-38px);-ms-transform:translateY(-38px);-o-transform:translateY(-38px)}.nebula-particle{position:absolute;width:6px;height:6px;border-radius:50%;pointer-events:none;opacity:0;top:50%;filter:blur(.8px);mix-blend-mode:screen;transition:opacity .3s ease}.nebula-input .input:focus~.nebula-particle{animation:nebula-float 2s ease-out forwards}@keyframes nebula-float{0%{transform:translateY(-50%) scale(.8);opacity:0;background:#57c4ff}20%{opacity:.8}to{transform:translate(calc(var(--x) * 140px),calc(var(--y) * 35px)) scale(1.1);opacity:0;background:#9ee5ff}}