/* Tela de login futurista dos escritórios (Bertoldi Gestão Jurídica) */
html,body.tela-login{background:#030812!important}
body.tela-login{position:relative;overflow-x:hidden;min-height:100vh}
.fx-aurora{position:fixed;inset:-20%;z-index:0;filter:blur(90px);opacity:.75;pointer-events:none}
.fx-aurora i{position:absolute;border-radius:50%;mix-blend-mode:screen;animation:fxFlutua 18s ease-in-out infinite alternate}
.fx-aurora i:nth-child(1){width:55vmax;height:55vmax;left:0;top:10%;background:radial-gradient(circle,#00e5ff 0%,transparent 65%)}
.fx-aurora i:nth-child(2){width:50vmax;height:50vmax;right:0;top:0;background:radial-gradient(circle,#7b2cff 0%,transparent 65%);animation-duration:22s;animation-delay:-6s}
.fx-aurora i:nth-child(3){width:45vmax;height:45vmax;left:25%;bottom:-5%;background:radial-gradient(circle,#ff2fb3 0%,transparent 62%);animation-duration:26s;animation-delay:-12s;opacity:.7}
.fx-aurora i:nth-child(4){width:35vmax;height:35vmax;right:15%;bottom:5%;background:radial-gradient(circle,#1f6fff 0%,transparent 65%);animation-duration:20s;animation-delay:-3s}
@keyframes fxFlutua{0%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,-4vh) scale(1.15)}100%{transform:translate(-5vw,5vh) scale(.95)}}
.fx-grade{position:fixed;left:-50%;right:-50%;bottom:-10%;height:60vh;z-index:0;pointer-events:none;
background-image:linear-gradient(rgba(0,229,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,.35) 1px,transparent 1px);
background-size:60px 60px;transform:perspective(420px) rotateX(62deg);transform-origin:center top;
-webkit-mask-image:linear-gradient(to bottom,transparent,#000 35%,#000 70%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 35%,#000 70%,transparent);
animation:fxCorre 3.5s linear infinite}
@keyframes fxCorre{to{background-position:0 60px,0 0}}
#fx-rede{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
body.tela-login .login-lado,body.tela-login .login-form{position:relative;z-index:2;background:transparent!important;background-image:none!important;box-shadow:none!important}
body.tela-login .login-lado::before,body.tela-login .login-lado::after,body.tela-login .login-form::before,body.tela-login .login-form::after{display:none!important}
body.tela-login .login-lado{display:flex;align-items:center;justify-content:center}
.fx-nucleo{position:relative;display:grid;place-items:center;width:min(440px,40vw);aspect-ratio:1}
.fx-anel{position:absolute;left:50%;top:50%;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);border-radius:50%;pointer-events:none}
.fx-anel.a1{--s:88%;border:1px solid rgba(0,229,255,.35);border-top-color:#00e5ff;border-right-color:transparent;animation:fxGira 9s linear infinite;box-shadow:0 0 30px rgba(0,229,255,.15) inset}
.fx-anel.a2{--s:74%;border:1px dashed rgba(180,120,255,.45);animation:fxGira 16s linear infinite reverse}
.fx-anel.a3{--s:100%;border:2px solid transparent;border-bottom-color:rgba(255,47,179,.7);border-left-color:rgba(255,47,179,.25);animation:fxGira 12s linear infinite}
@keyframes fxGira{to{transform:rotate(360deg)}}
body.tela-login .fx-nucleo .login-logo{position:relative;width:58%!important;max-width:none!important;height:auto;margin:0!important;
filter:drop-shadow(0 0 18px rgba(0,229,255,.55)) drop-shadow(0 0 42px rgba(123,44,255,.35));animation:fxSurge 1.6s cubic-bezier(.2,.8,.2,1) both,fxPulsa 5s ease-in-out 1.6s infinite}
@keyframes fxSurge{from{opacity:0;transform:scale(.85) translateY(14px)}to{opacity:1;transform:none}}
@keyframes fxPulsa{0%,100%{filter:drop-shadow(0 0 18px rgba(0,229,255,.55)) drop-shadow(0 0 42px rgba(123,44,255,.35))}50%{filter:drop-shadow(0 0 26px rgba(0,229,255,.85)) drop-shadow(0 0 70px rgba(255,47,179,.4))}}
body.tela-login .login-form > form{position:relative;box-shadow:0 0 0 1px rgba(0,229,255,.35),0 0 40px rgba(0,229,255,.25),0 0 90px rgba(123,44,255,.25)!important;animation:fxSurge 1.4s .3s cubic-bezier(.2,.8,.2,1) both}
body.tela-login .login-form a{position:relative}
@media (prefers-reduced-motion:reduce){.fx-aurora i,.fx-grade,.fx-anel,body.tela-login .login-logo,body.tela-login .login-form>form{animation:none!important}}
