/* ════════════════════════════════════════════════════════════════
   section2-form.css — Palm Sign-Up Form
   ════════════════════════════════════════════════════════════════

   All vertical positions are measured from section-two's top edge
   (section-two height = 180vh).

   Coordinate derivation — pixel analysis of
   omega_handsconnected_pluswriting.png (1115×3643, same dims as
   the live image).  Formula used:
     section2_vh = image_y_fraction × 267 − 80
   where 267vh = current image height, 20vh = image top, 100vh = section-two start.

   Horizontal positions use image-centered calc():
     left: calc(50% + (x_frac − 0.5) × 93.8vh)
   where 93.8vh = rendered image width (250vh × 1248/3328).
   ════════════════════════════════════════════════════════════════ */

/* ── Form container ── */
.palm-form {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 7;
}

/* ── SVG connecting lines ─────────────────────────────────────────
   viewBox "0 0 100 100" → x = % of viewport width,
                            y = % of section-two height (180vh).
   vector-effect keeps stroke at 1 CSS px regardless of scaling.
   Derived from pixel measurements on omega_handsconnected_pluswriting.png:
   Line A: palm (49.1, 67.5) → First Name label (61.5, 54.8)  [right-side label]
   Line B: palm (41.5, 69.8) → E-Mail label    (31.9, 53.5)  [left-side label]
   Line C: palm (40.6, 74.2) → Phone label     (29.5, 68.5)  [left-side label]
   ──────────────────────────────────────────────────────────────── */
.palm-form__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* ── Labels — visually hidden, kept for screen readers ── */
.palm-form__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  pointer-events: none;
}

/*
 * Label positions — original image coords, adjusted −45.6vh for hero
 * height change (100vh → 145.6vh shifts section-two start down by 45.6vh):
 *   First Name: image (483,2572) → top: 67.6vh, left: calc(50% − 10.6vh)
 *   E-Mail:     image (483,2676) → top: 73.9vh, left: calc(50% − 10.6vh)
 *   Phone:      image (483,2732) → top: 79.6vh, left: calc(50% − 10.6vh)
 */
.palm-form__label--fname { top:  67.6vh; left: calc(50% - 10.6vh); }
.palm-form__label--email { top:  73.9vh; left: calc(50% - 10.6vh); }
.palm-form__label--phone { top:  79.6vh; left: calc(50% - 10.6vh); }

/* ── Inputs — sit at label positions, styled as handwritten italic text ── */
.palm-form__input {
  position: absolute;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: clamp(0.975rem, 1.65vw, 1.35rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  color: #000000;
  pointer-events: auto;
  cursor: text;
  width: 14em;
  padding: 0;
  caret-color: rgba(0, 0, 0, 0.7);
}

.palm-form__input::placeholder {
  color: rgba(0, 0, 0, 0.6);
  font-style: normal;
}

/*
 * Input positions — original image coords, adjusted −45.6vh (see label comment):
 *   First Name: image (483,2572) → top: 67.6vh,  left: calc(50% − 10.6vh)
 *   E-Mail:     image (483,2676) → top: 73.9vh,  left: calc(50% − 10.6vh)
 *   Phone:      image (483,2732) → top: 79.6vh,  left: calc(50% − 10.6vh)
 */
.palm-form__input--fname {
  top:  65.6vh;
  left: calc(50% - 10.6vh);
}

.palm-form__input--email {
  top:  71.9vh;
  left: calc(50% - 10.6vh);
}

.palm-form__input--phone {
  top:  77.6vh;
  left: calc(50% - 10.6vh);
}

/* ── Submit button — cyan oval pill, black text ── */
.palm-form__submit {
  position: absolute;
  top: 125.5vh;
  left: calc(50% + 0.2vh);
  transform: translateX(-50%);

  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.8vw, 1.4rem);
  font-weight: 400;
  letter-spacing: 0.25em;

  /* Oval pill — no fill, stroke outline only */
  background: transparent;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  color: #000000;
  -webkit-text-fill-color: #000000;

  border: 1.5px solid #88CCF1;
  border-radius: 999px;
  padding: 0.1em 0.4em;
  cursor: pointer;
  white-space: nowrap;
  pointer-events: auto;
  transition: opacity 0.25s ease;
}

.palm-form__submit:hover,
.palm-form__submit:focus-visible {
  opacity: 0.75;
  outline: none;
}

/* ── SVG lines — same dark tone as hero gradient ── */
.palm-form__lines line {
  stroke: var(--gradient-hero-to);
  stroke-opacity: 0.65;
}

/* ── Thank-you / error message — fades in below submit button ── */
#omega-form-msg {
  position: absolute;
  top: calc(119.4vh + 2.4em);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(0.6rem, 1vw, 0.8rem);
  letter-spacing: 0.15em;
  color: #000000;
  pointer-events: none;
  animation: omega-msg-in 0.35s ease forwards;
}

@keyframes omega-msg-in {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0);   }
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile
   On mobile the form drops absolute/rotated positioning entirely
   and stacks as a centered flex column over the palm image.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Hide the diagonal SVG connector lines */
  .palm-form__lines { display: none; }

  /* Re-flow the form as a vertical stack, centered in section-two */
  .palm-form {
    inset: unset;
    position: absolute;
    top: 18vh;
    left: 50%;
    transform: translateX(-50%);
    width: 82vw;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    pointer-events: auto;
  }

  /* Labels — in-flow, flush above the underline */
  .palm-form__label {
    position: static;
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 1.8rem;
    margin-bottom: 0;       /* zero gap — underline sits directly under text */
    white-space: nowrap;
  }

  /* Reset all per-label absolute offsets */
  .palm-form__label--fname,
  .palm-form__label--email,
  .palm-form__label--phone {
    top: auto;
    left: auto;
    right: auto;
  }

  /* Inputs — the bottom border IS the underline under the label */
  .palm-form__input {
    position: static;
    display: block;
    width: 100%;            /* span the full form width */
    max-width: none;
    font-size: 1rem;
    font-family: var(--font-sans);
    color: #000000;
    transform: none;
    transform-origin: unset;
    border: none;
    border-bottom: 1px solid rgba(17, 17, 17, 0.45);
    padding: 6px 0 4px;
    margin-top: 0;
    background: transparent;
  }

  /* Reset per-input absolute offsets */
  .palm-form__input--fname,
  .palm-form__input--email,
  .palm-form__input--phone {
    top: auto;
    left: auto;
    width: 100%;
  }

  /* Submit button — back in flow, centered */
  .palm-form__submit {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    align-self: center;
    margin-top: 2rem;
    font-size: 1rem;
  }
}