/* =============================================
   ENGLISH UP! — auth.css
   Loading, Login, Pending screens
============================================= */

/* ═══════════════════════════════════════════
   LOADING SCREEN
═══════════════════════════════════════════ */
.screen-loading {
  background: var(--brand-50);
  flex-direction: column;
  gap: var(--sp-6);
}

.loading-inner {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--sp-6);
}

.loading-logo {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
}

.loading-emoji {
  font-size:  var(--text-4xl);
  animation:  loadingBounce 1.2s var(--ease-spring) infinite;
}

@keyframes loadingBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

.loading-wordmark {
  font-family: var(--font-display);
  font-size:   var(--text-3xl);
  font-weight: var(--weight-bold);
  color:       var(--brand-800);
}

.loading-bar-track {
  width:         180px;
  height:        6px;
  background:    var(--brand-200);
  border-radius: var(--radius-full);
  overflow:      hidden;
}

.loading-bar-fill {
  height:        100%;
  background:    var(--brand-500);
  border-radius: var(--radius-full);
  animation:     loadingBar 1.6s var(--ease-default) infinite;
}

@keyframes loadingBar {
  0%   { width: 0%; margin-left: 0%; }
  50%  { width: 70%; margin-left: 0%; }
  100% { width: 0%; margin-left: 100%; }
}


/* ═══════════════════════════════════════════
   LOGIN SCREEN
═══════════════════════════════════════════ */
.screen-login {
  background: var(--brand-50);
  overflow:   hidden;
}

/* Decorative blobs */
.login-bg {
  position:       absolute;
  inset:          0;
  pointer-events: none;
  overflow:       hidden;
}

.login-blob {
  position:      absolute;
  border-radius: var(--radius-full);
  filter:        blur(60px);
  opacity:       0.45;
}

.login-blob-1 {
  width:      500px;
  height:     500px;
  background: var(--brand-300);
  top:        -200px;
  left:       -150px;
  animation:  blobDrift 8s ease-in-out infinite alternate;
}

.login-blob-2 {
  width:      400px;
  height:     400px;
  background: var(--teal-300);
  bottom:     -150px;
  right:      -100px;
  animation:  blobDrift 10s ease-in-out infinite alternate-reverse;
}

.login-blob-3 {
  width:      300px;
  height:     300px;
  background: var(--brand-200);
  top:        40%;
  left:       60%;
  animation:  blobDrift 12s ease-in-out infinite alternate;
}

@keyframes blobDrift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(30px, 20px) scale(1.08); }
}

/* Card */
.login-card {
  position:      relative;
  z-index:       1;
  background:    rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border:        1.5px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-2xl);
  padding:       var(--sp-10) var(--sp-8);
  width:         100%;
  max-width:     400px;
  box-shadow:    var(--shadow-xl);
  display:       flex;
  flex-direction:column;
  align-items:   center;
  gap:           var(--sp-6);
  animation:     cardIn var(--duration-slow) var(--ease-spring);
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.login-header {
  text-align: center;
  display:    flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--sp-2);
}

.login-emoji {
  font-size:  56px;
  line-height: 1;
  filter:     drop-shadow(0 4px 8px rgba(0,0,0,.12));
}

.login-header h1 {
  font-family:  var(--font-display);
  font-size:    var(--text-3xl);
  font-weight:  var(--weight-bold);
  color:        var(--neutral-900);
  line-height:  1;
}

.login-header p {
  font-size: var(--text-sm);
  color:     var(--color-text-muted);
}

/* Google button */
.btn-google {
  display:       flex;
  align-items:   center;
  justify-content: center;
  gap:           var(--sp-3);
  width:         100%;
  padding:       var(--sp-4) var(--sp-6);
  background:    var(--neutral-0);
  border:        1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size:     var(--text-sm);
  font-weight:   var(--weight-bold);
  color:         var(--color-text);
  box-shadow:    var(--shadow-sm);
  transition:    box-shadow var(--duration-normal) var(--ease-default),
                 border-color var(--duration-normal) var(--ease-default),
                 transform var(--duration-fast) var(--ease-spring);
}

.btn-google:hover {
  box-shadow:   var(--shadow-md);
  border-color: var(--neutral-300);
}

.btn-google:active {
  transform: scale(0.97);
}

/* Error message */
.login-error {
  font-size:   var(--text-sm);
  color:       var(--color-danger);
  font-weight: var(--weight-semibold);
  text-align:  center;
}


/* ═══════════════════════════════════════════
   PENDING SCREEN
═══════════════════════════════════════════ */
.screen-pending {
  background: var(--color-bg);
}

.pending-card {
  background:    var(--color-surface);
  border:        1.5px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding:       var(--sp-10) var(--sp-8);
  max-width:     420px;
  width:         100%;
  text-align:    center;
  display:       flex;
  flex-direction:column;
  align-items:   center;
  gap:           var(--sp-4);
  box-shadow:    var(--shadow-lg);
  animation:     cardIn var(--duration-slow) var(--ease-spring);
}

.pending-icon {
  font-size:  56px;
  line-height:1;
  animation:  pendingPulse 2s ease-in-out infinite;
}

@keyframes pendingPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.08); opacity: 0.75; }
}

.pending-card h2 {
  font-size:   var(--text-xl);
  font-weight: var(--weight-bold);
}

.pending-card p {
  font-size: var(--text-sm);
  color:     var(--color-text-muted);
  max-width: 280px;
}

.pending-email {
  font-size:   var(--text-xs) !important;
  font-weight: var(--weight-bold) !important;
  color:       var(--color-text-faint) !important;
  background:  var(--color-surface-alt);
  padding:     var(--sp-2) var(--sp-4);
  border-radius: var(--radius-full);
}


/* ═══════════════════════════════════════════
   AVATAR PICKER (modal)
═══════════════════════════════════════════ */
.avatar-picker-grid {
  display:               grid;
  grid-template-columns: repeat(5, 1fr);
  gap:                   var(--sp-3);
  padding:               var(--sp-2) 0;
}

.avatar-option {
  width:         52px;
  height:        52px;
  border-radius: var(--radius-full);
  font-size:     28px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  border:        2.5px solid transparent;
  background:    var(--color-surface-alt);
  transition:    border-color var(--duration-fast) var(--ease-default),
                 transform    var(--duration-fast) var(--ease-spring),
                 background   var(--duration-fast) var(--ease-default);
  cursor:        pointer;
}

.avatar-option:hover {
  background:  var(--brand-100);
  transform:   scale(1.1);
}

.avatar-option.selected {
  border-color: var(--color-primary);
  background:   var(--brand-100);
  box-shadow:   var(--shadow-glow-brand);
}

.avatar-preview-row {
  display:        flex;
  align-items:    center;
  gap:            var(--sp-4);
  padding:        var(--sp-4);
  background:     var(--color-surface-alt);
  border-radius:  var(--radius-lg);
  margin-bottom:  var(--sp-4);
}

.avatar-preview-img {
  width:         60px;
  height:        60px;
  border-radius: var(--radius-full);
  object-fit:    cover;
  border:        2px solid var(--color-border);
}

.avatar-preview-info {
  font-size:   var(--text-sm);
  color:       var(--color-text-muted);
}

.avatar-section-title {
  font-size:   var(--text-xs);
  font-weight: var(--weight-extrabold);
  color:       var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom:  var(--sp-2);
  margin-top:     var(--sp-4);
}