/* =========================================================
   Formulário de acesso antecipado
   ========================================================= */

.signup {
  position: relative;
  background: radial-gradient(100% 80% at 50% 0%, #12253f 0%, var(--ink) 68%);
}

.signup__card {
  position: relative;
  max-width: 620px;
  margin-inline: auto;
  padding: clamp(1.7rem, 6.5vw, 3rem);
  text-align: center;
  transform-style: preserve-3d;
}

.signup__title {
  font-size: var(--fs-h2);
  margin-bottom: 0.9rem;
}

.signup__sub {
  font-size: var(--fs-body);
  color: var(--paper-dim);
  max-width: 46ch;
  margin: 0 auto 2.2rem;
}

.field {
  position: relative;
  text-align: left;
  margin-bottom: 0.9rem;
}

.field label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin-bottom: 0.45rem;
}

.field input {
  width: 100%;
  padding: 1rem 1.15rem;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--paper);
  font-size: 1rem;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), background 0.3s var(--ease-out);
}

.field input::placeholder {
  color: rgba(244, 241, 234, 0.3);
}

.field input:focus {
  outline: none;
  border-color: rgba(227, 181, 121, 0.62);
  background: rgba(0, 0, 0, 0.42);
  box-shadow: 0 0 0 4px rgba(227, 181, 121, 0.12);
}

.field.is-invalid input {
  border-color: rgba(226, 108, 92, 0.7);
  box-shadow: 0 0 0 4px rgba(226, 108, 92, 0.1);
}

.field__error {
  display: none;
  margin: 0.4rem 0 0;
  font-size: 0.76rem;
  color: #f0a396;
}

.field.is-invalid .field__error {
  display: block;
  animation: rise 0.3s var(--ease-out) both;
}

.signup form {
  margin-bottom: 1rem;
}

.signup__submit {
  margin-top: 0.6rem;
}

.signup__micro {
  font-size: 0.78rem;
  color: var(--paper-faint);
  margin: 0;
}

/* --- estados --- */

.btn.is-busy {
  pointer-events: none;
  opacity: 0.75;
}

.btn.is-busy .btn__label {
  opacity: 0.5;
}

.spinner {
  display: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(26, 18, 6, 0.28);
  border-top-color: #1a1206;
  animation: spin 0.7s linear infinite;
}

.btn.is-busy .spinner {
  display: block;
}

.btn.is-busy svg {
  display: none;
}

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

/* --- sucesso --- */

.done {
  display: none;
  animation: rise 0.7s var(--ease-out) both;
}

.signup.is-done .done {
  display: block;
}

.signup.is-done form,
.signup.is-done .signup__sub,
.signup.is-done .signup__micro {
  display: none;
}

.done__seal {
  width: 66px;
  height: 66px;
  margin: 0 auto 1.3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 34% 28%, #f3cb8e, #b9803f);
  box-shadow: 0 0 50px -8px var(--gold-glow);
  animation: floaty 5s ease-in-out infinite;
}

.done__seal svg {
  width: 28px;
  height: 28px;
  color: #1a1206;
}

.done h3 {
  font-size: var(--fs-h3);
  margin-bottom: 0.7rem;
}

.done p {
  color: var(--paper-dim);
  max-width: 40ch;
  margin-inline: auto;
}