/* ================= TELA DE LOGIN 3D ================= */
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}

.auth{position:relative;z-index:2;min-height:100vh;min-height:100dvh;display:grid;place-items:center;
  padding:32px 16px;overflow:hidden}

/* luzes laranja flutuando atrás do card */
.orb{position:fixed;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:1;opacity:.55}
.orb.o1{width:380px;height:380px;left:calc(50% - 360px);top:calc(50% - 300px);background:radial-gradient(circle,var(--accent),transparent 65%);animation:orb1 14s ease-in-out infinite}
.orb.o2{width:300px;height:300px;left:calc(50% + 60px);top:calc(50% + 40px);background:radial-gradient(circle,var(--accent-2),transparent 65%);opacity:.35;animation:orb2 18s ease-in-out infinite}
@keyframes orb1{50%{transform:translate(80px,60px) scale(1.15)}}
@keyframes orb2{50%{transform:translate(-90px,-50px) scale(.9)}}

/* cena 3D */
.scene{position:relative;z-index:2;width:min(410px,100%);perspective:1600px;
  animation:enter 1.1s cubic-bezier(.16,1,.3,1) both}
@keyframes enter{from{opacity:0;transform:translateY(60px) rotateX(28deg) scale(.92)}to{opacity:1;transform:none}}
.float{transform-style:preserve-3d;animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px)}}
.tilt{transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.22,1,.36,1)}
.tilt.live{transition:transform .12s linear}

.card3d{display:grid;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.65,0,.25,1)}
.card3d.flip{transform:rotateY(180deg)}

/* cada lado do card (o vidro fica no .shell para poder "montar" no scroll da tela inicial) */
.face{grid-area:1/1;position:relative;transform-style:preserve-3d;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  padding:34px 30px 28px;border-radius:26px;
  display:flex;flex-direction:column}
.shell{position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,rgba(38,38,42,.92),rgba(16,16,19,.94));
  box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06) inset,0 1px 0 rgba(255,255,255,.08) inset;
  opacity:var(--shell,1);transform:scale(calc(.82 + .18 * var(--shell,1)))}
/* peças que voam e se encaixam (--t vai de 0 a 1; sem JS fica 1 = no lugar) */
.piece{opacity:var(--t,1);
  transform:translate3d(calc((1 - var(--t,1)) * var(--fx,0px)),calc((1 - var(--t,1)) * var(--fy,0px)),calc((1 - var(--t,1)) * var(--fz,0px))) rotate(calc((1 - var(--t,1)) * var(--fr,0deg)))}
.d1.piece{transform:translate3d(calc((1 - var(--t,1)) * var(--fx,0px)),calc((1 - var(--t,1)) * var(--fy,0px)),calc(60px + (1 - var(--t,1)) * var(--fz,0px))) rotate(calc((1 - var(--t,1)) * var(--fr,0deg)))}
.d2.piece{transform:translate3d(calc((1 - var(--t,1)) * var(--fx,0px)),calc((1 - var(--t,1)) * var(--fy,0px)),calc(36px + (1 - var(--t,1)) * var(--fz,0px))) rotate(calc((1 - var(--t,1)) * var(--fr,0deg)))}
.d3.piece{transform:translate3d(calc((1 - var(--t,1)) * var(--fx,0px)),calc((1 - var(--t,1)) * var(--fy,0px)),calc(22px + (1 - var(--t,1)) * var(--fz,0px))) rotate(calc((1 - var(--t,1)) * var(--fr,0deg)))}
.face.back{transform:rotateY(180deg)}
/* borda de luz girando */
.face::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:var(--shell,1);
  background:conic-gradient(from var(--ang),transparent 0 62%,rgba(var(--accent-rgb),.95) 76%,rgba(255,200,160,.9) 80%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;animation:spinb 5s linear infinite}
@keyframes spinb{to{--ang:360deg}}
/* brilho que acompanha o mouse */
.face::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.07),transparent 45%)}

