/* "Do you have a pulse?" - the press-and-hold heart, and the Submit it becomes on a form.
   Used by the home page's banner (pulse-check.ts), and by every form wired up with
   typescript/src/lib/pulse-submit.ts: the fxTeX Pro Trial and the contact form. A page that uses
   it loads this file. */

.pulse-hold {
  --pulse-hold: 1200ms;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  border: 2px solid var(--d-accent-deep, #136b42);
  border-radius: 999px;
  background: #fff;
  color: var(--d-accent-deep, #136b42);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.pulse-hold:focus-visible { outline: 3px solid rgba(19, 107, 66, .35); outline-offset: 3px; }
.pulse-hold:disabled { opacity: .5; cursor: not-allowed; }

/* The fill behind the label, grown across the button over the hold. */
.pulse-fill {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  background: rgba(19, 107, 66, .16);
  transition: transform 150ms ease-out;
}
.pulse-hold.holding .pulse-fill { transform: scaleX(1); transition: transform var(--pulse-hold) linear; }
.pulse-hold.passed .pulse-fill { transform: scaleX(1); background: rgba(19, 107, 66, .24); }

.pulse-heart, .pulse-label { position: relative; }
.pulse-heart { font-size: 22px; line-height: 1; color: #c0392b; }
.pulse-hold.holding .pulse-heart { animation: pulse-beat 600ms ease-in-out infinite; }

@keyframes pulse-beat {
  0%, 100% { transform: scale(1); }
  30%      { transform: scale(1.25); }
  60%      { transform: scale(.95); }
}

@media (prefers-reduced-motion: reduce) {
  .pulse-hold.holding .pulse-heart { animation: none; }
}

.pulse-status { min-height: 1.5em; margin: 14px 0 0; font-size: 14px; color: #555; }

/* On a form (lib/pulse-submit.ts): the question above the heart, and the button once the hold is
   done - a plain Submit, with "Press again to submit" under it in .pulse-status. */
.pulse-go { text-align: center; margin-top: 8px; }
.pulse-go-q { margin: 0 0 10px; font-weight: 600; }
.pulse-go .pulse-hold { min-width: 13rem; justify-content: center; }
.pulse-hold.is-submit,
body.ui .pulse-hold.is-submit { background: var(--d-accent-deep, #136b42); border-color: var(--d-accent-deep, #136b42); color: #fff; }
.pulse-hold.is-submit .pulse-heart, .pulse-hold.is-submit .pulse-fill { display: none; }

/* The contact form's fields are a left-aligned column rather than a centred card, so the heart
   lines up with them. */
#contact-form .pulse-go { text-align: left; }