/* =============================================================
   Login page
   - Glass-morphism card with a soft ambient glow
   - Two-step form: username → password, with a slide transition
     animated via CSS classes (no animate.css dependency)
   - Floating labels, password reveal, inline loading state
   ============================================================= */

.login-wrap {
  position: relative;
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 16px 100px;
  overflow: hidden;
}

/* Soft ambient glow behind the card — adds depth without a hard backdrop.
   Two layered radial gradients in complementary hues that drift gently. */
.login-bg-aura {
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(closest-side at 30% 30%, rgba(99, 188, 255, 0.22), transparent 60%),
    radial-gradient(closest-side at 70% 65%, rgba(168, 132, 255, 0.18), transparent 65%),
    radial-gradient(closest-side at 50% 90%, rgba(150, 201, 61, 0.12), transparent 70%);
  filter: blur(40px);
  animation: loginAuraDrift 18s ease-in-out infinite alternate;
}

@keyframes loginAuraDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1);    }
  100% { transform: translate3d(2%, -1%, 0) scale(1.08); }
}

/* ── Card ──────────────────────────────────────────────────── */

.login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  padding: 36px 36px 30px;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(28, 33, 50, 0.78), rgba(15, 19, 32, 0.85));
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    0 24px 60px -20px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset,
    0 1px 0 rgba(255, 255, 255, 0.08) inset;
  color: #e5e7eb;
  animation: loginCardEnter 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes loginCardEnter {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1);     }
}

/* ── Header (logo + title) ─────────────────────────────────── */

.login-header {
  text-align: center;
  margin-bottom: 26px;
}

.login-brand {
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(0, 176, 155, 0.35), rgba(150, 201, 61, 0.25));
  box-shadow:
    0 10px 30px -10px rgba(0, 176, 155, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.login-logo {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  object-fit: cover;
}

.login-title {
  margin: 0 0 6px;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.login-subtitle {
  margin: 0;
  font-size: 0.86rem;
  color: rgba(229, 231, 235, 0.7);
  line-height: 1.5;
}

/* ── Alert ─────────────────────────────────────────────────── */

.login-alert {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 0.86rem;
  line-height: 1.45;
  background: rgba(220, 38, 38, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.35);
  color: #fecaca;
  transition: opacity 220ms ease, transform 220ms ease;
}

.login-alert.is-hidden {
  display: none;
}

.login-alert.is-success {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(52, 211, 153, 0.4);
  color: #bbf7d0;
}

.login-alert.is-shake {
  animation: loginShake 380ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes loginShake {
  0%, 100% { transform: translateX(0); }
  15%, 75% { transform: translateX(-6px); }
  35%, 55% { transform: translateX(6px); }
}

/* ── Form / steps swap ─────────────────────────────────────── */

/* Both steps occupy the same absolute space — only the active one is
   visible. The form's min-height animates between the natural heights
   of each step (measured at load by JS), so everything below the form
   (divider, socials) doesn't jump when we swap steps. */
.login-form {
  position: relative;
  transition: min-height 380ms cubic-bezier(0.22, 1, 0.36, 1);
  /* Initial fallback before JS measurement kicks in — JS overwrites
     this within a tick of $(document).ready. */
  min-height: 132px;
}

/* Inactive steps sit slightly below their final spot with 0 opacity.
   When a step becomes active it eases UP to translateY(0); the leaving
   step eases DOWN through this same state on its way out — that gives
   the swap a natural "one rises as the other falls" motion without
   needing JS to track direction. */
.login-step {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition:
    opacity 240ms ease,
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
    /* Hide AFTER the fade finishes so the leaving step doesn't snap. */
    visibility 0s linear 240ms;
  /* Hint the browser so the height transition above stays buttery on
     low-end devices that would otherwise repaint the whole card. */
  will-change: opacity, transform;
}

.login-step.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity 240ms ease,
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}

/* ── Username chip on step 2 ───────────────────────────────── */

.login-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #e5e7eb;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.login-user-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateX(-2px);
}

.login-user-chip i {
  font-size: 0.72rem;
  opacity: 0.7;
}

.login-user-chip-name {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Input with floating label + icon + (optional) toggle ──── */

.login-field {
  position: relative;
  margin-bottom: 18px;
}

.login-field-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(229, 231, 235, 0.5);
  font-size: 0.95rem;
  transition: color 200ms ease, top 220ms ease;
  pointer-events: none;
}

/* When the label floats up, the visual centre of the input moves down
   (only the value text is left). Shift the icon to align with it so the
   icon doesn't look glued to the label. */
.login-input:focus ~ .login-field-icon,
.login-input:not(:placeholder-shown) ~ .login-field-icon {
  top: 62%;
}

.login-input {
  width: 100%;
  height: 58px;
  /* Extra top padding leaves a strip at the top where the floated label
     can sit WITHOUT overlapping the typed value. */
  padding: 22px 14px 8px 46px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 0.96rem;
  outline: none;
  transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
  -webkit-text-fill-color: #ffffff;
}

.login-input::placeholder {
  color: transparent;
}

.login-input:focus {
  border-color: rgba(99, 188, 255, 0.6);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(99, 188, 255, 0.18);
}

/* Floating state: shrink and move into the reserved top strip. Using top
   + transform-origin: left top keeps the geometry predictable (no need
   to fight the initial translateY(-50%) centering). */
.login-input:focus + .login-label,
.login-input:not(:placeholder-shown) + .login-label {
  top: 8px;
  transform: translateY(0) scale(0.78);
  color: rgba(140, 200, 255, 0.95);
  font-weight: 500;
}

.login-input:focus ~ .login-field-icon {
  color: rgba(99, 188, 255, 0.85);
}

.login-input.is-invalid {
  border-color: rgba(248, 113, 113, 0.65);
  background: rgba(220, 38, 38, 0.08);
}

.login-input.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18);
}

