/* ============================================================
   login.css — ดีไซน์หน้า Login "Aurora Glass"
   ใช้ตัวแปรสีจาก app.css (--brand, --brand2, --line, --surface,
   --muted, --ink, --bg, --infobg, --shadow) · รองรับ Light/Dark
   (data-theme) + prefers-reduced-motion + responsive
   โหลดทับ app.css (อยู่ใน $pageCss จึงมาหลังสุด) — ไม่แตะ app.css
   ============================================================ */

/* ---------- พื้นหลังออโรรา ---------- */
.login-wrap{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1100px 520px at 15% -5%, rgba(46,134,193,.20), transparent 60%),
    radial-gradient(900px 500px at 110% 20%, rgba(124,58,237,.14), transparent 55%),
    linear-gradient(135deg, var(--bg), var(--infobg));
}

/* ชั้นตกแต่ง (ออโรรา + ประกาย) อยู่หลังการ์ด กดผ่านทะลุได้ */
.login-aurora{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.login-blob{ position:absolute; border-radius:50%; filter:blur(48px); will-change:transform; }
.login-blob.b1{ width:340px; height:340px; left:-60px; top:8%;    background:radial-gradient(circle,#4285F4,transparent 70%); opacity:.55; animation:lgDrift 15s ease-in-out infinite; }
.login-blob.b2{ width:300px; height:300px; right:-40px; top:4%;    background:radial-gradient(circle,#EA4335,transparent 70%); opacity:.35; animation:lgDrift 18s ease-in-out infinite reverse; }
.login-blob.b3{ width:320px; height:320px; left:28%; bottom:-90px; background:radial-gradient(circle,#34A853,transparent 70%); opacity:.32; animation:lgDrift 20s ease-in-out infinite; }
.login-blob.b4{ width:260px; height:260px; right:18%; bottom:-50px; background:radial-gradient(circle,#FBBC05,transparent 70%); opacity:.30; animation:lgDrift 13s ease-in-out infinite reverse; }
@keyframes lgDrift{ 0%,100%{ transform:translate(0,0) scale(1); } 33%{ transform:translate(40px,-30px) scale(1.1); } 66%{ transform:translate(-30px,25px) scale(.95); } }

.login-spark{ position:absolute; width:7px; height:7px; border-radius:50%; opacity:0; background:#fff; box-shadow:0 0 8px #fff; }
.login-spark.s1{ left:20%; top:30%;    animation:lgTwinkle 3s   ease-in-out infinite; }
.login-spark.s2{ right:22%; top:34%;   background:#FBBC05; box-shadow:0 0 8px #FBBC05; animation:lgTwinkle 3.6s ease-in-out .6s infinite; }
.login-spark.s3{ left:30%; bottom:22%; background:#4285F4; box-shadow:0 0 8px #4285F4; animation:lgTwinkle 4.2s ease-in-out 1.1s infinite; }
.login-spark.s4{ right:28%; bottom:28%;background:#EA4335; box-shadow:0 0 8px #EA4335; animation:lgTwinkle 3.2s ease-in-out 1.6s infinite; }
@keyframes lgTwinkle{ 0%,100%{ opacity:0; transform:scale(.5); } 50%{ opacity:1; transform:scale(1.2); } }

/* ---------- การ์ดกระจกฝ้า (glassmorphism) ---------- */
.login-card{
  position:relative; z-index:1;
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(20px) saturate(1.3); backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid rgba(255,255,255,.7);
  border-radius:22px; padding:40px 34px 30px;
  animation:lgCardIn .8s cubic-bezier(.2,.8,.2,1) both;
}
[data-theme="dark"] .login-card{ background:rgba(24,34,44,.5); border-color:rgba(255,255,255,.09); }
@keyframes lgCardIn{ from{ opacity:0; transform:translateY(26px) scale(.97); } to{ opacity:1; transform:none; } }

/* ---------- โลโก้ลอย + เรืองแสง ---------- */
.login-logo{
  position:relative; width:74px; height:74px; border-radius:20px; margin:0 auto 16px; font-size:30px;
  box-shadow:0 12px 26px rgba(1,61,103,.34); animation:lgFloat 4s ease-in-out infinite;
}
.login-logo::after{
  content:""; position:absolute; inset:-6px; border-radius:24px; z-index:-1;
  background:linear-gradient(135deg,var(--brand),var(--brand2)); filter:blur(16px); opacity:.5;
  animation:lgGlow 4s ease-in-out infinite;
}
@keyframes lgFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
@keyframes lgGlow{ 0%,100%{ opacity:.35; } 50%{ opacity:.65; } }

/* ---------- หัวข้อไล่สีแบรนด์ ---------- */
.login-card h1{
  font-size:1.6rem; line-height:1.25;
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- ปุ่ม Google ---------- */
.gbtn{
  position:relative; overflow:hidden; border-radius:14px;
  font-size:1.28rem; font-weight:700; margin-top:6px;
  transition:transform .18s ease, box-shadow .25s ease, border-color .2s ease;
}
.gbtn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(66,133,244,.28); border-color:var(--brand2); }
.gbtn:active{ transform:translateY(0); }
.gbtn .glogo{ flex:0 0 auto; transition:transform .5s ease; }
.gbtn:hover .glogo{ transform:rotate(360deg); }
.gbtn .glead{ color:var(--ink); font-weight:700; }

/* คำว่า Google — ไล่สีตามโลโก้ (G ฟ้า · o แดง · o เหลือง · g ฟ้า · l เขียว · e แดง) */
.gword{ font-weight:800; letter-spacing:.2px; }
.gword span{ display:inline-block; transition:transform .25s ease; }
.gword .c-b{ color:#4285F4; } .gword .c-r{ color:#EA4335; } .gword .c-y{ color:#FBBC05; } .gword .c-g{ color:#34A853; }
.gbtn:hover .gword span{ animation:lgPop .5s ease; }
.gbtn:hover .gword span:nth-child(2){ animation-delay:.05s; }
.gbtn:hover .gword span:nth-child(3){ animation-delay:.10s; }
.gbtn:hover .gword span:nth-child(4){ animation-delay:.15s; }
.gbtn:hover .gword span:nth-child(5){ animation-delay:.20s; }
.gbtn:hover .gword span:nth-child(6){ animation-delay:.25s; }
@keyframes lgPop{ 0%,100%{ transform:translateY(0); } 40%{ transform:translateY(-6px); } }

/* ประกายแสงวิ่งผ่านปุ่มตอน hover */
.gbtn::before{
  content:""; position:absolute; top:0; left:-140%; width:60%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg); pointer-events:none;
}
.gbtn:hover::before{ animation:lgShine .9s ease; }
@keyframes lgShine{ from{ left:-140%; } to{ left:160%; } }

/* ---------- responsive ---------- */
@media (max-width:520px){
  .login-card{ padding:34px 22px 26px; }
  .login-card h1{ font-size:1.36rem; }
  .gbtn{ font-size:1.14rem; }
}

/* ---------- เคารพผู้ใช้ที่ตั้งค่าลดการเคลื่อนไหว ---------- */
@media (prefers-reduced-motion:reduce){
  .login-blob, .login-spark, .login-logo, .login-logo::after,
  .login-card, .gbtn::before, .gbtn .gword span{ animation:none !important; }
}