/* Contact page: bot check, sending state, and the "sent" animation */
.c-col { position: relative; min-width: 0; }
.c-check { min-height: 0; }
.c-check:not([hidden]) { display: flex; justify-content: flex-start; }

/* Send button with a spinner while it sends */
.c-send { position: relative; }
.c-spinner { display: none; width: 18px; height: 18px; margin-left: 10px; border-radius: 50%; border: 2.5px solid #ffffff66; border-top-color: #fff; animation: c-spin .8s linear infinite; }
.c-send.is-busy .c-spinner { display: inline-block; }
.c-send.is-busy { cursor: progress; opacity: .92; }
@keyframes c-spin { to { transform: rotate(360deg); } }

/* The form leaves */
#contact-send.is-leaving { animation: c-leave .28s ease-in forwards; }
@keyframes c-leave { to { opacity: 0; transform: translateY(-10px) scale(.98); } }

/* The success card */
.c-success { align-items: center; text-align: center; gap: 12px; padding-block: clamp(32px, 5vw, 52px); outline: none; overflow: hidden; }
.c-success:not([hidden]) { display: flex; }
.c-success .si-h { margin-top: 6px; }
.c-success-msg { color: var(--ink-2); max-width: 36ch; }
.c-sent-to { color: var(--ink-3); font-size: 14px; overflow-wrap: anywhere; }
.c-success #c-again { margin-top: 8px; }

.c-burst { position: relative; width: 112px; height: 112px; display: grid; place-items: center; }
.c-tick { width: 92px; height: 92px; }
.c-tick-ring { fill: var(--sage-soft); stroke: var(--sage); stroke-width: 2.5; stroke-dasharray: 145; stroke-dashoffset: 145; }
.c-tick-mark { fill: none; stroke: var(--sage); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; }
.c-plane { position: absolute; width: 34px; height: 34px; left: 50%; top: 50%; margin: -17px 0 0 -17px; opacity: 0; }
.c-dot { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--apricot); opacity: 0; }
.c-dot:nth-of-type(even) { background: var(--cobalt); width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; }

.c-success.is-playing { animation: c-pop .45s cubic-bezier(.2, .9, .3, 1.2) both; }
.c-success.is-playing .c-plane { animation: c-fly .9s cubic-bezier(.5, 0, .3, 1) both; }
.c-success.is-playing .c-tick-ring { animation: c-draw .55s ease-out .55s forwards; }
.c-success.is-playing .c-tick-mark { animation: c-draw .35s ease-out 1s forwards; }
.c-success.is-playing .c-dot { animation: c-burst .7s cubic-bezier(.2, .8, .3, 1) 1.05s both; }
.c-success.is-playing .si-h, .c-success.is-playing .c-success-msg, .c-success.is-playing .c-sent-to, .c-success.is-playing #c-again {
  animation: c-rise .4s ease-out both;
}
.c-success.is-playing .si-h { animation-delay: .9s; }
.c-success.is-playing .c-success-msg { animation-delay: 1s; }
.c-success.is-playing .c-sent-to { animation-delay: 1.08s; }
.c-success.is-playing #c-again { animation-delay: 1.16s; }

@keyframes c-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes c-fly {
  0%   { opacity: 0; transform: translate(-46px, 30px) rotate(10deg) scale(.7); }
  20%  { opacity: 1; }
  55%  { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
  100% { opacity: 0; transform: translate(140px, -120px) rotate(-12deg) scale(.6); }
}
@keyframes c-draw { to { stroke-dashoffset: 0; } }
@keyframes c-burst {
  0%   { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.4); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-62px) scale(1); }
}
@keyframes c-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Less motion: no flying or bursting, just the finished state */
@media (prefers-reduced-motion: reduce) {
  #contact-send.is-leaving, .c-success.is-playing, .c-success.is-playing * { animation: none !important; }
  .c-tick-ring, .c-tick-mark { stroke-dashoffset: 0; }
  .c-plane, .c-dot { display: none; }
}