/* Silver object behind the top of a page, like the coins on the converter page: <div class="art-wrap"><img class="art" ...></div> before <main>. */
.art-wrap { position: absolute; top: 0; left: 0; right: 0; height: min(900px, 100vh); overflow: hidden; pointer-events: none; z-index: 0; }
.art { position: absolute; right: -90px; top: 110px; height: 720px; width: auto; max-width: none; filter: drop-shadow(-30px 30px 50px rgba(0, 0, 0, .14)); }
.art-wrap ~ main { position: relative; z-index: 1; }
@media (max-width: 1100px) { .art { height: 560px; right: -110px; top: 100px; opacity: .55; } }
@media (max-width: 700px) { .art { height: 420px; right: -150px; top: 140px; opacity: .3; } }

/* The /contact form */
.contact { display: grid; gap: 18px; margin-top: 8px; }
.contact label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; color: var(--text); }
.contact input, .contact textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--text); font: 16px/1.4 var(--sans); }
.contact textarea { resize: vertical; min-height: 140px; }
.contact input:focus, .contact textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.contact .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.contact button:disabled { opacity: .6; cursor: default; }
.contact-status { font-size: 14px; color: var(--dim); }
.contact-status.bad { color: #c0392b; }

/* After sending: the form melts away, a letter slides into a silver envelope like the one behind the page,
   the flap folds shut, a seal presses on and the envelope lifts off. On failure it tries, drops back and shakes. */
.contact[hidden] { display: none; }
.contact.leaving { opacity: 0; transform: scale(.97); filter: blur(6px); transition: opacity .45s ease, transform .45s cubic-bezier(.4, 0, .2, 1), filter .45s ease; pointer-events: none; }
.contact-done { --spring: cubic-bezier(.34, 1.36, .64, 1); --glide: cubic-bezier(.65, 0, .35, 1); margin-top: 28px; display: grid; justify-items: start; }
.contact-done[hidden] { display: none; }

.cd-stage { position: relative; width: 168px; height: 150px; margin: 0 0 18px -24px; }
.cd-fly { position: absolute; inset: 0; }
.cd-env { position: absolute; inset: 0; opacity: 0; animation: cd-in .7s var(--spring) forwards; }
.cd-env svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .13)) drop-shadow(0 2px 4px rgba(0, 0, 0, .08)); }
.cd-env svg * { transform-box: fill-box; }
.cd-letter { transform: translateY(-58px); opacity: 0; animation: cd-letter .8s var(--glide) .35s forwards; }
.cd-flap-open { transform-origin: center bottom; animation: cd-fold-a .2s cubic-bezier(.5, 0, 1, 1) 1.1s forwards; }
.cd-flap { transform-origin: center top; transform: scaleY(0); animation: cd-fold-b .32s cubic-bezier(0, 0, .2, 1.25) 1.3s forwards; }
.cd-seal { transform-origin: center; transform: scale(0); animation: cd-pop .45s var(--spring) 1.55s forwards; }

.cd-badge { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: #000; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(0, 0, 0, .18); opacity: 0; transform: scale(.4); }
.cd-badge svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cd-badge path { stroke-dasharray: 1; stroke-dashoffset: 1; }

.legal .contact-done .cd-title { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 500; letter-spacing: -.02em; color: var(--text); outline: none; }
.legal .contact-done .cd-sub { margin: 8px 0 0; font-size: 16.5px; line-height: 1.5; color: var(--dim); }
.cd-again { margin-top: 22px; }
.cd-title, .cd-sub, .cd-again { opacity: 0; transform: translateY(10px); filter: blur(6px); animation: cd-rise .7s cubic-bezier(.2, .8, .2, 1) forwards; }

/* Sent: the check lands where the envelope sat, lined up with the text */
.contact-done.ok .cd-badge { left: 24px; top: auto; bottom: 14px; margin: 0; }
.contact-done.ok .cd-fly { animation: cd-away 1s cubic-bezier(.5, 0, .2, 1) 2.05s forwards; }
.contact-done.ok .cd-badge { animation: cd-badge .6s var(--spring) 2.75s forwards; }
.contact-done.ok .cd-badge path { animation: cd-draw .45s cubic-bezier(.65, 0, .35, 1) 2.95s forwards; }
.contact-done.ok .cd-title { animation-delay: 2.95s; }
.contact-done.ok .cd-sub { animation-delay: 3.05s; }
.contact-done.ok .cd-again { animation-delay: 3.15s; }

/* Failed: the badge is red with an exclamation mark, at the envelope's corner */
.contact-done.bad .cd-fly { animation: cd-fail 1.1s cubic-bezier(.3, 0, .2, 1) 2.05s forwards; }
.contact-done.bad .cd-badge { left: auto; top: 22px; right: 4px; width: 34px; height: 34px; margin: 0; background: #d0342c; box-shadow: 0 6px 14px rgba(208, 52, 44, .35); animation: cd-badge .5s var(--spring) 2.95s forwards; }
.contact-done.bad .cd-badge svg { width: 18px; height: 18px; }
.contact-done.bad .cd-badge path { stroke-dashoffset: 0; }
.contact-done.bad .cd-title { animation-delay: 2.9s; }
.contact-done.bad .cd-sub { animation-delay: 3s; }
.contact-done.bad .cd-again { animation-delay: 3.1s; }

@keyframes cd-in { from { opacity: 0; transform: translateY(16px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes cd-letter { 0% { opacity: 0; transform: translateY(-58px); } 25% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes cd-fold-a { to { transform: scaleY(0); } }
@keyframes cd-fold-b { to { transform: scaleY(1); } }
@keyframes cd-pop { to { transform: scale(1); } }
@keyframes cd-draw { to { stroke-dashoffset: 0; } }
@keyframes cd-badge { to { opacity: 1; transform: none; } }
@keyframes cd-rise { to { opacity: 1; transform: none; filter: none; } }
@keyframes cd-away {
  0% { transform: none; opacity: 1; filter: none; }
  22% { transform: translateY(7px) scale(.97) rotate(1deg); opacity: 1; filter: none; }
  100% { transform: translate(260px, -190px) rotate(-16deg) scale(.32); opacity: 0; filter: blur(3px); }
}
@keyframes cd-fail {
  0% { transform: none; }
  18% { transform: translateY(5px) scale(.98); }
  38% { transform: translate(14px, -16px) rotate(-5deg); }
  56% { transform: translateY(2px) rotate(1deg); }
  66% { transform: translateX(-7px); }
  76% { transform: translateX(6px); }
  86% { transform: translateX(-3px); }
  100% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .contact.leaving { transition: opacity .2s; transform: none; filter: none; }
  .contact-done *, .contact-done *::before { animation-duration: .01s !important; animation-delay: 0s !important; }
}