/* ── Modal entrance ──────────────────────────────────────────────────── */
@keyframes contactModalBackdropIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes contactModalCardIn {
  from {
    opacity: 0;
    transform: scale(0.82) translateY(24px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes contactModalBackdropOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes contactModalCardOut {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.88) translateY(12px);
  }
}

/* ── SVG circle draw ─────────────────────────────────────────────────── */
.contact-modal-circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
}
.contact-modal-check {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
}
.contact-modal-x {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
}

@keyframes contactDrawCircle {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes contactDrawCheck {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes contactDrawX {
  to {
    stroke-dashoffset: 0;
  }
}

/* ── Play state classes (applied by JS) ──────────────────────────────── */
#contact-modal[data-state="success"] #contact-modal-backdrop,
#contact-modal[data-state="error"] #contact-modal-backdrop {
  animation: contactModalBackdropIn 0.55s cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
}
#contact-modal[data-state="success"] #contact-modal-card,
#contact-modal[data-state="error"] #contact-modal-card {
  animation: contactModalCardIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#contact-modal[data-state="success"] .contact-modal-circle,
#contact-modal[data-state="error"] .contact-modal-circle {
  animation: contactDrawCircle 0.7s 0.3s ease forwards;
}
#contact-modal[data-state="success"] .contact-modal-check {
  animation: contactDrawCheck 0.45s 0.9s ease forwards;
}
#contact-modal[data-state="error"] .contact-modal-x {
  animation: contactDrawX 0.4s 0.85s ease forwards;
}

/* ── Closing ─────────────────────────────────────────────────────────── */
#contact-modal[data-state="closing"] #contact-modal-backdrop {
  animation: contactModalBackdropOut 0.4s ease forwards;
}
#contact-modal[data-state="closing"] #contact-modal-card {
  animation: contactModalCardOut 0.38s ease forwards;
}