/* =====================================================================
   ORBIS Login v21 — Orbit motion
   ระบบวงโคจรเคลื่อนไหว + ลำดับการปรากฏ + feedback ตอนกดเข้าสู่ระบบ
   เคลื่อนไหวด้วย transform / opacity / SVG animateMotion และเคารพ prefers-reduced-motion
   ===================================================================== */
:root{
  --lv-ease: cubic-bezier(.22,1,.36,1);
  --lv-spring: cubic-bezier(.34,1.4,.64,1);
  --lv-orbit: #8b8cff;
  --lv-ink: #080738;
}

/* ---------- ท้องฟ้า: ดาวระยิบ + ดาวตก ---------- */
.lv21-stars{
  position:absolute; inset:-20%;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1px 1px at 32% 72%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.4px 1.4px at 58% 28%, rgba(201,202,255,.9), transparent 60%),
    radial-gradient(1px 1px at 76% 64%, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(1.2px 1.2px at 88% 14%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1px 1px at 46% 90%, rgba(201,202,255,.7), transparent 60%);
  background-size: 340px 340px;
  opacity:.55;
  animation: lv21Drift 90s linear infinite, lv21Twinkle 5s ease-in-out infinite alternate;
}
.lv21-stars-2{
  background-size: 520px 520px; opacity:.35;
  animation: lv21Drift 150s linear infinite reverse, lv21Twinkle 7s ease-in-out 1.5s infinite alternate;
}
.lv21-comet{
  position:absolute; top:12%; left:-20%; width:180px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.85));
  transform: rotate(18deg); opacity:0;
  animation: lv21Comet 11s var(--lv-ease) 2.4s infinite;
}
@keyframes lv21Drift{to{transform:translate3d(-340px,-170px,0)}}
@keyframes lv21Twinkle{from{opacity:.25}to{opacity:.6}}
@keyframes lv21Comet{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(18deg)}
  4%{opacity:1}
  12%{opacity:0;transform:translate3d(85vw,28vw,0) rotate(18deg)}
  100%{opacity:0;transform:translate3d(85vw,28vw,0) rotate(18deg)}
}

/* ---------- ระบบวงโคจรในแผงแบรนด์ ---------- */
.modern-login-v2 .login-v2-brand{overflow:hidden;isolation:isolate}
.modern-login-v2 .login-v2-brand::after{display:none !important} /* แทนวงแหวนนิ่งเดิม */
.lv21-orbit{
  position:absolute; z-index:0; pointer-events:none;
  width:560px; height:560px; right:-190px; bottom:-200px;
  transform: translate3d(calc(var(--login-pointer-x,0) * -16px), calc(var(--login-pointer-y,0) * -12px), 0);
  transition: transform 1.2s var(--lv-ease);
}
.lv21-orbit svg{width:100%;height:100%;overflow:visible;display:block}
.lv21-ring{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.2;stroke-dasharray:100;stroke-dashoffset:100;
  animation: lv21Draw 1.6s var(--lv-ease) both}
