/* ============================================================
   VeilNet — animated login / auth page
   Depends on styles.css for tokens, fonts, buttons, backgrounds
   ============================================================ */

.auth {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}

/* ---------- LEFT: animated brand panel ---------- */
.auth-aside {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(32px, 4vw, 56px);
  border-right: 1px solid var(--border);
  background:
    radial-gradient(60% 50% at 20% 15%, rgba(var(--accent-rgb), 0.18), transparent 70%),
    radial-gradient(50% 50% at 90% 90%, rgba(24,184,255,0.16), transparent 70%);
}
.auth-aside .brand { position: relative; z-index: 2; }

.auth-aside-mid { position: relative; z-index: 2; display: grid; place-items: center; flex: 1; }
.auth-orbit { position: relative; width: min(340px, 70%); aspect-ratio: 1; display: grid; place-items: center; }

.auth-aside-foot { position: relative; z-index: 2; }
.auth-quote { font-family: var(--font-head); font-size: 1.25rem; line-height: 1.5; max-width: 420px; }
.auth-quote .accent { color: var(--accent); }
.auth-cite { color: var(--muted); margin-top: 14px; font-size: .92rem; display: flex; align-items: center; gap: 10px; }

/* big animated lock that "locks" */
.lock-stage { position: relative; z-index: 3; display: grid; place-items: center; }
.lock-glow {
  position: absolute; width: 70%; height: 70%; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.45), transparent 65%);
  filter: blur(45px); animation: breathe 5s ease-in-out infinite;
}
.lock-svg { color: var(--accent); filter: drop-shadow(0 0 18px rgba(var(--accent-rgb), 0.5)); }
.lock-shackle { transform-origin: 12px 11px; animation: lockClick 4s var(--ease) infinite; }
@keyframes lockClick {
  0%, 40% { transform: translateY(-3px); }
  55%, 100% { transform: translateY(0); }
}

/* concentric rings */
.auth-ring { position: absolute; border: 1px solid rgba(var(--accent-rgb), 0.25); border-radius: 50%; }
.auth-ring.r1 { width: 60%; height: 60%; animation: spin 18s linear infinite; }
.auth-ring.r1::before { content:''; position:absolute; top:-4px; left:50%; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow: var(--glow); }
.auth-ring.r2 { width: 82%; height: 82%; border-style: dashed; animation: spin 26s linear infinite reverse; }
.auth-ring.r3 { width: 104%; height: 104%; animation: spin 36s linear infinite; }
.auth-ring.r3::before { content:''; position:absolute; bottom:-4px; left:40%; width:8px; height:8px; border-radius:50%; background:var(--accent-2); box-shadow:0 0 24px var(--accent-2); }

/* ---------- RIGHT: form panel ---------- */
.auth-main {
  position: relative;
  display: grid; place-items: center;
  padding: clamp(28px, 5vw, 48px);
}
.auth-topbar {
  position: absolute; top: 24px; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(28px, 5vw, 48px);
}
.auth-card {
  width: 100%; max-width: 420px;
  animation: cardIn .7s var(--ease) both;
}
@keyframes cardIn { from { opacity: 0; transform: translateY(28px); } }

.auth-head { margin-bottom: 30px; }
.auth-head h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 8px; }
.auth-head p { color: var(--muted); }
.auth-head a { color: var(--accent); font-weight: 600; }

/* social buttons */
.social-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.social-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px; border-radius: 12px; font-family: var(--font-head); font-weight: 500; font-size: .92rem;
  background: var(--surface); border: 1px solid var(--border-hi); color: var(--fg); cursor: pointer;
  transition: transform .25s var(--ease-spring), border-color .3s, background .3s;
}
.social-btn:hover { transform: translateY(-2px); border-color: var(--accent); background: var(--surface-2); }