/* Hide browser-native eye / clear icons so our custom toggle isn't duplicated. */
.login-input::-ms-reveal,
.login-input::-ms-clear { display: none; }
.login-input::-webkit-credentials-auto-fill-button { visibility: hidden; }

.login-label {
  position: absolute;
  left: 46px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.96rem;
  color: rgba(229, 231, 235, 0.55);
  pointer-events: none;
  transform-origin: left top;
  transition:
    top 180ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    color 180ms ease;
  white-space: nowrap;
}

.login-field-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(229, 231, 235, 0.55);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

.login-field-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(229, 231, 235, 0.9);
}

/* ── Row helpers ───────────────────────────────────────────── */

.login-row-between {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: -4px 0 14px;
}

.login-link {
  color: rgba(168, 212, 255, 0.85);
  font-size: 0.84rem;
  text-decoration: none;
  transition: color 180ms ease;
}

.login-link:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* ── Primary button ────────────────────────────────────────── */

.login-btn {
  position: relative;
  width: 100%;
  height: 50px;
  border: 0;
  border-radius: 14px;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  transition:
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms ease,
    background 220ms ease,
    opacity 200ms ease;
}

.login-btn-primary {
  background: linear-gradient(135deg, #00b09b 0%, #2bb673 45%, #96c93d 100%);
  background-size: 200% 200%;
  background-position: 0% 50%;
  box-shadow:
    0 12px 30px -10px rgba(0, 176, 155, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.15) inset;
}

.login-btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  background-position: 100% 50%;
  box-shadow:
    0 16px 38px -10px rgba(0, 176, 155, 0.75),
    0 1px 0 rgba(255, 255, 255, 0.18) inset;
}

.login-btn-primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow:
    0 8px 20px -8px rgba(0, 176, 155, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.12) inset;
}

.login-btn:disabled,
.login-btn.is-loading {
  cursor: not-allowed;
  opacity: 0.85;
}

.login-btn-icon {
  font-size: 0.86rem;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.login-btn:hover:not(:disabled) .login-btn-icon {
  transform: translateX(3px);
}

/* Inline loading: replace label with a spinner without changing height. */
.login-btn.is-loading .login-btn-label,
.login-btn.is-loading .login-btn-icon {
  visibility: hidden;
}

.login-btn.is-loading::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  animation: loginSpin 720ms linear infinite;
}

@keyframes loginSpin { to { transform: rotate(360deg); } }

/* ── Divider ───────────────────────────────────────────────── */

.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 18px;
  color: rgba(229, 231, 235, 0.5);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
}

.login-divider span {
  white-space: nowrap;
}

/* ── Socials ───────────────────────────────────────────────── */

.login-socials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.login-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  border-radius: 12px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #ffffff !important;
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms ease,
    filter 220ms ease;
}

.login-social i {
  font-size: 1rem;
}

.login-social:hover {
  transform: translateY(-3px);
  filter: brightness(1.08);
}

.login-social-discord  { background: #5865f2; box-shadow: 0 8px 20px -10px rgba(88, 101, 242, 0.85); }
.login-social-facebook { background: #1877f2; box-shadow: 0 8px 20px -10px rgba(24, 119, 242, 0.85); }
.login-social-google   { background: #db4437; box-shadow: 0 8px 20px -10px rgba(219, 68, 55, 0.85); }

.login-social-discord:hover  { box-shadow: 0 14px 28px -10px rgba(88, 101, 242, 0.95); }
.login-social-facebook:hover { box-shadow: 0 14px 28px -10px rgba(24, 119, 242, 0.95); }
.login-social-google:hover   { box-shadow: 0 14px 28px -10px rgba(219, 68, 55, 0.95); }

/* ── Responsive tweaks ─────────────────────────────────────── */

@media (max-width: 480px) {
  .login-wrap {
    padding: 30px 12px 80px;
  }

  .login-card {
    padding: 28px 22px 24px;
    border-radius: 18px;
  }

  .login-title {
    font-size: 1.4rem;
  }

  .login-socials {
    grid-template-columns: 1fr;
  }

  .login-social {
    height: 46px;
  }
}

/* Respect users who prefer less motion: drop the entrance/aura animations. */
@media (prefers-reduced-motion: reduce) {
  .login-card,
  .login-bg-aura,
  .login-step,
  .login-btn,
  .login-btn-icon,
  .login-social {
    animation: none !important;
    transition: none !important;
  }
}