/* ══════════════════════════════════════
   Contact — Liquid Glass
   ══════════════════════════════════════ */

.contact-page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    calc(var(--nav-h) + 48px + var(--safe-top))
    var(--page-pad)
    calc(48px + max(var(--safe-bottom), var(--page-bottom-clearance)));
  /* Clip the aura horizontally but keep vertical scroll, so a focused field
     can scroll above the on-screen keyboard on mobile. */
  overflow-x: hidden;
}

/* Soft ambient glow behind the panel — no hard gradient, just a faint bloom. */
.contact-aura {
  position: absolute;
  top: 18%;
  left: 50%;
  width: min(680px, 90vw);
  height: min(680px, 90vw);
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 62%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}

.contact-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  padding: clamp(28px, 5vw, 48px);
  animation: fade-up 0.7s var(--ease-out-soft) both 0.15s;
}

/* ── Header ── */
.contact-header {
  margin-bottom: 28px;
}

.contact-eyebrow {
  display: block;
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 12px;
}

.contact-header h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 200;
  letter-spacing: -0.01em;
}

.contact-lede {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95em;
  font-weight: 400;
  line-height: 1.55;
}

/* ── Form ── */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* .field / .field-label / .field-input / .field-textarea live in shared.css
   (also used by the memorial memory sheet). */

/* ── Submit ── */
.contact-submit {
  align-self: flex-start;
  margin-top: 6px;
  padding: 13px 30px;
  font-size: 0.98em;
  font-weight: 400;
}

.contact-submit[disabled] {
  opacity: 0.6;
  pointer-events: none;
}

.contact-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: none;
  animation: contact-spin 0.7s linear infinite;
}

.contact-submit.loading .contact-spinner { display: inline-block; }

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

/* ── Status ── */
.contact-status {
  min-height: 1.2em;
  margin-top: 2px;
  font-size: 0.88em;
  font-weight: 300;
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out-soft);
}

.contact-status.show { opacity: 1; }
.contact-status.success { color: rgba(130, 220, 170, 0.92); }
.contact-status.error { color: rgba(255, 140, 140, 0.92); }

/* ── Success state ── */
.contact-success {
  text-align: center;
  padding: 10px 0 6px;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.5s var(--ease-out-soft),
    transform 0.5s var(--ease-out-soft);
}

.contact-success.show {
  opacity: 1;
  transform: translateY(0);
}

.contact-success h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  font-weight: 200;
  letter-spacing: -0.01em;
}

.contact-success-text {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95em;
  font-weight: 400;
  line-height: 1.55;
}

/* Animated checkmark — circle and tick draw themselves in once revealed. */
.success-check-svg {
  display: block;
  width: 74px;
  height: 74px;
  margin: 0 auto 24px;
  filter: drop-shadow(0 4px 16px var(--accent-soft));
}

.success-check-circle {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
}

.success-check-path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
}

.contact-success.show .success-check-circle {
  animation: check-draw 0.5s var(--ease-out-soft) forwards 0.1s;
}

.contact-success.show .success-check-path {
  animation: check-draw 0.35s var(--ease-out-soft) forwards 0.5s;
}

@keyframes check-draw {
  to { stroke-dashoffset: 0; }
}

/* ── Confetti burst canvas (throwaway, removed after the animation) ── */
.contact-confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .contact-page {
    padding-top: calc(var(--nav-h) + 28px + var(--safe-top));
    /* Anchor to the top so the keyboard shrinking the viewport never clips
       the upper fields out of reach (flexbox center-overflow trap). */
    align-items: flex-start;
  }

  .contact-submit { align-self: stretch; justify-content: center; }
}