.divider { display: flex; align-items: center; gap: 14px; color: var(--muted-2); font-size: .82rem; margin: 22px 0; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* fields */
.field { margin-bottom: 18px; }
.field-label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: 8px; font-family: var(--font-head); font-weight: 500; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .lead-icon { position: absolute; left: 14px; color: var(--muted-2); display: grid; place-items: center; pointer-events: none; transition: color .25s; }
.field input {
  width: 100%; padding: 14px 14px 14px 44px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border-hi); color: var(--fg);
  font-family: var(--font-body); font-size: .98rem; outline: none;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.field input::placeholder { color: var(--muted-2); }
.field input:focus { border-color: var(--accent); background: var(--surface-2); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.14); }
.field input:focus + .lead-icon, .input-wrap:focus-within .lead-icon { color: var(--accent); }
.pw-toggle {
  position: absolute; right: 10px; display: grid; place-items: center; width: 34px; height: 34px;
  background: none; border: 0; color: var(--muted-2); cursor: pointer; border-radius: 8px; transition: color .25s;
}
.pw-toggle:hover { color: var(--accent); }

/* error / validation */
.field.invalid input { border-color: var(--accent-3); box-shadow: 0 0 0 4px rgba(124,92,255,0.14); }
[data-theme="light"] .field.invalid input { border-color: #d23; box-shadow: 0 0 0 4px rgba(221,51,51,0.12); }
.field-error { display: none; color: #ff7a90; font-size: .8rem; margin-top: 6px; }
.field.invalid .field-error { display: block; animation: shake .4s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }

.field-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; font-size: .88rem; }
.remember { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); cursor: pointer; user-select: none; }
.remember input { position: absolute; opacity: 0; width: 0; height: 0; }
.check {
  width: 19px; height: 19px; border-radius: 6px; border: 1px solid var(--border-hi);
  background: var(--surface); display: grid; place-items: center; transition: background .2s, border-color .2s;
}
.check svg { width: 12px; height: 12px; color: #03110a; opacity: 0; transform: scale(.5); transition: .2s var(--ease-spring); }
.remember input:checked + .check { background: var(--accent); border-color: var(--accent); }
.remember input:checked + .check svg { opacity: 1; transform: scale(1); }
.remember input:focus-visible + .check { box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.3); }
.forgot { color: var(--accent); font-weight: 500; }

/* submit with loading + success */
.auth-submit { position: relative; overflow: hidden; }
.auth-submit .spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(3,17,10,0.35); border-top-color: #03110a;
  animation: spin .7s linear infinite; display: none;
}
.auth-submit.loading .btn-label, .auth-submit.loading svg.arrow { display: none; }
.auth-submit.loading .spinner { display: block; }
.auth-submit.done { background: linear-gradient(135deg, #16c46f, #2fe08a); }

.auth-foot { text-align: center; color: var(--muted); font-size: .9rem; margin-top: 26px; }
.auth-foot a { color: var(--accent); font-weight: 600; }

/* staggered field entrance */
.auth-card .stagger { opacity: 0; transform: translateY(14px); animation: fieldIn .6s var(--ease) forwards; }
.auth-card .stagger:nth-child(1) { animation-delay: .05s; }
.auth-card .stagger:nth-child(2) { animation-delay: .12s; }
.auth-card .stagger:nth-child(3) { animation-delay: .19s; }
.auth-card .stagger:nth-child(4) { animation-delay: .26s; }
.auth-card .stagger:nth-child(5) { animation-delay: .33s; }
.auth-card .stagger:nth-child(6) { animation-delay: .40s; }
.auth-card .stagger:nth-child(7) { animation-delay: .47s; }
.auth-card .stagger:nth-child(8) { animation-delay: .54s; }
@keyframes fieldIn { to { opacity: 1; transform: none; } }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .auth-topbar .back-home { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-card, .auth-card .stagger, .lock-shackle, .auth-ring,
  .lock-glow, .field.invalid .field-error { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* RTL tweaks for auth */
[dir="rtl"] .auth-aside { border-right: 0; border-left: 1px solid var(--border); }
[dir="rtl"] .field input { padding: 14px 44px 14px 14px; }
[dir="rtl"] .input-wrap .lead-icon { left: auto; right: 14px; }
[dir="rtl"] .pw-toggle { right: auto; left: 10px; }
[dir="rtl"] .auth-submit svg.arrow { transform: scaleX(-1); }