/* ============================================================================
   vandenostende.net — contact.css
   De duif die het bericht wegdraagt. Alleen transform en opacity bewegen;
   onder prefers-reduced-motion vallen alle duren terug naar 1ms.
   ============================================================================ */

@keyframes kvo-fly {
  0%   { transform: translate(0, 40px) rotate(8deg) scale(.9); opacity: 0; }
  12%  { opacity: 1; }
  55%  { transform: translate(38%, -60px) rotate(-6deg) scale(1); }
  100% { transform: translate(100%, -190px) rotate(-16deg) scale(.86); opacity: 0; }
}
@keyframes kvo-flap {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-5px) scale(1.06); }
}
@keyframes kvo-rise {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: none; }
}
@keyframes kvo-trail {
  0%   { opacity: 0; transform: scaleX(.2); }
  40%  { opacity: .5; }
  100% { opacity: 0; transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  [data-kvo-anim] { animation-duration: 1ms !important; }
}

/* De bevestiging hangt over het formulierpaneel zelf, niet over het scherm:
   ze verschijnt precies waar je op Versturen klikt. */
.sent-overlay {
  position: absolute;
  inset: 0;
  z-index: 800;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(var(--blur-regular)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur-regular)) saturate(180%);
}
.sent-overlay[hidden] { display: none; }

.sent-overlay__stage { position: relative; width: min(520px, 72%); height: 170px; }
.sent-overlay__bird {
  position: absolute;
  left: 0;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  animation: kvo-fly 2.4s var(--ease-out) forwards;
}
.sent-overlay__trail {
  width: 120px;
  height: 3px;
  border-radius: 3px;
  transform-origin: right center;
  background: linear-gradient(90deg, transparent, var(--primary));
  animation: kvo-trail 2.4s var(--ease-out) forwards;
}
.sent-overlay__note {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  padding: 0 var(--space-6);
  animation: kvo-rise .6s var(--ease-out) 1.7s both;
}

@media (max-width: 768px) {
  .form-grid { grid-template-columns: 1fr !important; }
}