/* ==========================================================================
   Success popup for the demo form.
   Loaded after form.css; animations.css handles reduced-motion globally.
   ========================================================================== */

.qi-modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:24px}
.qi-modal[hidden]{display:none}

.qi-modal-veil{
  position:absolute;inset:0;
  background:rgba(9,17,38,.62);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .3s ease;
}
.qi-modal.open .qi-modal-veil{opacity:1}

.qi-modal-card{
  position:relative;z-index:1;
  width:min(460px,100%);max-height:calc(100vh - 48px);overflow-y:auto;
  background:#fff;border-radius:24px;padding:40px 34px 30px;text-align:center;
  box-shadow:0 40px 90px rgba(2,20,60,.4),0 0 0 1px rgba(255,255,255,.6) inset;
  opacity:0;transform:translateY(22px) scale(.94);
  transition:opacity .35s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.34,1.4,.64,1);
}
.qi-modal.open .qi-modal-card{opacity:1;transform:translateY(0) scale(1)}

/* Soft green wash behind the tick. */
.qi-modal-glow{
  position:absolute;top:-90px;left:50%;width:320px;height:220px;margin-left:-160px;
  background:radial-gradient(closest-side,rgba(34,197,94,.20),transparent 72%);
  pointer-events:none;
}

.qi-modal-close{
  position:absolute;top:14px;right:14px;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:#f1f5f9;color:#64748b;cursor:pointer;
  transition:background .2s,color .2s,transform .2s cubic-bezier(.34,1.56,.64,1);
}
.qi-modal-close svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
.qi-modal-close:hover{background:#e2e8f0;color:#0f172a;transform:rotate(90deg)}
.qi-modal-close:focus-visible{outline:2px solid var(--blue-light);outline-offset:2px}

/* ── the tick ─────────────────────────────────────────── */
.qi-modal-mark{position:relative;width:88px;height:88px;margin:0 auto 22px}
.qi-modal-mark svg{width:100%;height:100%;overflow:visible}
.qi-mark-ring{
  fill:rgba(34,197,94,.10);stroke:#22c55e;stroke-width:2.5;
  stroke-dasharray:158;stroke-dashoffset:158;transform-origin:center;transform:rotate(-90deg);
}
.qi-mark-tick{
  fill:none;stroke:#16a34a;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:44;stroke-dashoffset:44;
}
.qi-modal.open .qi-mark-ring{animation:qiRing .55s cubic-bezier(.22,1,.36,1) .1s forwards}
.qi-modal.open .qi-mark-tick{animation:qiTick .4s cubic-bezier(.22,1,.36,1) .5s forwards}
@keyframes qiRing{to{stroke-dashoffset:0}}
@keyframes qiTick{to{stroke-dashoffset:0}}

/* ── copy ─────────────────────────────────────────────── */
.qi-modal-title{
  font-family:'Space Grotesk',sans-serif;font-size:25px;font-weight:700;
  letter-spacing:-.02em;color:var(--dark);margin-bottom:10px;
}
.qi-modal-text{font-size:15px;color:var(--muted);line-height:1.7;margin:0 auto 22px;max-width:34ch}
.qi-modal-text strong{color:var(--dark2)}

.qi-modal-ref{
  display:flex;flex-direction:column;gap:4px;align-items:center;
  padding:14px 18px;margin-bottom:22px;
  background:var(--blue-pale);border:1px dashed #bfdbfe;border-radius:14px;
}
.qi-modal-ref span{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#60a5fa}
.qi-modal-ref strong{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;letter-spacing:.04em;color:var(--blue)}

.qi-modal-next{list-style:none;text-align:left;display:grid;gap:11px;margin-bottom:26px}
.qi-modal-next li{
  display:flex;gap:11px;align-items:flex-start;
  font-size:13.5px;color:var(--dark3);line-height:1.6;
}
.qi-modal-next li > span:last-child{min-width:0}
.qi-modal-next strong{color:var(--dark2);overflow-wrap:anywhere}
.qi-dot{
  flex:none;width:7px;height:7px;margin-top:7px;border-radius:50%;
  background:linear-gradient(135deg,#3b82f6,#22c55e);
}

.qi-modal-done{width:100%;padding:14px 28px}
.qi-modal-foot{font-size:12.5px;color:var(--muted);margin-top:14px}
.qi-modal-foot a{color:var(--blue);font-weight:600}
.qi-modal-foot a:hover{text-decoration:underline}

/* Staggered entrance for the card's contents. */
.qi-modal.open .qi-modal-title,
.qi-modal.open .qi-modal-text,
.qi-modal.open .qi-modal-ref,
.qi-modal.open .qi-modal-next,
.qi-modal.open .qi-modal-done,
.qi-modal.open .qi-modal-foot{animation:qiRise .5s cubic-bezier(.22,1,.36,1) both}
.qi-modal.open .qi-modal-title{animation-delay:.22s}
.qi-modal.open .qi-modal-text{animation-delay:.29s}
.qi-modal.open .qi-modal-ref{animation-delay:.36s}
.qi-modal.open .qi-modal-next{animation-delay:.43s}
.qi-modal.open .qi-modal-done{animation-delay:.50s}
.qi-modal.open .qi-modal-foot{animation-delay:.57s}
@keyframes qiRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* Guarantee. The stagger above starts every element at opacity 0, so a stalled
   animation clock — a throttled tab, a backgrounded window — could otherwise
   leave the visitor staring at an empty card at the one moment that matters.
   demo-form.js adds .qi-shown a second after opening, which ends the argument. */
.qi-modal.qi-shown .qi-modal-title,
.qi-modal.qi-shown .qi-modal-text,
.qi-modal.qi-shown .qi-modal-ref,
.qi-modal.qi-shown .qi-modal-next,
.qi-modal.qi-shown .qi-modal-done,
.qi-modal.qi-shown .qi-modal-foot{animation:none;opacity:1;transform:none}
.qi-modal.qi-shown .qi-modal-card{opacity:1;transform:none}
.qi-modal.qi-shown .qi-modal-veil{opacity:1}
.qi-modal.qi-shown .qi-mark-ring,
.qi-modal.qi-shown .qi-mark-tick{animation:none;stroke-dashoffset:0}

/* The page behind must not scroll while the popup is up. */
body.qi-modal-open{overflow:hidden}

@media(max-width:560px){
  .qi-modal{padding:14px}
  .qi-modal-card{padding:34px 22px 24px;border-radius:20px}
  .qi-modal-title{font-size:22px}
  .qi-modal-mark{width:74px;height:74px}
}

@media (prefers-reduced-motion: reduce){
  .qi-modal-card,.qi-modal-veil{transition:none;opacity:1;transform:none}
  .qi-mark-ring,.qi-mark-tick{stroke-dashoffset:0;animation:none}
  .qi-modal.open .qi-modal-title,
  .qi-modal.open .qi-modal-text,
  .qi-modal.open .qi-modal-ref,
  .qi-modal.open .qi-modal-next,
  .qi-modal.open .qi-modal-done,
  .qi-modal.open .qi-modal-foot{animation:none;opacity:1;transform:none}
}