/* ───────────────────────────────────────────────
   AUTH PAGES — hearth-themed card
   Shared by login.html and set-password.html (both trees).
   Lifted out of login.html when set-password.html was added, so a
   tweak to the card reaches every auth page instead of drifting.
─────────────────────────────────────────────── */
.login-shell {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 140px 32px 80px;
  background:
    radial-gradient(ellipse 80% 55% at 50% 75%, var(--h-bg-2) 0%, #0a0503 55%, var(--h-bg) 95%);
}
.login-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 100%, var(--ember-dim) 0%, transparent 70%);
  pointer-events: none;
}

.login-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: rgba(20, 14, 8, 0.92);
  border: 1px solid rgba(232, 101, 26, 0.22);
  border-radius: var(--r-xl);
  padding: 56px 48px 48px;
  overflow: hidden;
  box-shadow: 0 0 80px rgba(232, 101, 26, 0.10);
}
.login-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ember), transparent);
}

/* Portal-flame hero (matches index.html / .h-portal-flame) */
.login-flame {
  position: relative;
  width: 72px;
  height: 92px;
  margin: 0 auto 26px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transform-origin: 50% 100%;
  animation: hPortalFlameSway 4.6s ease-in-out infinite;
}
.login-flame-img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter:
    drop-shadow(0 -4px 10px rgba(232, 101, 26, 0.55))
    drop-shadow(0 0 22px rgba(245, 179, 102, 0.35));
  animation: hPortalFlameFlicker 2.4s ease-in-out infinite;
  transform-origin: 50% 100%;
}
.login-flame-glow {
  position: absolute;
  inset: -22px -30px -6px -30px;
  background:
    radial-gradient(ellipse 55% 60% at 50% 88%, rgba(232,101,26,0.55) 0%, rgba(232,101,26,0.18) 35%, transparent 70%),
    radial-gradient(ellipse 35% 45% at 50% 78%, rgba(245,179,102,0.55) 0%, transparent 70%);
  filter: blur(6px);
  animation: hPortalFlameGlow 3.1s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.login-flame::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(232,101,26,0.85) 0%, rgba(232,101,26,0.15) 60%, transparent 100%);
  filter: blur(2px);
  animation: hPortalFlameGlow 2.2s ease-in-out infinite reverse;
}

.login-eyebrow {
  display: block;
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 14px;
}
.login-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.4rem);
  font-weight: 300;
  color: var(--cream);
  text-align: center;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.login-title em { font-style: italic; color: var(--gold); font-weight: 400; }

.login-subtitle {
  text-align: center;
  color: var(--cream-2);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.55;
  margin-bottom: 10px;
  font-weight: 300;
}
.login-contact {
  text-align: center;
  font-size: 0.84rem;
  color: var(--muted);
  margin-bottom: 36px;
}
.login-contact a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 180, 41, 0.35);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.login-contact a:hover {
  color: var(--gold-2);
  border-bottom-color: var(--gold-2);
}

.login-divider {
  display: flex; align-items: center;
  gap: 14px;
  margin: 0 0 26px;
}
.login-divider::before, .login-divider::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--h-line) 50%, transparent);
}
.login-divider span {
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.form-group { margin-bottom: 18px; }

.form-label {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 9px;
}

.form-input {
  width: 100%;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--h-line);
  border-radius: var(--r-md);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 300;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.form-input::placeholder { color: rgba(138, 122, 99, 0.55); }
.form-input:focus {
  border-color: rgba(232, 101, 26, 0.5);
  background: rgba(232, 101, 26, 0.04);
  box-shadow: 0 0 0 3px rgba(232, 101, 26, 0.10);
}

.form-forgot {
  display: block;
  text-align: right;
  font-size: 0.74rem;
  color: var(--muted);
  text-decoration: none;
  margin-top: 8px;
  letter-spacing: 0.04em;
  transition: color 0.2s ease;
  background: none;
  border: none;
  padding: 0;
  margin-left: auto;
  font-family: var(--font-body);
  cursor: pointer;
}
.form-forgot:hover { color: var(--ember); }

.btn-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 28px;
  margin-top: 26px;
  background: var(--ember);
  border: none;
  border-radius: 100px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 6px 30px var(--ember-glow);
  min-height: 50px;
}
.btn-login:hover {
  background: var(--ember-2);
  transform: translateY(-2px);
  box-shadow: 0 10px 40px var(--ember-glow);
}
.btn-login:disabled {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}

.login-error {
  font-size: 0.78rem;
  color: #e87a65;
  text-align: center;
  margin-top: 14px;
  min-height: 1.2em;
  letter-spacing: 0.02em;
}
/* Same slot, good news: a sent reset link or a saved password. */
.login-error.is-ok { color: var(--gold); }

.login-back {
  display: block;
  text-align: center;
  margin-top: 28px;
  font-size: 0.78rem;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.08em;
  transition: color 0.2s ease;
}
.login-back:hover { color: var(--cream); }

@media (max-width: 480px) {
  .login-shell { padding: 110px 18px 60px; }
  .login-card { padding: 40px 24px 36px; border-radius: var(--r-lg); }
  .login-title { font-size: 1.7rem; }
}

/* ─── Reuse portal-bloom transition on success ─── */
.login-gate-clone {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  will-change: transform, filter;
  transform-origin: 50% 100%;
  transition: transform 0.95s cubic-bezier(0.5, 0.05, 0.2, 1),
              filter 0.95s ease-out;
}
.login-gate-clone .login-flame-img,
.login-gate-clone .login-flame-glow,
.login-gate-clone::after { animation: none; }
.login-gate-clone.zooming {
  transform: translate(calc(50vw - 50% - var(--clone-x, 0px)),
                       calc(50vh - 50% - var(--clone-y, 0px)))
             scale(16);
  filter: drop-shadow(0 -10px 40px rgba(232,101,26,0.9))
          drop-shadow(0 0 80px rgba(245,179,102,0.7))
          brightness(1.15) saturate(1.1);
}
.login-bloom {
  position: fixed; inset: 0; pointer-events: none; z-index: 9998;
  opacity: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 60%, rgba(232,101,26,0.85) 0%, rgba(232,101,26,0.35) 35%, transparent 70%),
    radial-gradient(ellipse 90% 80% at 50% 60%, rgba(245,179,102,0.5) 0%, transparent 60%);
  transition: opacity 0.95s ease-out;
}
.login-bloom-on { opacity: 1; }
html.login-igniting { overflow: hidden; }
html.login-igniting .h-nav,
html.login-igniting .login-shell { transition: opacity 0.7s ease-out 0.1s; opacity: 0.18; }
@media (prefers-reduced-motion: reduce) {
  .login-flame, .login-flame-img, .login-flame-glow, .login-flame::after,
  .login-gate-clone { animation: none; transition: none; }
}