/* sendfx.css - "paper plane" send animation for the contact forms.
   Pairs with sendfx.js (window.hlSendFx.play). */

/* ---------- button micro-interaction: the plane nudges up-and-away on hover ---------- */
.contact-form button[type="submit"] svg{
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.contact-form button[type="submit"]:hover:not(:disabled) svg,
.contact-form button[type="submit"]:focus-visible:not(:disabled) svg{
  transform:translate(3px,-3px);
}
.contact-form button[type="submit"]:active:not(:disabled) svg{
  transform:translate(6px,-6px);
}

/* ---------- sending / disabled state ---------- */
.contact-form button[type="submit"].sfx-sending,
.contact-form button[type="submit"].sfx-sending:hover{
  cursor:progress;transform:none;opacity:.85;
}
.contact-form button[type="submit"].sfx-sending svg{ transform:translate(0,0); }
.contact-form button[type="submit"].sfx-lift svg{ visibility:hidden; }

/* generic status line (kontak.html already styles its own) */
.contact-form .form-status{ font-size:.86rem;color:var(--brown-deep,#000000);min-height:1.2em; }

/* ---------- the form folds away while the letter is written ---------- */
.contact-form.sfx-busy,
.contact-form.sfx-finished{ position:relative; }

.contact-form.sfx-busy > *:not(.sfx-done){
  transition:opacity .5s ease, transform .55s cubic-bezier(.4,0,.2,1), filter .5s ease;
}
.contact-form.sfx-folded > *:not(.sfx-done):not(button[type="submit"]),
.contact-form.sfx-folded > button[type="submit"].sfx-gone,
.contact-form.sfx-finished > *:not(.sfx-done){
  opacity:0;transform:translateY(10px) scale(.94);filter:blur(3px);
  visibility:hidden;pointer-events:none;
  transition:opacity .5s ease, transform .55s cubic-bezier(.4,0,.2,1), filter .5s ease, visibility 0s linear .55s;
}
.contact-form.sfx-finished > *:not(.sfx-done){ transition:none; }

/* ---------- overlay ---------- */
.sfx-overlay{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:900;pointer-events:none;overflow:hidden;
}

/* ---------- success state ---------- */
.sfx-done{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:.7rem;padding:1.5rem;
}
.sfx-done-icon{ width:64px;height:64px;color:var(--brown-deep,#000000);margin-bottom:.2rem;overflow:visible; }
.sfx-ring,.sfx-tick{
  fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:0;
}
.sfx-ring{ animation:sfxDraw .95s cubic-bezier(.55,0,.25,1) .05s both; }
.sfx-tick{ stroke-width:2.6;animation:sfxDraw .5s cubic-bezier(.4,0,.2,1) .8s both; }
@keyframes sfxDraw{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }

.sfx-done-title{
  font-family:'Fraunces',serif;font-style:italic;font-weight:400;
  font-size:clamp(1.7rem,5vw,2.3rem);line-height:1.25;color:var(--brown-deep,#000000);margin:.1rem 0 0;
}
.sfx-w{ display:inline-block;white-space:nowrap; }
.sfx-l{
  display:inline-block;
  animation:sfxRise .75s cubic-bezier(.2,.8,.2,1) calc(.65s + var(--i,0) * .055s) both;
}
@keyframes sfxRise{
  from{ opacity:0;transform:translateY(.7em) rotate(5deg);filter:blur(3px); }
  to{ opacity:1;transform:none;filter:none; }
}
.sfx-done-text{
  font-family:'Cormorant Garamond',serif;font-size:1.15rem;line-height:1.5;
  color:var(--ink-soft,#4a4a4a);max-width:30ch;margin:0;
  animation:sfxFadeUp .9s ease 1.15s both;
}
@keyframes sfxFadeUp{ from{ opacity:0;transform:translateY(8px); } to{ opacity:1;transform:none; } }
.sfx-again{
  margin-top:.8rem;background:none;border:none;border-bottom:1px solid var(--brown-pale,#bababa);
  padding:.25rem 0;cursor:pointer;color:var(--brown,#111111);
  font-family:'Jost',sans-serif;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  transition:color .3s ease,border-color .3s ease;
  animation:sfxSlideIn .8s cubic-bezier(.2,.8,.2,1) 1.55s both;
}
.sfx-again:hover,.sfx-again:focus-visible{ color:var(--ink,#111111);border-color:var(--ink,#111111); }
@keyframes sfxSlideIn{ from{ opacity:0;transform:translateX(-22px); } to{ opacity:1;transform:none; } }

@media (prefers-reduced-motion:reduce){
  .contact-form button[type="submit"] svg{ transition:none; }
  .sfx-done *{ animation:none !important; }
}