/* =========================
   WRAP
========================= */
.login-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  animation:fadeIn .6s ease forwards;
}

/* =========================
   BOX
========================= */
.login-box{
  width:min(420px,100%);
  padding:26px;
  position:relative;
  border-radius:22px;
  animation:scaleUp .45s ease forwards;
}

@keyframes scaleUp{
  from{opacity:0;transform:scale(.96) translateY(10px)}
  to{opacity:1;transform:none}
}

/* =========================
   LOGO
========================= */
.login-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:22px;
  font-weight:900;
  margin-bottom:18px;
  animation:fadeUp .6s ease forwards;
}

.login-logo span{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:gradientMove 3s linear infinite;
}

@keyframes gradientMove{
  to{background-position:200% center}
}

/* =========================
   DESC
========================= */
.login-desc{
  text-align:center;
  color:var(--muted);
  font-size:13px;
  margin-bottom:18px;
  animation:fadeUp .7s ease forwards;
}

/* =========================
   FORM
========================= */
.login-form{
  display:grid;
  gap:14px;
  animation:fadeUp .8s ease forwards;
}

/* =========================
   FOOTER
========================= */
.login-footer{
  text-align:center;
  margin-top:16px;
  font-size:12px;
  color:var(--muted);
  animation:fadeUp .9s ease forwards;
}

/* =========================
   ANIMATIONS
========================= */
@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

/* =========================
   MOBILE OPTIMIZATION
========================= */
@media(max-width:520px){
  .login-box{
    padding:20px;
    border-radius:18px;
  }

  .login-logo{
    font-size:20px;
  }

  .login-desc{
    font-size:12px;
  }
}

/* =========================
   REDUCED MOTION (ACCESSIBILITY)
========================= */
@media (prefers-reduced-motion: reduce){
  *{
    animation:none !important;
    transition:none !important;
  }
}