:root{--ease-elastic: cubic-bezier(.68, -.6, .32, 1.6);--ease-squish: cubic-bezier(.25, 1, .5, 1);--color-primary-glitch: #FFD60A;--color-accent-glitch: #D500F9}.login-container{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:var(--md-sys-color-background);display:flex;justify-content:center;align-items:center;overflow:hidden;z-index:9999;perspective:1200px}.gooey-bg{position:absolute;width:100%;height:100%;filter:url(#goo);opacity:.6;pointer-events:none}.blob{position:absolute;border-radius:50%;filter:blur(40px);animation:blob-float 10s infinite alternate cubic-bezier(.45,.05,.55,.95)}.blob-1{width:400px;height:400px;background:var(--md-sys-color-primary);top:10%;left:10%;animation-duration:12s}.blob-2{width:350px;height:350px;background:var(--md-sys-color-primary-container);bottom:20%;right:10%;animation-duration:9s;animation-direction:alternate-reverse}.blob-3{width:200px;height:200px;background:#ff007a;top:40%;left:45%;animation:orbit 15s infinite linear}@keyframes blob-morph-dynamic{0%{border-radius:40% 60% 60% 40%/40% 40% 60% 60%;transform:translate(0) rotate(0) scale(1);background-color:var(--md-sys-color-primary)}25%{border-radius:50% 50% 30% 70%/50% 70% 30% 50%;transform:translate(30px,-40px) scale(1.15) rotate(45deg);background-color:#00ffd0}50%{border-radius:70% 30% 50% 50%/30% 30% 70% 70%;transform:translate(60px,60px) rotate(180deg) scale(.85);background-color:#ff007a}75%{border-radius:30% 70% 70% 30%/70% 50% 50% 30%;transform:translate(-40px,50px) scale(1.2) rotate(270deg);background-color:#d500f9}to{border-radius:40% 60% 60% 40%/40% 40% 60% 60%;transform:translate(0) rotate(360deg) scale(1);background-color:var(--md-sys-color-primary)}}.blob{animation:blob-morph-dynamic 12s infinite var(--ease-elastic) alternate;transition:background-color 2s ease}.blob-1{width:450px;height:450px;top:-5%;left:-5%;animation-duration:14s}.blob-2{width:400px;height:400px;bottom:-10%;right:-5%;animation-duration:18s;animation-direction:alternate-reverse}.blob-3{width:250px;height:250px;top:30%;left:40%;animation:blob-morph-dynamic 10s infinite var(--ease-elastic),orbit 25s infinite linear}@keyframes orbit{0%{transform:rotate(0) translate(150px) rotate(0)}to{transform:rotate(360deg) translate(150px) rotate(-360deg)}}@keyframes blob-float{0%{transform:translate(0)}to{transform:translate(50px,50px)}}.login-content{position:relative;z-index:10;width:90%;max-width:380px;display:flex;flex-direction:column;align-items:center;gap:40px}.brand-container{display:flex;flex-direction:column;align-items:flex-end;transform:rotate(-3deg);animation:title-bounce 2s infinite ease-in-out}.brand-title{font-family:Climate Crisis,display;font-size:4rem;color:var(--md-sys-color-primary);line-height:.9;text-transform:uppercase;text-align:center;text-shadow:4px 4px 0 #3b0a45,8px 8px 0 rgba(0,0,0,.2)}.brand-subtitle{font-family:Chathura,sans-serif;font-weight:700;font-size:2.5rem;color:var(--md-sys-color-on-surface-variant);letter-spacing:1px;margin-top:-10px;line-height:.8}@keyframes title-bounce{0%,to{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(2deg) translateY(-10px) scale(1.05)}}.input-pill-container{position:relative;width:100%;height:80px;background:#ffffff0d;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:999px;border:3px solid rgba(255,255,255,.1);box-shadow:0 10px 30px #0000004d;display:flex;align-items:center;padding:0 24px;transition:all .4s var(--ease-elastic);transform-origin:center}.input-pill-container:focus-within{transform:scale(1.1);border-color:var(--md-sys-color-primary);background:#1e102ee6;box-shadow:0 20px 50px #ffd60a40}.input-pill-container.error-shake{animation:elastic-shake .6s var(--ease-elastic);border-color:var(--md-sys-color-error)}@keyframes elastic-shake{0%,to{transform:translate(0) scale(1)}25%{transform:translate(-15px) scale(.95) rotate(-5deg)}50%{transform:translate(15px) scale(1.05) rotate(5deg)}75%{transform:translate(-10px) scale(.98)}}.pill-icon{font-size:32px;color:var(--md-sys-color-on-surface-variant);margin-right:16px;transition:transform .3s cubic-bezier(.5,1.5,.5,1)}.input-pill-container:focus-within .pill-icon{color:var(--md-sys-color-primary);transform:scale(1.3) rotate(-15deg)}.pill-input{flex:1;background:transparent;border:none;font-size:1.5rem;color:var(--md-sys-color-on-surface);outline:none;font-weight:700;letter-spacing:4px;height:100%}.pill-input::placeholder{font-size:1rem;letter-spacing:normal;font-weight:400;color:#ffffff4d}.action-btn{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);border:none;border-radius:24px;padding:16px 40px;font-size:1.2rem;font-weight:800;cursor:pointer;box-shadow:0 10px #b39200,0 20px 20px #0000004d;transition:all .2s var(--ease-squish);transform:translateY(0);opacity:0;animation:pop-up-enter .6s var(--ease-elastic) .5s forwards}.action-btn:active{transform:translateY(10px);box-shadow:0 0 #b39200,0 0 #0000}.action-btn:hover{filter:brightness(1.1);transform:translateY(-5px);box-shadow:0 15px #b39200,0 25px 30px #0000004d}@keyframes pop-up-enter{0%{opacity:0;transform:translateY(100px) scale(0)}to{opacity:1;transform:translateY(0) scale(1)}}.login-container.exiting .brand-container{animation:suck-in .6s ease-in forwards}.login-container.exiting .input-pill-container{animation:suck-in .6s ease-in .1s forwards}.login-container.exiting .action-btn{animation:suck-in .6s ease-in .2s forwards}.login-container.exiting .gooey-bg{opacity:0;transition:opacity .5s}.supernova-overlay{position:absolute;top:50%;left:50%;width:20px;height:20px;background:#fff;border-radius:50%;transform:translate(-50%,-50%) scale(0);z-index:100;pointer-events:none}.login-container.exiting .supernova-overlay{animation:supernova-explode .8s cubic-bezier(.8,0,.2,1) forwards .4s}@keyframes suck-in{0%{transform:scale(1) rotate(0);opacity:1}to{transform:scale(0) rotate(720deg);opacity:0}}@keyframes supernova-explode{0%{transform:translate(-50%,-50%) scale(0);opacity:1}50%{opacity:1}to{transform:translate(-50%,-50%) scale(150);opacity:0}}@media(max-width:600px){.gooey-bg{filter:none;opacity:.3}.blob{filter:blur(60px);animation:blob-float 15s infinite alternate ease-in-out}.blob-1{width:250px;height:250px}.blob-2{width:200px;height:200px}.blob-3{display:none}.brand-title{font-size:3rem}.brand-subtitle{font-size:1.8rem}.login-content{gap:30px;width:85%}.input-pill-container{height:70px;padding:0 20px}.pill-input{font-size:1.2rem}.pill-icon{font-size:28px}.action-btn{width:100%;padding:14px 0;font-size:1.1rem}@keyframes title-bounce{0%,to{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(1deg) translateY(-5px)}}}
