/* ============================================================================
   HERBASSADOR — Auth pages v2 (login · join · verify · onboarding)
   Adds: animated aside orbs, form card entrance, input focus ring,
   checkbox pulse, button loading state, success badge bounce.
   ============================================================================ */

body { background: var(--color-bg-subtle); }
.lucide, [data-lucide] { width: 20px; height: 20px; stroke-width: 2; }
a { text-decoration: none; }

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

/* ── Left brand panel ── */
.auth__aside {
  display: none;
  background: linear-gradient(160deg, var(--purple-900) 0%, var(--purple-700) 60%, var(--purple-600) 100%);
  color: #fff; padding: var(--space-12); position: relative; overflow: hidden;
}
/* Decorative orbs — animated */
.auth__aside::before {
  content: ""; position: absolute; bottom: -80px; left: -80px;
  width: 320px; height: 320px; background: rgba(255,255,255,.05);
  border-radius: var(--radius-full);
  animation: orbFloat 8s ease-in-out infinite;
}
.auth__aside::after {
  content: ""; position: absolute; top: -60px; right: -60px;
  width: 220px; height: 220px; background: rgba(255,255,255,.04);
  border-radius: var(--radius-full);
  animation: orbFloat 6s ease-in-out infinite reverse;
}
@keyframes orbFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(16px,-16px) scale(1.05); }
}
.auth__brand { display: flex; align-items: center; gap: var(--space-3); position: relative; }
.auth__brand-mark {
  width: 46px; height: 46px; border-radius: var(--radius-lg);
  background: rgba(255,255,255,.12); display: grid; place-items: center;
  box-shadow: 0 0 0 1px rgba(255,255,255,.15);
}
.auth__brand-name { font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: var(--text-xl); }
.auth__pitch { position: relative; margin-top: auto; }
.auth__pitch h2 { color: #fff; font-size: clamp(1.6rem,3vw,2.25rem); line-height: 1.15; letter-spacing: -.02em; }
.auth__pitch p { color: rgba(255,255,255,.75); margin-top: var(--space-4); max-width: 36ch; line-height: 1.65; }
.auth__points { list-style: none; margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); position: relative; }
.auth__points li {
  display: flex; align-items: center; gap: var(--space-3);
  color: rgba(255,255,255,.9); font-size: var(--text-sm);
  padding: var(--space-3) var(--space-4); background: rgba(255,255,255,.07);
  border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,.08);
  transition: background var(--transition-fast);
}
.auth__points li:hover { background: rgba(255,255,255,.12); }
.auth__points [data-lucide] { width: 18px; height: 18px; color: var(--purple-200); flex-shrink: 0; }

/* ── Form panel ── */
.auth__main { display: flex; align-items: center; justify-content: center; padding: var(--space-6); }
.auth__card {
  width: 100%; max-width: 420px;
  animation: cardIn .4s var(--ease-out-quart) both;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.auth__card-brand {
  display: flex; align-items: center; gap: var(--space-2);
  justify-content: center; margin-bottom: var(--space-6);
}
.auth__card-brand .mark {
  width: 36px; height: 36px; border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--purple-600), var(--purple-400));
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 4px 12px rgba(92,23,168,.3);
  transition: transform var(--transition-base);
}
.auth__card-brand .mark:hover { transform: rotate(-8deg) scale(1.08); }
.auth__card-brand .name { font-family: var(--font-display); font-weight: var(--weight-extrabold); }

.auth__title {
  font-family: var(--font-display); font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold); letter-spacing: -.02em; text-align: center;
}
.auth__subtitle { color: var(--color-text-muted); text-align: center; margin: var(--space-2) 0 var(--space-6); font-size: var(--text-sm); }

/* ── Fields ── */
.field { margin-bottom: var(--space-4); }
.field .label { display: flex; justify-content: space-between; align-items: center; }
.field__link { font-size: var(--text-xs); color: var(--color-brand); font-weight: var(--weight-semibold); }
.field__link:hover { text-decoration: underline; }
.field__hint { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: 4px; }

.input-group { position: relative; }
.input-group .input { padding-right: 48px; }
.input-group__toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: grid; place-items: center;
  color: var(--color-text-faint); border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.input-group__toggle:hover { color: var(--color-brand); background: var(--color-brand-faint); }

/* ── Checkbox ── */
.checkbox {
  display: flex; align-items: flex-start; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-5);
  cursor: pointer;
}
.checkbox input {
  width: 18px; height: 18px; margin-top: 2px;
  accent-color: var(--color-brand); flex-shrink: 0; cursor: pointer;
}
.checkbox a { color: var(--color-brand); font-weight: var(--weight-semibold); }
.checkbox a:hover { text-decoration: underline; }

/* ── Error alert ── */
.auth__error { display: none; margin-bottom: var(--space-4); }
.auth__error.show { display: flex; align-items: flex-start; gap: var(--space-3); }

/* ── Footer link ── */
.auth__foot { text-align: center; margin-top: var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); }
.auth__foot a { color: var(--color-brand); font-weight: var(--weight-semibold); }
.auth__foot a:hover { text-decoration: underline; }

/* ── Loading spinner inside btn ── */
.btn .spinner {
  width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Success / verify badge ── */
.auth__icon-badge {
  width: 68px; height: 68px; border-radius: var(--radius-full);
  display: grid; place-items: center; margin: 0 auto var(--space-5);
  animation: badgeBounce .5s var(--ease-spring) both;
}
@keyframes badgeBounce {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: scale(1); }
}
.auth__icon-badge [data-lucide] { width: 32px; height: 32px; }
.auth__icon-badge--success { background: var(--color-success-bg); color: var(--color-success); }
.auth__icon-badge--brand   { background: var(--color-brand-faint); color: var(--color-brand); }

/* ── Responsive ── */
@media (min-width: 900px) {
  .auth { grid-template-columns: 1fr 1fr; }
  .auth__aside { display: flex; flex-direction: column; }
}