/* The Reach out card. It is written on, not filled in: rules to write on and a ruled page for the note.
   It has no entrance of its own: the swarm over its space sets how far up it is, from js/contact-card.js. */
/* The layer covers the window, not the stage, so the dimming has no edge at any window shape.
   .contact-stage inside it is fitted exactly like the page's stage, so card and birds share its coordinates. */
.contact-layer {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow: clip; /* a card still below the fold must not make a phone page scrollable */
  visibility: hidden;
  pointer-events: none;
}
.contact-layer.is-present {
  visibility: visible;
}
.contact-stage {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}

.contact-scrim {
  position: absolute;
  inset: 0;
  background: var(--halo);
  opacity: 0;
  transition: opacity 400ms ease;
}
.contact-layer.is-open .contact-scrim {
  opacity: 0.66;
  pointer-events: auto;
  transition: opacity 760ms ease;
}
.contact-layer.is-open.is-sending .contact-scrim {
  opacity: 0.22;
}

/* The project panel sits in the same spot. It leaves before the card shows and comes back after the card has gone,
   so the two are never seen through each other. */
.stage:has(~ .contact-layer.is-open) .bloom-specimen {
  opacity: 0;
  transition: opacity 170ms ease-out;
}
.stage:has(~ .contact-layer.is-present:not(.is-open)) .bloom-specimen {
  transition: opacity 320ms ease 300ms;
}

.contact-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 620px;
  height: 520px;
  margin: -260px 0 0 -310px;
  padding: 78px 44px 30px;
  border-radius: 22px;
  background: linear-gradient(168deg, var(--card-from), var(--card-to));
  box-shadow: 0 34px 80px var(--plate-shadow);
  opacity: 0;
  transform: translateY(44px) scale(0.94);
  transform-origin: 50% 100%;
  user-select: text;
}
.contact-layer.is-open .contact-card {
  pointer-events: auto;
}

.contact-title {
  position: absolute;
  left: 44px;
  top: 20px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 2.15rem;
  line-height: 48px;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.contact-close {
  position: absolute;
  top: 18px;
  right: 26px;
  min-height: 44px;
  padding: 0 14px;
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-muted);
  transition: color 160ms ease, transform 140ms var(--ease-out);
}
.contact-close:hover { color: var(--ink); }
.contact-close:active { transform: scale(0.97); }

.contact-form {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.contact-row { position: relative; padding-bottom: 22px; }

.contact-line {
  transition: opacity 360ms ease;
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--serif);
  font-size: 1.22rem;
  color: var(--ink-soft);
}
.contact-lead { flex: none; }

.contact-line input {
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 2px;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--ring-track);
  outline: none;
  font-family: var(--serif);
  font-size: 1.22rem;
  color: var(--ink);
  caret-color: var(--accent);
  user-select: text;
  transition: border-color 200ms ease;
}
.contact-line input:focus { border-bottom-color: var(--accent); }
.contact-line input[aria-invalid='true'] { border-bottom-color: var(--accent); }
.contact-line input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--accent);
  transition: background-color 99999s linear;
}

.contact-error {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  font-size: 0.78rem;
  color: var(--accent);
  min-height: 1em;
}

.contact-note-label {
  transition: opacity 360ms ease;
  display: block;
  margin-top: 4px;
  font-family: var(--serif);
  font-size: 1.22rem;
  color: var(--ink-soft);
}

.contact-row-note textarea {
  display: block;
  width: 100%;
  height: 170px;
  margin-top: 2px;
  padding: 0;
  appearance: none;
  border: none;
  outline: none;
  resize: none;
  font-family: var(--serif);
  font-size: 1.14rem;
  line-height: 34px;
  color: var(--ink);
  caret-color: var(--accent);
  user-select: text;
  background-color: transparent;
  background-image: linear-gradient(to bottom, transparent 29px, var(--ring-track) 29px, var(--ring-track) 30px, transparent 30px);
  background-size: 100% 34px;
  background-attachment: local;
  scrollbar-width: thin;
  scrollbar-color: var(--ring-track) transparent;
}
.contact-row-note textarea.is-lifted { color: transparent; caret-color: transparent; }

/* While words fly, the form steps back so the flight is what you read. */
.contact-layer.is-sending .contact-line,
.contact-layer.is-sending .contact-note-label {
  opacity: 0.38;
}

.contact-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: auto;
}

.contact-status {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-muted);
}
.contact-layer[data-send='failed'] .contact-status { color: var(--accent); }
.contact-layer[data-send='sent'] .contact-status,
.contact-layer.is-sending .contact-status { color: var(--ink); }

.contact-send {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 4px;
  appearance: none;
  background: none;
  border: none;
  border-bottom: 1px solid var(--accent);
  cursor: pointer;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--ink);
  transition: color 160ms ease, transform 140ms var(--ease-out), opacity 200ms ease;
}
.contact-send:hover { color: var(--accent); }
.contact-send:active { transform: scale(0.97); }
.contact-send:disabled { cursor: default; opacity: 0.7; }

.contact-send-mark {
  width: 20px;
  height: 20px;
  background-color: var(--accent);
  -webkit-mask: url('../assets/bird-mark.svg') center / contain no-repeat;
  mask: url('../assets/bird-mark.svg') center / contain no-repeat;
  transition: transform 260ms var(--ease-out);
}
.contact-send:hover .contact-send-mark { transform: translate(2px, -2px); }

.contact-words {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.flying-word {
  position: absolute;
  white-space: pre;
  will-change: transform, opacity;
}

/* Above everything, the size of the window, and still showing after the card has gone: the birds finish scattering. */
.contact-flight {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  visibility: visible;
}

/* Phone: centred like the desktop card, with room above it for the wire. */
.phone .contact-card {
  right: 12px;
  left: 12px;
  top: 132px;
  margin: 0;
  width: auto;
  height: 580px;
  padding: 62px 22px 18px;
}
.phone .contact-title { left: 22px; top: 14px; font-size: 1.8rem; line-height: 42px; }
.phone .contact-close { top: 12px; right: 8px; }
.phone .contact-line { flex-direction: column; align-items: stretch; gap: 0; font-size: 1.02rem; }
.phone .contact-line input { flex: none; height: 38px; padding: 0; font-size: 1.1rem; }
.phone .contact-note-label { font-size: 1.02rem; }
.phone .contact-row-note textarea { height: 238px; font-size: 1.06rem; }
.phone .contact-status { font-size: 0.78rem; }

@media (prefers-reduced-motion: reduce) {
  .contact-card {
    transform: none;
    transition: opacity 200ms ease;
  }
  .contact-layer.is-open .contact-card { opacity: 1; }
  .contact-scrim,
  .contact-layer.is-open .contact-scrim { transition: opacity 200ms ease !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .contact-layer.is-open .contact-scrim { opacity: 0.9; }
}

@media (prefers-contrast: more) {
  .contact-line input,
  .contact-row-note textarea { border-bottom-color: var(--ink-soft); }
}