/* ============================================================
   waitlist.css
   The email capture form. Used in two places:
   - hero (full block: label + form + count + legal)
   - cta closing section (re-uses .waitlist__input + .waitlist__btn
     under .cta-form; see sections/cta.css for that wrapper)
   The block-level `.waitlist` only renders inside .screen--1.
   ============================================================ */

.waitlist {
  margin-top: 5vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hero reveals the waitlist via a class toggled in app.js — */
/* either on first scroll intent or after the intro timer.   */
.screen--1.wl-revealed .waitlist {
  opacity: 1;
}

.waitlist__label {
  font-family: "Neue Montreal", sans-serif;
  font-size: clamp(0.7rem, 0.86vw, 0.95rem);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted);
  margin-bottom: 1.3vh;
}

.waitlist__form {
  display: flex;
  width: 30vw;
  max-width: 470px;
}

.waitlist__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1px solid rgba(243, 237, 230, 0.32);
  border-right: none;
  color: var(--ink);
  font-family: "Neue Montreal", sans-serif;
  font-size: clamp(0.85rem, 1.02vw, 1.1rem);
  padding: 1.05em 1.2em;
}

.waitlist__input::placeholder { color: var(--muted); }

.waitlist__input:focus {
  outline: none;
  border-color: rgba(243, 237, 230, 0.6);
}

.waitlist__btn {
  flex: none;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  font-family: "Gordita", sans-serif;
  font-size: clamp(0.85rem, 1.02vw, 1.1rem);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 1.05em 2.2vw;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.waitlist__btn:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.waitlist__note {
  margin: 1.5vh 0 0;
  font-family: "Neue Montreal", sans-serif;
  font-size: clamp(0.8rem, 0.96vw, 1.05rem);
  letter-spacing: 0.01em;
  color: var(--accent);
}

/* Small legal/privacy line under the form */
.waitlist__legal {
  margin: 0.9vh 0 0;
  font-family: "Neue Montreal", sans-serif;
  font-size: clamp(0.65rem, 0.78vw, 0.85rem);
  letter-spacing: 0.01em;
  color: rgba(243, 237, 230, 0.38);
  line-height: 1.5;
}

.waitlist__legal a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 200ms ease;
}

.waitlist__legal a:hover { color: rgba(243, 237, 230, 0.7); }

/* ---------- Inline form feedback ----------
   Used by both the hero waitlist form AND the closing cta form to show
   transient messages: empty email, invalid format, or "you're already
   on the list" (checked against Supabase via insertEmail — the
   localStorage fast-path was removed; Supabase is the only source of
   truth for waitlist membership).
   Hidden by default via [hidden] attribute; revealed by scripts/modal.js
   which clears it on the next keystroke. */

.form-feedback {
  margin: 1.4vh 0 0;
  font-family: "Neue Montreal", sans-serif;
  font-size: clamp(0.8rem, 0.96vw, 1.05rem);
  letter-spacing: 0.01em;
  color: var(--ink);
}

.form-feedback[data-state="success"] {
  color: var(--accent);
}

/* Honeypot — invisible field that traps spam bots. Off-screen
   positioning (not display:none) so bot scrapers still see it in the
   DOM and dutifully fill it. pointer-events:none + tabindex=-1 (on
   the element) keep humans from ever interacting with it. */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}