.lv21-ring.r2{stroke:rgba(201,202,255,.28);stroke-dasharray:1.2 2.6;stroke-dashoffset:0;opacity:0;animation:lv21Fade 1.2s ease .7s both}
.lv21-ring.r1{animation-delay:.35s}
.lv21-ring.r3{animation-delay:.55s}
.lv21-core{transform-box:fill-box;transform-origin:center;animation: lv21CoreIn 1.2s var(--lv-spring) .25s both, lv21Breathe 6s ease-in-out 1.6s infinite}
.lv21-halo{transform-box:fill-box;transform-origin:center;animation: lv21Fade 1.4s ease .3s both, lv21Breathe 6s ease-in-out 1.6s infinite}
.lv21-planet{opacity:0;animation:lv21Fade .8s ease both}
.lv21-planet.p1{animation-delay:1.2s}
.lv21-planet.p2{animation-delay:1.45s}
.lv21-planet.p3{animation-delay:1.7s}
@keyframes lv21Draw{to{stroke-dashoffset:0}}
@keyframes lv21Fade{from{opacity:0}to{opacity:1}}
@keyframes lv21CoreIn{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
@keyframes lv21Breathe{50%{transform:scale(1.07)}}

/* ข้อความให้อยู่เหนือวงโคจร */
.modern-login-v2 .login-v2-brand-top,
.modern-login-v2 .login-v2-brand-copy,
.modern-login-v2 .login-v2-brand-meta{position:relative;z-index:1}

/* ---------- ลำดับการปรากฏเมื่อเปิดหน้า ---------- */
@media (prefers-reduced-motion: no-preference){
  .modern-login-v2 .login-v2-frame{animation: lv21FrameIn .95s var(--lv-ease) both !important}
  .lv21-in{animation: lv21Rise .7s var(--lv-ease) both; animation-delay: var(--d, 0s)}
  .modern-login-v2 .login-v2-logo.lv21-in{animation-name: lv21Pop; animation-timing-function: var(--lv-spring)}
  .lv21-word{display:inline-block;animation: lv21WordUp .8s var(--lv-ease) both; animation-delay: calc(.45s + var(--i,0) * 70ms)}
  .modern-login-v2 .login-v2-divider::before,
  .modern-login-v2 .login-v2-divider::after{transform-origin:center;animation: lv21Line .8s var(--lv-ease) .62s both}
  .modern-login-v2 .login-v2-divider::before{transform-origin:right center}
  .modern-login-v2 .login-v2-divider::after{transform-origin:left center}
}
@keyframes lv21FrameIn{from{opacity:0;transform:translate3d(0,28px,0) scale(.97)}to{opacity:1}}
@keyframes lv21Rise{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes lv21Pop{from{opacity:0;transform:scale(.6) rotate(-10deg)}to{opacity:1;transform:none}}
@keyframes lv21WordUp{from{opacity:0;transform:translate3d(0,.55em,0) rotate(3deg);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes lv21Line{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- Interaction ---------- */
/* ช่องกรอก: ไอคอนขยับ + แสงไล่ตามขอบเมื่อโฟกัส */
.modern-login-v2 .login-v2-input>.bi{transition:color .2s ease, transform .35s var(--lv-spring)}
.modern-login-v2 .login-v2-input:focus-within>.bi{color:var(--lv-orbit);transform:translateY(-50%) scale(1.15)}
.modern-login-v2 .login-v2-input input:focus{border-color:var(--lv-orbit) !important;box-shadow:0 0 0 4px rgba(139,140,255,.18) !important}
.modern-login-v2 .login-v2-field > span{transition:color .2s ease}
.modern-login-v2 .login-v2-field:focus-within > span{color:var(--lv-ink)}
.modern-login-v2 .login-v2-input.has-toggle input{padding-right:46px}
.lv21-eye{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border:0; border-radius:10px; background:transparent; color:#9aa1ad;
  display:grid; place-items:center; cursor:pointer; font-size:16px;
  transition:background-color .15s ease, color .15s ease, transform .2s var(--lv-spring);
}
.lv21-eye:hover{background:#f1f2f8;color:var(--lv-ink)}
.lv21-eye:active{transform:translateY(-50%) scale(.9)}
.lv21-caps{
  display:flex; align-items:center; gap:6px; margin-top:2px; color:#a2620a; font-size:12px; font-weight:600;
  max-height:0; opacity:0; overflow:hidden; transition:max-height .25s var(--lv-ease), opacity .2s ease;
}
.lv21-caps.is-on{max-height:24px;opacity:1}

/* ปุ่ม Google: แสงกวาดผ่านเมื่อชี้ */
.modern-login-v2 .login-v2-google{position:relative;overflow:hidden}
.modern-login-v2 .login-v2-google::after{
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:50%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(139,140,255,.14), transparent);
  transform:skewX(-18deg);
}
.modern-login-v2 .login-v2-google:hover::after{animation: lv21Sheen .9s var(--lv-ease)}
.modern-login-v2 .login-v2-google>.bi{transition:transform .25s var(--lv-ease), color .2s ease}
.modern-login-v2 .login-v2-google:hover>.bi{transform:translateX(3px);color:var(--lv-ink)}
@keyframes lv21Sheen{to{left:130%}}

/* ปุ่มเข้าสู่ระบบ */
.modern-login-v2 .login-v2-submit{position:relative;overflow:hidden}
.modern-login-v2 .login-v2-submit .lv21-spin{
  width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation: lv21Spin .7s linear infinite; display:none;
}
.modern-login-v2 .login-v2-submit.is-loading .lv21-spin{display:inline-block}
.modern-login-v2 .login-v2-submit.is-loading .bi{display:none}
@keyframes lv21Spin{to{transform:rotate(360deg)}}

/* ข้อผิดพลาด: การ์ดสั่นเบา ๆ หนึ่งครั้ง */
.lv21-shake{animation: lv21Shake .5s cubic-bezier(.36,.07,.19,.97) .9s both}
@keyframes lv21Shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}

/* ---------- กำลังเข้าสู่ระบบ: วงโคจรขยาย การ์ดหายใจออก ---------- */
.lv21-launching .lv21-orbit{transform:scale(1.12);transition:transform 1.4s var(--lv-ease)}
.lv21-launching .lv21-ring{stroke:rgba(201,202,255,.5)}
.lv21-launching .lv21-halo{animation: lv21Glow 1.2s ease-in-out infinite alternate}
.lv21-launching .login-v2-auth-inner > *:not(.login-v2-actions){opacity:.55;transition:opacity .4s ease}
.lv21-launching .login-v2-frame{box-shadow:0 30px 110px rgba(139,140,255,.35) !important}
@keyframes lv21Glow{to{opacity:.55;transform:scale(1.18)}}

/* ---------- มือถือ ---------- */
@media (max-width:800px){
  .lv21-orbit{width:420px;height:420px;right:-170px;bottom:auto;top:-150px}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .lv21-stars,.lv21-comet,.lv21-core,.lv21-halo,.lv21-planet,.lv21-ring{animation:none !important}
  .lv21-ring{stroke-dashoffset:0}
  .lv21-ring.r2,.lv21-planet{opacity:1}
  .lv21-comet{display:none}
  .lv21-shake{animation:none}
}