/* profundidade: os itens "saem" do card */
.d1,.d2,.d3{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.d1{transform:translateZ(60px)}
.d2{transform:translateZ(36px)}
.d3{transform:translateZ(22px)}

.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.auth-brand .brand-ic{width:48px;height:48px;border-radius:14px}
.auth-brand .brand-ic svg{width:22px;height:22px}
.auth-brand b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.2px}
.auth-brand small{display:block;font-size:10.5px;letter-spacing:1.6px;color:var(--dim);margin-top:3px;text-transform:uppercase;font-weight:600}
.auth-brand .pill{margin-left:auto}

.face h1{font-size:25px;font-weight:800;letter-spacing:-.6px;line-height:1.15}
.face h1 span{color:var(--accent-2)}
.face .sub{color:var(--muted);font-size:13.5px;margin:6px 0 22px;line-height:1.5}

.fld{position:relative;margin-bottom:12px}
.fld > svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--dim);pointer-events:none;transition:color .2s}
.fld input{width:100%;height:50px;border-radius:14px;padding:0 46px 0 45px;font-size:14.5px;outline:0;
  background:rgba(255,255,255,.045);border:1px solid var(--line-2);transition:border-color .2s,background .2s,box-shadow .2s}
.fld input::placeholder{color:var(--dim)}
.fld input:focus{border-color:rgba(var(--accent-rgb),.6);background:rgba(255,255,255,.07);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.12)}
.fld input:focus ~ svg,.fld:focus-within > svg{color:var(--accent-2)}
.eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--dim)}
.eye:hover{color:#fff}
.eye svg{width:17px;height:17px}

.auth .btn-go{width:100%;height:50px;border-radius:14px;font-size:14.5px;margin-top:6px}
.or{display:flex;align-items:center;gap:12px;color:var(--dim);font-size:12px;margin:18px 0 14px;text-transform:uppercase;letter-spacing:1.4px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line-2)}
.gwrap{min-height:44px;display:flex;justify-content:center}
.gbtn{width:100%;height:46px;border-radius:999px;background:#fff;color:#1f1f1f;font-weight:600;font-size:14px;
  display:flex;align-items:center;justify-content:center;gap:10px;transition:filter .2s,transform .15s}
.gbtn:hover{filter:brightness(.94)}
.gbtn:active{transform:scale(.98)}
.gbtn svg{width:18px;height:18px}
.swap{text-align:center;color:var(--muted);font-size:13.5px;margin-top:20px}
.swap button,.swap a{color:var(--accent-2);font-weight:600;padding:2px 4px;border-radius:6px}
.swap button:hover,.swap a:hover{text-decoration:underline}
.err{color:#ff8986;font-size:12.5px;min-height:18px;margin:2px 2px 4px;line-height:1.4}
.info-box{background:rgba(255,255,255,.04);border:1px solid var(--line-2);border-radius:14px;padding:16px;color:var(--muted);font-size:13px;line-height:1.6}
.info-box code{font-family:'JetBrains Mono',monospace;font-size:12px;background:rgba(255,255,255,.08);color:#fff;padding:1px 6px;border-radius:6px}
.info-box ol{padding-left:18px;display:grid;gap:6px}

.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{20%,80%{translate:-4px 0}30%,50%,70%{translate:7px 0}40%,60%{translate:-7px 0}}

.foot-link{position:relative;z-index:2;text-align:center;margin-top:22px;font-size:12.5px;color:var(--dim)}
.foot-link a{color:var(--muted)}
.foot-link a:hover{color:#fff}

@media (max-width:440px){
  .face{padding:28px 20px 22px;border-radius:22px}
  .face h1{font-size:22px}
  .d1:not(.piece){transform:translateZ(30px)} .d2:not(.piece){transform:translateZ(18px)} .d3:not(.piece){transform:translateZ(10px)}
}