/* Waitlist forms on the landing page (hero + bottom).
   Layout of the pill-shaped form lives in landing.css; this file covers the
   browser autofill and states driven by main.js: busy spinner, disabled button and feedback copy. */

/* Autofill's browser-owned background overrides background: transparent.
   Clip that fill to the text so the form's own surface/AI Aura remains visible. */
.waitlist-form .wl-field input:is(:autofill, :-webkit-autofill) {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: var(--ink, #15130f);
  caret-color: var(--ink, #15130f);
}

.waitlist-form .btn {
  gap: 8px;
}

.waitlist-form .btn:disabled {
  cursor: default;
  opacity: 0.55;
  transform: none;
}

.waitlist-form .btn[aria-busy="true"] {
  opacity: 0.8;
}

.spinner {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgb(255 255 255 / 35%);
  border-top-color: #fff;
  border-radius: 50%;
  animation: landing-spin 0.7s linear infinite;
  vertical-align: middle;
}

.ending .waitlist-form .spinner {
  border-color: rgb(250 249 245 / 35%);
  border-top-color: #faf9f5;
}

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

/* Feedback line under each form (role="status"). */
.message {
  min-height: 1.5em;
  margin: 10px auto 0;
  max-width: 460px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-soft, #5c5957);
}

.hero .message {
  margin-top: 0;
}

.message.success {
  color: #2f6b12;
  font-weight: 600;
}

.message.error {
  color: #c2410c;
  font-weight: 600;
}

.ending .message {
  color: rgb(250 249 245 / 68%);
}

.ending .message.success {
  color: #e9fe8a;
}

.ending .message.error {
  color: #ff9868;
}

.waitlist-form[data-state="error"] {
  border-color: var(--accent-2, #ff7a45);
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-duration: 1.6s;
  }
}