/* ============================================================
   sections/cta.css
   Closing CTA — "The first 100 set the tone." with the section's
   hand-drawn underline under "first 100", a supporting line, an
   email capture form (reuses .waitlist__input + .waitlist__btn
   from styles/waitlist.css), the "X of 100" counter, and the
   site footer.
   Reveal animations are gated by `.screen--cta.revealed`,
   added by IntersectionObserver in scripts/app.js.
   ============================================================ */

.screen--cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 12vh 6vw 6vh;
  border-top: 1px solid rgba(243, 237, 230, 0.09);
}

.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 38em;
}

.cta-title {
  margin: 0;
  font-family: "Gordita", sans-serif;
  font-weight: 300;
  font-size: 3.6vw;
  line-height: 1.08;
  letter-spacing: 0.004em;
  color: var(--ink);
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.screen--cta.revealed .cta-title { opacity: 1; transform: none; }

/* Hand-drawn underline under "first 100" */
.cta-title .ul {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.cta-line {
  position: absolute;
  left: -2%;
  bottom: -0.16em;
  width: 104%;
  height: 0.28em;
  overflow: visible;
  pointer-events: none;
}

.cta-line path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.screen--cta.revealed .cta-line path {
  animation: draw 0.75s cubic-bezier(0.65, 0, 0.35, 1) 0.65s forwards;
}

.cta-sub {
  margin: 2.8vh 0 0;
  max-width: 30em;
  font-family: "Neue Montreal", sans-serif;
  font-size: 1.18vw;
  line-height: 1.55;
  color: var(--muted);
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.15s;
}

.screen--cta.revealed .cta-sub { opacity: 1; transform: none; }

.cta-form {
  display: flex;
  width: 28vw;
  max-width: 460px;
  margin: 5vh 0 0;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.3s;
}

.screen--cta.revealed .cta-form { opacity: 1; transform: none; }

.cta-count {
  margin: 2vh 0 0;
  font-family: "Neue Montreal", sans-serif;
  font-size: 0.96vw;
  letter-spacing: 0.01em;
  color: var(--accent);
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.45s;
}

.screen--cta.revealed .cta-count { opacity: 1; transform: none; }

/* Mandatory privacy/consent line — shares .waitlist__legal styling
   with the hero form, but in the CTA section it needs its own reveal
   so it animates in alongside the form (rather than sitting visibly
   before the rest of the CTA on first scroll-into-view). */
.screen--cta .waitlist__legal {
  margin-top: 1.2vh;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.55s;
}

.screen--cta.revealed .waitlist__legal { opacity: 1; transform: none; }

/* ---------- Site footer (rendered inside the cta screen) ---------- */
.site-footer {
  margin-top: 10vh;
  display: flex;
  gap: 1.5vw;
  align-items: center;
  font-family: "Neue Montreal", sans-serif;
  font-size: 0.85vw;
  letter-spacing: 0.04em;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.6s;
}

.screen--cta.revealed .site-footer { opacity: 1; }

.footer-link {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.25s ease;
}

.footer-link:hover { color: var(--ink); }

.footer-dot { opacity: 0.4; }