/* ============================================================
   Member auth pages (login / register / forgot / reset / result).
   A split-screen layout: a branded hero panel beside a clean form card.
   Collapses to a single column with a compact header on small screens.
   Reuses the council design tokens defined in /design + /css/site.css.
   ============================================================ */

.auth-body {
  margin: 0;
  min-height: 100vh;
  background: var(--surface-page);
  font-family: var(--font-body);
}

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

/* ---- Branded hero panel ---- */
.auth-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  color: var(--text-on-dark, #fff);
  background:
    radial-gradient(120% 120% at 0% 0%, var(--red-500), var(--red-700) 60%, var(--red-800));
}
.auth-hero-inner { position: relative; z-index: 1; max-width: 360px; text-align: center; }
/* Logo sits on a white disc so the Chargers mascot reads clearly against the
   red panel (it was nearly invisible directly on the gradient). */
.auth-mascot-badge {
  width: 152px; height: 152px; margin: 0 auto 4px;
  border-radius: 50%; background: var(--paper-white, #fff);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 36px rgba(86, 10, 16, 0.4);
  animation: authFloat 5.5s ease-in-out infinite;
}
.auth-mascot {
  width: 70%; height: auto;
  filter: drop-shadow(0 6px 12px rgba(86, 10, 16, 0.18));
}
.auth-rally {
  font-family: var(--font-hand);
  font-size: 2rem; line-height: 1; margin: 8px 0 4px;
  color: var(--sunshine-300, #ffd34e);
  transform: rotate(-3deg);
}
.auth-hero-title {
  font-family: var(--font-display);
  font-weight: 700; font-size: 2.1rem; line-height: 1.08; margin: 6px 0 14px;
}
.auth-hero-sub { font-size: 1.02rem; line-height: 1.55; opacity: 0.92; margin: 0; }

/* Soft decorative blobs floating behind the content. */
.auth-blob { position: absolute; border-radius: 50%; filter: blur(2px); opacity: 0.18; }
.auth-blob-1 { width: 260px; height: 260px; top: -70px; right: -60px; background: var(--sunshine-500, #ffc83d); animation: authDrift1 13s ease-in-out infinite; }
.auth-blob-2 { width: 200px; height: 200px; bottom: -60px; left: -50px; background: var(--sky-500, #4aa8e0); opacity: 0.22; animation: authDrift2 16s ease-in-out infinite; }

/* ---- Form panel ---- */
.auth-panel { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.auth-card-wrap {
  width: 100%; max-width: 400px;
  background: var(--surface-card, #fff);
  border-radius: var(--radius-xl, 22px);
  box-shadow: var(--shadow-lg);
  padding: 38px 34px;
}
.auth-card-wrap h1 { font: var(--text-h2); color: var(--text-strong); margin: 0 0 6px; }
.auth-lede { color: var(--text-muted); margin: 0 0 22px; line-height: 1.5; }

.auth-form { display: block; }
.auth-form .field { margin-bottom: 16px; }
.auth-form .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Grid tracks default to min-width:auto and won't shrink below an input's
   intrinsic width, so the two name fields overflowed the card. Let them
   shrink, and have inputs fill their cell instead of using intrinsic size. */
.auth-form .grid2 > .field { min-width: 0; }
.auth-form .field input { width: 100%; }
.field-hint { margin: 6px 0 0; font-size: 0.8rem; color: var(--text-muted); }

.auth-row { display: flex; justify-content: flex-end; margin: -4px 0 18px; }
.auth-link, .auth-foot a { color: var(--color-primary); text-decoration: none; font-weight: 700; }
.auth-link:hover, .auth-foot a:hover { text-decoration: underline; }
.auth-foot { margin: 20px 0 0; text-align: center; color: var(--text-muted); }

.btn-block { width: 100%; }

/* Notice + error banners. .form-error is styled in admin.css; mirror a neutral
   notice here for "you've been signed out / disabled" style messages. */
.auth-notice {
  background: var(--sky-50); color: var(--sky-700);
  border-radius: var(--radius-md); padding: 10px 14px;
  font-size: 0.9rem; margin-bottom: 16px;
}
.hidden { display: none !important; }

/* Honeypot — visually hidden, kept in the layout for bots. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Result / confirmation state ---- */
.auth-result { text-align: center; }
/* When the form is replaced by a confirmation (or vice-versa), the new content
   rises in so the state change reads as a transition rather than a hard cut. */
.auth-result { animation: authRise 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }
.auth-result-mark {
  width: 64px; height: 64px; margin: 0 auto 18px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 800; color: #fff;
  animation: authPop 0.5s cubic-bezier(0.18, 1.5, 0.5, 1) 0.08s both;
}
.auth-result.is-ok .auth-result-mark { background: var(--grass-500); }
.auth-result.is-bad .auth-result-mark { background: var(--color-primary); }

/* ============================================================
   Motion. Every auth page gives its panel a quick entrance so moving between
   login / register / forgot / reset feels smooth. The hero mascot floats and
   the blobs drift continuously underneath. The login page additionally plays
   the one-time "Go Chargers!" loader (.intro in /css/site.css) — when present
   (.with-loader) the reveal is held back so it lands as the loader lifts.
   ============================================================ */
.auth-hero-inner { animation: authHeroIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both; }
.auth-card-wrap { animation: authRise 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both; }

/* Stagger the form controls in just after the card. */
.auth-form > * { animation: authRise 0.5s ease both; }
.auth-form > *:nth-child(1) { animation-delay: 0.20s; }
.auth-form > *:nth-child(2) { animation-delay: 0.27s; }
.auth-form > *:nth-child(3) { animation-delay: 0.34s; }
.auth-form > *:nth-child(4) { animation-delay: 0.41s; }
.auth-form > *:nth-child(5) { animation-delay: 0.48s; }
.auth-form > *:nth-child(6) { animation-delay: 0.55s; }
.auth-form > *:nth-child(7) { animation-delay: 0.62s; }
.auth-foot { animation: authRise 0.5s ease 0.66s both; }

/* Login only: hold the reveal until the ~2.7s loader has lifted. */
.with-loader .auth-hero-inner { animation-delay: 1.9s; }
.with-loader .auth-card-wrap { animation-delay: 2s; }
.with-loader .auth-form > *:nth-child(1) { animation-delay: 2.18s; }
.with-loader .auth-form > *:nth-child(2) { animation-delay: 2.26s; }
.with-loader .auth-form > *:nth-child(3) { animation-delay: 2.34s; }
.with-loader .auth-form > *:nth-child(4) { animation-delay: 2.42s; }
.with-loader .auth-form > *:nth-child(5) { animation-delay: 2.50s; }
.with-loader .auth-form > *:nth-child(6) { animation-delay: 2.58s; }
.with-loader .auth-form > *:nth-child(7) { animation-delay: 2.66s; }
.with-loader .auth-foot { animation-delay: 2.7s; }

/* Brief fade used by the JS when swapping the card to its confirmation state. */
.auth-card-wrap { transition: opacity 0.18s ease, transform 0.18s ease; }
.auth-card-wrap.is-swapping { opacity: 0; transform: translateY(-8px); }

@keyframes authFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes authDrift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(18px, 26px) scale(1.12); } }
@keyframes authDrift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-22px, -16px) scale(1.1); } }
@keyframes authHeroIn { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes authRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes authPop { 0% { transform: scale(0.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* Reduced motion: drop entrances, idle drifts, and the swap fade. */
@media (prefers-reduced-motion: reduce) {
  .auth-hero-inner, .auth-card-wrap, .auth-form > *, .auth-foot,
  .auth-result, .auth-result-mark, .auth-mascot-badge, .auth-blob {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .auth-card-wrap { transition: none !important; }
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .auth-layout { grid-template-columns: 1fr; }
  .auth-hero { padding: 30px 24px; }
  .auth-hero-inner { max-width: 100%; }
  .auth-mascot { width: 80px; height: 80px; }
  .auth-rally { font-size: 1.5rem; }
  .auth-hero-title { font-size: 1.5rem; margin-bottom: 6px; }
  .auth-hero-sub { display: none; }
  .auth-panel { padding: 26px 18px 44px; }
  .auth-card-wrap { box-shadow: none; padding: 8px 8px 0; background: transparent; }
}