/*
 * gl-login-admin.css — Style màn đăng nhập WordPress (wp-login.php) theo tone Gamelade.
 * Nạp qua hook login_enqueue_scripts (chỉ trên trang login admin).
 * Nền tự chứa hoàn toàn bằng CSS (gradient + quầng sáng + lưới), không cần file ảnh.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --gl-brand-900:#1a0b3d;--gl-brand-800:#2a1257;--gl-brand-700:#572b96;
  --gl-brand-600:#6d33b8;--gl-brand-500:#7c3aed;--gl-brand-400:#a855f7;
  --gl-accent:#22d3ee;
  --gl-tint:#efe8fb;--gl-ink-900:#15111d;--gl-ink-600:#56525f;
  --gl-line:#e8e6ee;--gl-paper:#fff;
}

/* ---- Nền game: gradient nền + nhiều quầng sáng + lưới mờ ---- */
body.login{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh;
  color:var(--gl-ink-600);
  background:
    radial-gradient(900px 520px at 12% -10%, rgba(168,85,247,.55), transparent 60%),
    radial-gradient(760px 500px at 92% 8%, rgba(34,211,238,.28), transparent 55%),
    radial-gradient(680px 620px at 78% 108%, rgba(124,58,237,.50), transparent 60%),
    linear-gradient(150deg, #1a0b3d 0%, #2a1257 46%, #45207e 100%);
  background-attachment:fixed;
}
/* Lưới mờ phủ toàn màn hình */
body.login::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(1200px 700px at 50% 30%, #000 40%, transparent 85%);
          mask-image:radial-gradient(1200px 700px at 50% 30%, #000 40%, transparent 85%);
}
/* Vệt sáng chéo tinh tế phía trên */
body.login::after{
  content:"";position:fixed;left:-10%;top:-30%;width:60%;height:80%;z-index:0;
  pointer-events:none;transform:rotate(-16deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  filter:blur(6px);
}

#login{position:relative;z-index:2;width:360px;padding:6% 0 4%}

/* ---- Logo -> mark chữ G + tên site ---- */
.login h1{margin:0}
.login h1 a{
  background:none!important;
  width:auto;height:auto;text-indent:0;overflow:visible;
  font-size:0;line-height:1;margin-bottom:22px;
}
.login h1 a::before{
  content:"G";
  display:inline-grid;place-items:center;
  width:66px;height:66px;margin:0 auto 12px;
  border-radius:18px;
  background:linear-gradient(140deg, var(--gl-brand-500), var(--gl-brand-700));
  border:1px solid rgba(255,255,255,.30);
  color:#fff;font-weight:900;font-size:36px;
  box-shadow:0 18px 40px -14px rgba(124,58,237,.9), inset 0 1px 0 rgba(255,255,255,.35);
}
.login h1 a::after{
  content:"GAMELADE";
  display:block;color:#fff;font-weight:800;font-size:20px;letter-spacing:.04em;
  text-shadow:0 2px 20px rgba(124,58,237,.55);
}

/* ---- Thẻ form (glass) ---- */
.login form{
  background:rgba(255,255,255,.97);
  border:1px solid rgba(255,255,255,.6);
  border-radius:20px;
  padding:28px 26px 24px;
  box-shadow:
    0 30px 70px -24px rgba(10,4,25,.7),
    0 2px 0 rgba(255,255,255,.5) inset;
  margin-top:18px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.login label{color:var(--gl-ink-900);font-weight:700;font-size:13.5px}
.login form .input,
.login input[type=text],
.login input[type=password],
.login input[type=email]{
  border:1.5px solid var(--gl-line);border-radius:12px;
  padding:12px 14px;font-size:15px;color:var(--gl-ink-900);
  background:#fbfaff;box-shadow:none;transition:border-color .15s,box-shadow .15s,background .15s;
}
.login form .input:focus,
.login input[type=text]:focus,
.login input[type=password]:focus,
.login input[type=email]:focus{
  border-color:var(--gl-brand-500);background:#fff;
  box-shadow:0 0 0 4px var(--gl-tint);outline:0;
}
.login .button-primary,
.wp-core-ui .button-primary{
  background:linear-gradient(135deg, var(--gl-brand-500), var(--gl-brand-700))!important;
  border:0!important;border-radius:12px!important;
  height:48px;line-height:48px;padding:0 18px;
  font-weight:800;font-size:15px;text-shadow:none!important;letter-spacing:.01em;
  box-shadow:0 14px 30px -12px rgba(124,58,237,.75)!important;
  transition:filter .16s,transform .16s,box-shadow .16s;width:100%;
}
.login .button-primary:hover,
.wp-core-ui .button-primary:hover{
  filter:brightness(1.06);transform:translateY(-1px);
  box-shadow:0 18px 36px -12px rgba(124,58,237,.85)!important;
}
.login .button-primary:active,
.wp-core-ui .button-primary:active{transform:translateY(0)}
.login .forgetmenot label{font-weight:500;color:var(--gl-ink-600)}
input[type=checkbox]:checked{
  background:var(--gl-brand-700);border-color:var(--gl-brand-700);
}
input[type=checkbox]:checked::before{color:#fff}
input[type=checkbox]:focus{border-color:var(--gl-brand-500);box-shadow:0 0 0 3px var(--gl-tint)}

/* ---- Link dưới form (Quên mật khẩu, Về trang chủ) — chữ sáng trên nền tối ---- */
.login #nav,.login #backtoblog{text-align:center;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.login #nav a,
.login #backtoblog a{
  color:rgba(255,255,255,.9)!important;font-weight:600;font-size:13.5px;
  transition:color .15s;
}
.login #nav a:hover,
.login #backtoblog a:hover{color:#fff!important;text-decoration:underline}

/* ---- Thông báo lỗi/thành công ---- */
.login .message,.login #login_error,.login .notice{
  border-radius:12px;border-left-width:4px;font-size:13.5px;
  background:rgba(255,255,255,.97);backdrop-filter:blur(6px);
}
.login #login_error{border-left-color:#e23e6b}
.login .message{border-left-color:var(--gl-brand-500)}

/* ---- Nút social (Nextend) nếu hiện trên wp-login ---- */
.login .nsl-container{margin:8px 0 2px}

@media(max-width:420px){#login{width:90%;margin:0 auto}}

/* ============================================================
   HIỆU ỨNG — hiện đại, tương tác rê chuột (che dấu vết WP)
   ============================================================ */

/* Nền gradient "thở" nhẹ + theo con trỏ (biến --mx/--my do JS cập nhật) */
body.login{
  background:
    radial-gradient(760px 500px at var(--mx,50%) var(--my,18%), rgba(168,85,247,.42), transparent 60%),
    radial-gradient(900px 520px at 12% -10%, rgba(168,85,247,.45), transparent 60%),
    radial-gradient(760px 500px at 92% 8%, rgba(34,211,238,.26), transparent 55%),
    radial-gradient(680px 620px at 78% 108%, rgba(124,58,237,.50), transparent 60%),
    linear-gradient(150deg, #1a0b3d 0%, #2a1257 46%, #45207e 100%);
  background-attachment:fixed;
}

/* Quầng sáng trôi chậm */
@keyframes gl-float-a{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(3%,-2%,0)}}
body.login::before{animation:gl-float-a 18s ease-in-out infinite}

/* 2 khối sáng bay lơ lửng (đặt qua #login::before/::after để khỏi thêm DOM) */
#login::before,#login::after{
  content:"";position:fixed;z-index:0;pointer-events:none;border-radius:50%;
  filter:blur(48px);opacity:.55;
}
#login::before{
  width:280px;height:280px;left:6%;bottom:10%;
  background:radial-gradient(circle,rgba(124,58,237,.9),transparent 70%);
  animation:gl-orb1 14s ease-in-out infinite;
}
#login::after{
  width:220px;height:220px;right:8%;top:12%;
  background:radial-gradient(circle,rgba(34,211,238,.7),transparent 70%);
  animation:gl-orb2 16s ease-in-out infinite;
}
@keyframes gl-orb1{0%,100%{transform:translate(0,0)}50%{transform:translate(24px,-30px)}}
@keyframes gl-orb2{0%,100%{transform:translate(0,0)}50%{transform:translate(-28px,26px)}}

/* Card xuất hiện + spotlight theo con trỏ (--cx/--cy do JS cập nhật) */
@keyframes gl-rise{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.login form{
  position:relative;overflow:hidden;
  animation:gl-rise .55s cubic-bezier(.2,.7,.2,1) both;
  transition:transform .25s ease, box-shadow .25s ease;
}
.login form::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(240px 240px at var(--cx,50%) var(--cy,0%), rgba(124,58,237,.14), transparent 60%);
  opacity:0;transition:opacity .3s ease;
}
.login form:hover{
  transform:translateY(-3px);
  box-shadow:0 40px 90px -26px rgba(10,4,25,.78),0 2px 0 rgba(255,255,255,.5) inset;
}
.login form:hover::after{opacity:1}

/* Logo: hover nhấc + phát sáng */
.login h1 a{display:inline-block;transition:transform .25s ease}
.login h1 a:hover{transform:translateY(-2px)}
.login h1 a::before{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease}
.login h1 a:hover::before{
  transform:rotate(-6deg) scale(1.06);
  box-shadow:0 22px 48px -12px rgba(124,58,237,1),inset 0 1px 0 rgba(255,255,255,.4);
}

/* Input: nhấc nhẹ khi hover/focus */
.login input[type=text],
.login input[type=password],
.login input[type=email]{transition:border-color .15s,box-shadow .15s,background .15s,transform .15s}
.login input[type=text]:hover,
.login input[type=password]:hover,
.login input[type=email]:hover{border-color:#cbb7ef}
.login input[type=text]:focus,
.login input[type=password]:focus,
.login input[type=email]:focus{transform:translateY(-1px)}

/* Nút primary: vệt sáng quét khi hover */
.login .button-primary,.wp-core-ui #login .button-primary{position:relative;overflow:hidden}
.login .button-primary::before{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);transition:none;
}
.login .button-primary:hover::before{animation:gl-shine .8s ease}
@keyframes gl-shine{to{left:130%}}

/* Link dưới form: gạch chân trượt thay vì underline cứng */
.login #nav a,.login #backtoblog a{
  position:relative;text-decoration:none!important;padding-bottom:2px;
}
.login #nav a::after,.login #backtoblog a::after{
  content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;
  background:currentColor;transition:width .22s ease;
}
.login #nav a:hover::after,.login #backtoblog a:hover::after{width:100%}
.login #nav a:hover,.login #backtoblog a:hover{text-decoration:none!important}

/* Bỏ hẳn dấu vết WP: ẩn "Powered by", link ngôn ngữ mặc định gọn lại */
.login #language-switcher{margin-top:14px}
.login .privacy-policy-page-link,.login #login .message.register{opacity:.85}

/* Tôn trọng người dùng tắt animation */
@media(prefers-reduced-motion:reduce){
  body.login::before,#login::before,#login::after,.login form{animation:none!important}
  .login .button-primary:hover::before{animation:none!important}
}