/* ─────────────────────────────────────────────────────────────────────────────
   auth.css
   Styles for the Login and Register pages.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Page layout ─────────────────────────────────────────────────────────────── */
.auth-page {
  min-height:      100vh;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--space-6);
  position:        relative;
  overflow:        hidden;
  background:      var(--color-bg-0);
}

/* ── Animated background orbs ────────────────────────────────────────────────── */
.auth-bg {
  position:   absolute;
  inset:      0;
  z-index:    0;
  overflow:   hidden;
  pointer-events: none;
}

.auth-bg__orb {
  position:      absolute;
  border-radius: var(--radius-full);
  filter:        blur(80px);
  opacity:       0.18;
  animation:     floatOrb 12s ease-in-out infinite alternate;
}

.auth-bg__orb--1 {
  width:      480px;
  height:     480px;
  background: var(--color-accent);
  top:        -140px;
  left:       -120px;
  animation-duration: 14s;
}

.auth-bg__orb--2 {
  width:      360px;
  height:     360px;
  background: #00d4ff;
  bottom:     -100px;
  right:      -80px;
  animation-duration: 10s;
  animation-delay: -5s;
}

.auth-bg__orb--3 {
  width:      280px;
  height:     280px;
  background: #ff6baf;
  top:        50%;
  left:       55%;
  transform:  translate(-50%, -50%);
  animation-duration: 18s;
  animation-delay: -3s;
}

@keyframes floatOrb {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30px, -30px) scale(1.05); }
}

/* ── Card ────────────────────────────────────────────────────────────────────── */
.auth-card {
  position:         relative;
  z-index:          1;
  width:            100%;
  max-width:        420px;
  background:       rgba(26, 26, 26, 0.85);
  backdrop-filter:  blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border:           1px solid rgba(255,255,255,0.07);
  border-radius:    var(--radius-xl);
  padding:          var(--space-10) var(--space-8);
  box-shadow:       var(--shadow-xl),
                    inset 0 1px 0 rgba(255,255,255,0.06);

  animation: cardEntrance 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

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

/* ── Logo / header ───────────────────────────────────────────────────────────── */
.auth-logo {
  display:         flex;
  align-items:     center;
  gap:             var(--space-3);
  margin-bottom:   var(--space-8);
}

.auth-logo__icon {
  width:         40px;
  height:        40px;
  background:    var(--color-accent);
  border-radius: var(--radius-md);
  display:       flex;
  align-items:   center;
  justify-content: center;
  box-shadow:    0 4px 16px var(--color-accent-glow);
}

.auth-logo__name {
  font-size:   var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  color:       var(--color-text-1);
}

.auth-logo__name span {
  color: var(--color-accent);
}

/* ── Title + subtitle ────────────────────────────────────────────────────────── */
.auth-title {
  font-size:      var(--text-2xl);
  font-weight:    var(--weight-bold);
  letter-spacing: -0.02em;
  margin-bottom:  var(--space-2);
}

.auth-subtitle {
  font-size:     var(--text-sm);
  color:         var(--color-text-2);
  margin-bottom: var(--space-8);
}

/* ── Form ────────────────────────────────────────────────────────────────────── */
.auth-form {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-5);
}

.auth-form .form-input {
  background:    rgba(44, 44, 44, 0.7);
  border-color:  rgba(255,255,255,0.08);
  padding:       0.75rem var(--space-4);
}

/* Password row (input + eye toggle) */
.input-password-wrap {
  position: relative;
}

.input-password-wrap .form-input {
  padding-right: 3rem;
}

.input-eye-btn {
  position:    absolute;
  right:       0.75rem;
  top:         50%;
  transform:   translateY(-50%);
  background:  none;
  border:      none;
  cursor:      pointer;
  color:       var(--color-text-3);
  padding:     var(--space-1);
  display:     flex;
  align-items: center;
  transition:  color var(--transition-fast);
}

.input-eye-btn:hover {
  color: var(--color-text-1);
}

/* ── Submit button ───────────────────────────────────────────────────────────── */
.auth-submit {
  width:         100%;
  justify-content: center;
  padding:       0.8rem;
  font-size:     var(--text-base);
  font-weight:   var(--weight-semibold);
  margin-top:    var(--space-2);
  border-radius: var(--radius-md);
}

/* ── Footer link ─────────────────────────────────────────────────────────────── */
.auth-footer {
  margin-top:  var(--space-6);
  text-align:  center;
  font-size:   var(--text-sm);
  color:       var(--color-text-2);
}

/* ── Error message ───────────────────────────────────────────────────────────── */
.auth-error {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  background:    rgba(242, 104, 104, 0.1);
  border:        1px solid rgba(242, 104, 104, 0.25);
  border-radius: var(--radius-md);
  color:         var(--color-error);
  font-size:     var(--text-sm);
  padding:       0.625rem var(--space-4);
  animation:     fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── Loading state on submit btn ─────────────────────────────────────────────── */
.btn--loading {
  position:    relative;
  color:       transparent !important;
  pointer-events: none;
}

.btn--loading::after {
  content:       '';
  position:      absolute;
  width:         16px;
  height:        16px;
  border:        2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: var(--radius-full);
  animation:     spin 0.6s linear infinite;
}

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

/* ── Divider ─────────────────────────────────────────────────────────────────── */
.auth-divider {
  display:      flex;
  align-items:  center;
  gap:          var(--space-3);
  color:        var(--color-text-3);
  font-size:    var(--text-xs);
  margin:       var(--space-2) 0;
}

.auth-divider::before,
.auth-divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--color-border);
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .auth-card {
    padding: var(--space-8) var(--space-6);
    border-radius: var(--radius-lg);
  }
}