/* ==========================================================================
   Glowmigos — Launch list capture
   ========================================================================== */

.signup { display: grid; gap: clamp(1.8rem, 1rem + 3vw, 3.4rem); }
@media (min-width: 64rem) {
  .signup { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); align-items: start; }
}

.signup__pitch { display: grid; gap: 1.3rem; align-content: start; }
.signup__perks { margin-block-start: 0.2rem; }
.signup__perks li { color: var(--t-body); }
.signup__perks b { color: var(--t-bright); font-weight: 600; }

/* --- The form reads as a low-voltage control panel ---------------------- */
.form-panel {
  position: relative;
  padding: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem);
  border-radius: var(--r-xl);
  background: radial-gradient(120% 140% at 50% 0%, #0D2C6E, #04102E 72%);
  border: 2px solid rgba(255, 181, 17, 0.45);
  box-shadow: 0 34px 70px -40px #000;
}

.form-body, .signup__done { position: relative; z-index: 2; }
.form-grid { display: grid; gap: 0.9rem; }
@media (min-width: 30rem) { .form-grid--split { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: 0.4rem; }
.field__label {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--t-muted);
}
.field__label .req { color: var(--c-gold); }
.field input, .field select {
  inline-size: 100%; min-block-size: 48px;
  padding: 0.7rem 0.9rem;
  border-radius: var(--r-md);
  background: rgba(3, 11, 31, 0.8);
  border: 1px solid rgba(137, 176, 255, 0.2);
  color: var(--t-bright);
  transition: border-color var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out),
              background-color var(--d-fast) var(--e-out);
  appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--c-cyan) 50%),
                    linear-gradient(135deg, var(--c-cyan) 50%, transparent 50%);
  background-position: right 1.05rem center, right 0.75rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.field select option { background: #04102E; color: #fff; }
.field input::placeholder { color: var(--t-dim); }
.field input:hover, .field select:hover { border-color: rgba(137, 176, 255, 0.38); }
.field input:focus-visible, .field select:focus-visible {
  outline: none;
  border-color: var(--c-sun);
  box-shadow: 0 0 0 3px rgba(255, 213, 42, 0.22), 0 0 26px -8px rgba(255, 213, 42, 0.8);
  background: rgba(6, 21, 50, 0.9);
}
.field input:user-invalid { border-color: var(--c-red); }
.field__error { font-size: 0.74rem; color: #FF8B84; min-block-size: 1em; }

.form-foot { display: grid; gap: 0.8rem; margin-block-start: 1.15rem; }
.form-note { font-size: 0.74rem; color: var(--t-dim); line-height: 1.5; }
.form-hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }

/* --- Success state ------------------------------------------------------ */
.signup__done { display: none; text-align: center; padding: clamp(1.5rem, 1rem + 2vw, 2.6rem) 0.5rem; }
.form-panel.is-done .form-body { display: none; }
.form-panel.is-done .signup__done { display: grid; gap: 1rem; justify-items: center; }
.signup__done img {
  inline-size: min(240px, 62%);
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 181, 17, 0.28);
}
.signup__done h3 { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem); }
.signup__done p { color: var(--t-body); max-inline-size: 34ch; }
.signup__bulbs { display: flex; gap: 0.6rem; margin-block-start: 0.3rem; }
.signup__bulbs .bulb { inline-size: 0.8rem; block-size: 0.8rem; opacity: 0; }
.form-panel.is-done .signup__bulbs .bulb {
  opacity: 1;
  animation: pop-lit 520ms var(--e-pop) both;
  animation-delay: calc(var(--i) * 130ms + 220ms);
}
@keyframes pop-lit { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } }