/* ══════════════════════════════════════════════════════════════════
   QuickSeba — animation kit
   ──────────────────────────────────────────────────────────────────
   অবস্থান: /assets/css/qs-anim.css   (সাথে লাগে /assets/qs-anim.js)

   ৭টি moment — প্রতিটির নিজের রঙ, নিজের motif, নিজের সময়রেখা:

     login          টিক                    কমলা
     signup         মানুষ+প্লাস → টিক       কমলা
     order          কাগজের প্লেন → টিক      কমলা
     payment-submit টাকা + ঘুরন্ত রিং       অ্যাম্বার   (অনির্দিষ্ট বার)
     payment-done   কয়েন → টিক             সবুজ      (+ কনফেত্তি)
     cancel         ক্রস, কাঁপুনি           লাল        (ছোট টুকরো নিচে পড়ে)
     wish           হার্ট, ধুকধুক           গোলাপি     (হার্ট উপরে ভেসে যায়)

   রঙ login-ui.css ও qs-swal-theme.css এর সাথে মিলিয়ে রাখা হয়েছে, যাতে
   অ্যানিমেশন সাইটের অংশ মনে হয় — আলাদা কোনো ভাষা না।

   prefers-reduced-motion:reduce হলে সব থেমে যায় (ওভারলে তখনো দেখা যায়,
   শুধু নড়াচড়া বন্ধ)।
   ══════════════════════════════════════════════════════════════════ */

:root {
  --qa-ink: #0f172a;
  --qa-muted: #64748b;

  /* variant ডিফল্ট — .qsAnim-overlay--<variant> এ override হয় */
  --qa-a1: #ff8a1f;
  --qa-a2: #ff6a00;
  --qa-a3: #ff4d1d;

  --qa-glow: rgba(255, 106, 0, .45);
  --qa-ring: rgba(255, 106, 0, .55);

  --qa-dur: 1950ms;
  --qa-bar: 1500ms;
  --qa-t-halo: 900ms;
  --qa-t-disc: 560ms;
  --qa-t-check: 420ms;
  --qa-t-motif: 900ms;
}

/* ── variant অনুযায়ী রঙ ও টাইমলাইন ─────────────────────────── */
.qsAnim-overlay--login,
.qsAnim-overlay--signup,
.qsAnim-overlay--order {
  --qa-a1: #ff8a1f; --qa-a2: #ff6a00; --qa-a3: #ff4d1d;
  --qa-glow: rgba(255, 106, 0, .42);
  --qa-ring: rgba(255, 106, 0, .5);
}
.qsAnim-overlay--payment-submit {
  --qa-a1: #fcd34d; --qa-a2: #f59e0b; --qa-a3: #d97706;
  --qa-glow: rgba(245, 158, 11, .40);
  --qa-ring: rgba(245, 158, 11, .5);
}
.qsAnim-overlay--payment-done {
  --qa-a1: #6ee7b7; --qa-a2: #10b981; --qa-a3: #047857;
  --qa-glow: rgba(16, 185, 129, .40);
  --qa-ring: rgba(16, 185, 129, .5);
}
.qsAnim-overlay--cancel {
  --qa-a1: #fca5a5; --qa-a2: #ef4444; --qa-a3: #b91c1c;
  --qa-glow: rgba(239, 68, 68, .34);
  --qa-ring: rgba(239, 68, 68, .45);
}
.qsAnim-overlay--wish {
  --qa-a1: #fda4af; --qa-a2: #f43f5e; --qa-a3: #be123c;
  --qa-glow: rgba(244, 63, 94, .38);
  --qa-ring: rgba(244, 63, 94, .48);
}

/* সময়রেখা — সব variant একই কাঠামো, শুধু দেরি আলাদা */
.qsAnim-overlay--login          { --qa-d-halo:150ms; --qa-d-disc:200ms; --qa-d-check:620ms; --qa-d-motif:0ms;   --qa-d-sheen:1050ms; --qa-d-title:760ms; --qa-d-sub:880ms;  --qa-d-chip:960ms;  --qa-d-bar:900ms; }
.qsAnim-overlay--signup         { --qa-d-halo:150ms; --qa-d-disc:190ms; --qa-d-motif:330ms; --qa-d-check:800ms; --qa-d-sheen:1230ms; --qa-d-title:900ms; --qa-d-sub:1010ms; --qa-d-chip:1090ms; --qa-d-bar:1030ms; }
.qsAnim-overlay--order          { --qa-d-halo:150ms; --qa-d-disc:190ms; --qa-d-motif:300ms; --qa-d-check:820ms; --qa-d-sheen:1250ms; --qa-d-title:900ms; --qa-d-sub:1020ms; --qa-d-chip:1100ms; --qa-d-bar:1040ms; }
.qsAnim-overlay--payment-submit { --qa-d-halo:140ms; --qa-d-disc:190ms; --qa-d-motif:320ms; --qa-d-check:100000ms; --qa-d-sheen:0ms; --qa-d-title:820ms; --qa-d-sub:940ms;   --qa-d-chip:1020ms; --qa-d-bar:960ms; }
.qsAnim-overlay--payment-done   { --qa-d-halo:150ms; --qa-d-disc:190ms; --qa-d-motif:300ms; --qa-d-check:840ms; --qa-d-sheen:1270ms; --qa-d-title:920ms; --qa-d-sub:1040ms; --qa-d-chip:1120ms; --qa-d-bar:1060ms; }
.qsAnim-overlay--cancel         { --qa-d-halo:140ms; --qa-d-disc:190ms; --qa-d-motif:0ms;   --qa-d-check:420ms; --qa-d-sheen:0ms;    --qa-d-title:820ms; --qa-d-sub:940ms;   --qa-d-chip:1020ms; --qa-d-bar:960ms; }
.qsAnim-overlay--wish           { --qa-d-halo:150ms; --qa-d-disc:200ms; --qa-d-motif:0ms;   --qa-d-check:100000ms; --qa-d-sheen:0ms; --qa-d-title:760ms; --qa-d-sub:880ms;  --qa-d-chip:960ms;  --qa-d-bar:900ms; }

/* ── পেছনের পর্দা ─────────────────────────────────────────────── */
.qsAnim-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
  background:
    radial-gradient(600px 340px at 50% 34%, var(--qa-glow), transparent 68%),
    rgba(11, 18, 32, .78);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  backdrop-filter: blur(8px) saturate(1.05);
  animation: qsAnimFadeIn .24s ease both;
  overscroll-behavior: contain;
}
.qsAnim-overlay.is-out { animation: qsAnimFadeOut .28s ease both; }
html.qs-anim-lock, html.qs-anim-lock body { overflow: hidden !important; }

/* ── কার্ড ────────────────────────────────────────────────────── */
.qsAnim-card {
  position: relative;
  width: 100%;
  max-width: 336px;
  padding: 26px 22px 22px;
  border-radius: 24px;
  background: #fff;
  text-align: center;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .55) inset,
    0 34px 72px -20px rgba(2, 8, 23, .58),
    0 12px 28px -14px rgba(2, 8, 23, .36);
  animation: qsAnimCardIn .54s cubic-bezier(.16, 1, .3, 1) .04s both;
}
.qsAnim-overlay.is-out .qsAnim-card { animation: qsAnimCardOut .26s ease both; }
.qsAnim-overlay--cancel .qsAnim-card { animation: qsAnimCardIn .54s cubic-bezier(.16, 1, .3, 1) .04s both, qsAnimShake .52s cubic-bezier(.36, .07, .19, .97) 480ms both; }

/* কার্ডের মাথায় আগে একটা রঙিন বার ছিল (.qsAnim-card::before) —
   ব্যবহারকারীর অনুরোধে সরানো হয়েছে, এখন কার্ডটা পরিষ্কার সাদা। */

/* ── মার্ক স্টেজ ─────────────────────────────────────────────── */
.qsAnim-stage {
  position: relative;
  width: 124px;
  height: 124px;
  margin: 2px auto 12px;
}
/* বৃত্তের পেছনে নরম আভা */
.qsAnim-stage::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 132px; height: 132px;
  margin: -66px 0 0 -66px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--qa-glow), transparent 66%);
  opacity: 0;
  animation: qsAnimGlow 1.5s ease var(--qa-d-disc) both;
}
.qsAnim-mark {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.qsAnim-mark * { transform-box: view-box; transform-origin: 50% 50%; }

.qsAnim-halo {
  fill: none;
  stroke: var(--qa-a2);
  stroke-width: 2;
  opacity: 0;
  animation: qsAnimHalo var(--qa-t-halo) cubic-bezier(.2, .7, .3, 1) var(--qa-d-halo) both;
}
.qsAnim-halo--2 { animation-delay: calc(var(--qa-d-halo) + 200ms); }
.qsAnim-halo--3 { animation-delay: calc(var(--qa-d-halo) + 400ms); }

.qsAnim-disc {
  fill: url(#qsAnimGrad);
  opacity: 0;
  animation: qsAnimDisc var(--qa-t-disc) cubic-bezier(.2, 1.5, .4, 1) var(--qa-d-disc) both;
}
.qsAnim-spec {
  fill: #fff;
  opacity: 0;
  animation: qsAnimSpec .5s ease calc(var(--qa-d-disc) + 220ms) both;
}
.qsAnim-sheen {
  fill: none;
  stroke: rgba(255, 255, 255, .85);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 26 240;
  opacity: 0;
  animation:
    qsAnimSheenSpin 1.5s cubic-bezier(.4, 0, .2, 1) var(--qa-d-sheen) both,
    qsAnimSheenFade 1.5s linear var(--qa-d-sheen) both;
}

.qsAnim-check {
  fill: none;
  stroke: #fff;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 62;
  stroke-dashoffset: 62;
  animation: qsAnimDraw var(--qa-t-check) cubic-bezier(.65, 0, .35, 1) var(--qa-d-check) forwards;
}

.qsAnim-motif { fill: #fff; opacity: 0; animation: qsAnimMotifOut var(--qa-t-motif) cubic-bezier(.3, .9, .35, 1) var(--qa-d-motif) both; }
.qsAnim-motif--stroke { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.qsAnim-motif--stay { animation: qsAnimMotifStay .6s cubic-bezier(.2, 1.4, .4, 1) var(--qa-d-disc) both; }
.qsAnim-motif--soft { fill: rgba(255, 255, 255, .92); }

/* ── কোন variant-এ কী দেখা যায় ─────────────────────────────── */
/* login: শুধু টিক */
.qsAnim-overlay--login .qsAnim-motif,
.qsAnim-overlay--wish .qsAnim-check,
.qsAnim-overlay--payment-submit .qsAnim-check { display: none; }

/* কার্ড motif-এর নিজের রঙ */
.qsAnim-overlay--cancel .qsAnim-disc { fill: url(#qsAnimGradBad); }
.qsAnim-overlay--payment-done .qsAnim-disc { fill: url(#qsAnimGradOk); }
.qsAnim-overlay--payment-submit .qsAnim-disc { fill: url(#qsAnimGradWait); }
.qsAnim-overlay--wish .qsAnim-disc { fill: url(#qsAnimGradRose); }

/* থাকার motif — payment-submit (টাকা) আর wish (হার্ট) */
.qsAnim-overlay--payment-submit .qsAnim-motif { animation-name: qsAnimMotifStay; }
.qsAnim-overlay--wish .qsAnim-motif { animation-name: qsAnimBeat; }
.qsAnim-overlay--cancel .qsAnim-motif { display: none; }

/* signup-এর প্লাসটা মানুষ-আইকনের পরে আসে */
.qsAnim-motif--plus { animation-delay: calc(var(--qa-d-motif) + 90ms); }
.qsAnim-overlay--signup .qsAnim-motif--plus { animation-delay: calc(var(--qa-d-motif) + 90ms); }

/* cancel-এর ক্রস — দুই রেখা, একটার পর একটা আঁকা হয় */
.qsAnim-x {
  fill: none;
  stroke: #fff;
  stroke-width: 7.5;
  stroke-linecap: round;
  stroke-dasharray: 53;
  stroke-dashoffset: 53;
  animation: qsAnimDraw 330ms cubic-bezier(.65, 0, .35, 1) var(--qa-d-check) forwards;
}
.qsAnim-x2 { animation-delay: calc(var(--qa-d-check) + 120ms); }

/* payment-submit-এর ঘুরন্ত রিং */
.qsAnim-orbit {
  fill: none;
  stroke: var(--qa-a2);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 24 296;
  opacity: 0;
  animation:
    qsAnimOrbitIn 320ms ease calc(var(--qa-d-disc) + 180ms) both,
    qsAnimSpin 1.3s linear calc(var(--qa-d-disc) + 180ms) infinite;
}

/* যেখানে sheen লাগে না */
.qsAnim-overlay--payment-submit .qsAnim-sheen,
.qsAnim-overlay--cancel .qsAnim-sheen,
.qsAnim-overlay--wish .qsAnim-sheen { display: none; }

/* ── কণা ────────────────────────────────────────────────────── */
.qsAnim-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.qsAnim-burst span {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--s, 8px);
  height: var(--s, 8px);
  border-radius: 2px;
  background: var(--c, var(--qa-a2));
  opacity: 0;
  animation: qsAnimBurst var(--bd, 900ms) cubic-bezier(.18, .86, .32, 1) var(--bdel, 0ms) both;
}
/* cancel: নিচে পড়ে যায় · wish: উপরে ভেসে যায় */
.qsAnim-overlay--cancel .qsAnim-burst span { animation-name: qsAnimFall; }
.qsAnim-overlay--wish .qsAnim-burst span { animation-name: qsAnimFloat; }
.qsAnim-burst i {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--s, 6px);
  height: var(--s, 6px);
  border-radius: 50%;
  background: var(--c, var(--qa-a1));
  opacity: 0;
  animation: qsAnimSpark 620ms cubic-bezier(.16, .9, .3, 1) var(--bdel, 0ms) both;
}

/* ── লেখা ───────────────────────────────────────────────────── */
.qsAnim-title {
  margin: 0;
  font-size: 19.5px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -.15px;
  color: var(--qa-ink);
  animation: qsAnimRise .46s cubic-bezier(.16, 1, .3, 1) var(--qa-d-title) both;
}
.qsAnim-sub {
  margin: 7px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.65;
  color: var(--qa-muted);
  word-break: break-word;
  animation: qsAnimRise .46s cubic-bezier(.16, 1, .3, 1) var(--qa-d-sub) both;
}
.qsAnim-sub:empty { display: none; }

/* ঐচ্ছিক ছোট পিল — যেমন ৳ 500 বা অর্ডার নম্বর */
.qsAnim-chip {
  display: inline-block;
  margin: 12px 0 0;
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1px;
  color: var(--qa-a3);
  /* প্রথম দুই লাইন fallback — color-mix() না চেনা ব্রাউজারেও পিলটা ঠিক দেখাবে */
  background: #fff6ef;
  border: 1px solid #ffe0c7;
  background: color-mix(in srgb, var(--qa-a1) 14%, #fff);
  border: 1px solid color-mix(in srgb, var(--qa-a2) 30%, #fff);
  animation: qsAnimChip .5s cubic-bezier(.2, 1.35, .4, 1) var(--qa-d-chip) both;
}
.qsAnim-chip:empty { display: none; }

/* ── প্রগ্রেস বার ───────────────────────────────────────────── */
.qsAnim-bar {
  margin: 18px auto 0;
  width: 100%;
  height: 4px;
  border-radius: 99px;
  background: #eef2f7;
  overflow: hidden;
  animation: qsAnimRise .4s ease var(--qa-d-bar) both;
}
.qsAnim-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--qa-a1), var(--qa-a2) 60%, var(--qa-a3));
  animation: qsAnimBar var(--qa-bar) cubic-bezier(.4, 0, .2, 1) var(--qa-d-bar) both;
}
/* payment-submit: কতটা বাকি তা জানা নেই, তাই ঘুরন্ত বার */
.qsAnim-overlay--payment-submit .qsAnim-bar i {
  width: 45%;
  animation: qsAnimBarLoop 1.15s cubic-bezier(.45, .05, .55, .95) var(--qa-d-bar) infinite;
}

/* ── shake (cancel) ─────────────────────────────────────────── */
@keyframes qsAnimShake {
  0%, 100% { transform: translateX(0); }
  12% { transform: translateX(-9px) rotate(-1.1deg); }
  28% { transform: translateX(8px) rotate(.9deg); }
  44% { transform: translateX(-6px) rotate(-.6deg); }
  62% { transform: translateX(4px) rotate(.4deg); }
  80% { transform: translateX(-2px); }
}

/* ── বাটনের ভেতরের লোডার ─────────────────────────────────────── */
.qs-anim-btn-loading { position: relative; pointer-events: none; opacity: .92; }
.qs-anim-btn-loading .qs-anim-spin {
  display: inline-block;
  vertical-align: -3px;
  width: 17px;
  height: 17px;
  margin-inline-end: 9px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .38);
  border-top-color: #fff;
  animation: qsAnimSpin .68s linear infinite;
}
.qs-anim-shimmer {
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 68%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: qsAnimShimmer 1.15s linear infinite;
}

/* ── হার্ট বাটন (উইশলিস্ট) ─────────────────────────────────── */
/* কার্ডের মাথায় ব্যাজের পাশে বসে — client-ui.css এর .qs-svc-top
   flex-row-টাই আগের মতো দুই সন্তান নিয়েই থাকে।
   সারিটা ছোট কার্ডেও যেন ভেঙে না পড়ে: আইকন চেপে যায় না, ব্যাজটা
   দরকারে ছোট হয়ে কেটে যায়, হার্ট বাটন কখনো সরে যায় না। */
.qs-svc-ico { flex: 0 0 auto; }
.qs-svc-top { min-width: 0; }
.qs-svc-top-r { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; }
.qs-svc-top-r > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* কার্ডের ভেতরের জায়গা ১৫০px-এর চেয়ে কম হলে (মোবাইলে ২ কলামে কার্ড
   ~১৫৬px, অর্থাৎ ভেতরে ~১২৪px) ব্যাজের লেখাটা আর আঁটে না — তখন
   ড্যাশবোর্ডের বাঁ পাশের কিংবদন্তির মতোই শুধু একটা রঙিন ডট থাকে:
   সবুজ = চালু, ধূসর = বন্ধ।
   থ্রেশহোল্ড ১৫০px ইচ্ছাকৃত: ডেস্কটপে কার্ড ~১৯৫px (ভেতরে ~১৬৪px)
   থাকে, সেখানে আগের মতোই পুরো "সার্ভিস চালু" লেখা দেখা যায়।
   container query যেসব ব্রাউজার চেনে না, সেখানে উপরের ellipsis
   নিয়মটাই কাজ করে — লেখা একটু কেটে যায়, কিন্তু সারি ভাঙে না। */
.qs-svc { container-type: inline-size; }

/* টাইট কার্ড (ডেস্কটপের ঘন গ্রিডে ~১৯৫px, ভেতরে ~১৬৩px) — হার্ট বাটনটা
   যোগ হওয়ায় "সার্ভিস চালু" পুরোটা আর আঁটে না। তাই ফাঁক আর বাটন একটু
   ছোট করে জায়গা খালি করা হয়, যাতে লেখাটা পুরোটাই দেখা যায়। */
@container (max-width: 212px) {
  .qs-svc-top { gap: 5px; }
  .qs-svc-top-r { gap: 5px; }
  .qs-svc-top-r > span:first-child { font-size: 11px; padding: 3px 8px; }
  .qsWish { width: 26px; height: 26px; }
  .qsWish svg { width: 13px; height: 13px; }
}

/* আরও সরু হলে (মোবাইলে ২ কলাম) লেখাটাই আঁটে না — তখন ডট। এই নিয়মটা
   নিচে থাকায় উপরের font-size:11px কে ওভাররাইড করে। */
@container (max-width: 150px) {
  .qs-svc-top { gap: 6px; }
  .qs-svc-top-r { gap: 6px; }
  .qs-svc-top-r > span:first-child {
    font-size: 0;
    padding: 0;
    width: 8px;
    height: 8px;
    min-width: 8px;
    border: 0;
    border-radius: 50%;
  }
}
.qsWish {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 3px 10px rgba(15, 23, 42, .14);
  display: grid;
  place-items: center;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.qsWish:hover { transform: scale(1.08); box-shadow: 0 5px 14px rgba(15, 23, 42, .2); }
.qsWish:active { transform: scale(.94); }
.qsWish:focus-visible { outline: 2px solid var(--qs-orange, #ff6a00); outline-offset: 2px; }
.qsWish svg { width: 16px; height: 16px; display: block; }
.qsWish .qsWish-path {
  fill: none;
  stroke: #94a3b8;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .18s ease, fill .18s ease;
}
.qsWish.on { background: #fff1f3; }
.qsWish.on .qsWish-path { fill: #f43f5e; stroke: #f43f5e; }
.qsWish.pop .qsWish-path { animation: qsWishPop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.qsWish.out .qsWish-path { animation: qsWishOut .34s ease both; }
.qsWish-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}
.qsWish-burst i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--s, 5px);
  height: var(--s, 5px);
  border-radius: 50%;
  background: var(--c, #f43f5e);
  opacity: 0;
  animation: qsWishBit 620ms cubic-bezier(.18, .86, .32, 1) var(--bdel, 0ms) both;
}
/* কার্ডে কিছুই লিখতে না দিলেও আইকনটা যেন কোণায় ঠিক জায়গায় বসে */
.qs-svc { position: relative; }
.qs-svc.is-wished { box-shadow: 0 0 0 1.5px rgba(244, 63, 94, .35), 0 10px 24px -14px rgba(15, 23, 42, .3); }

/* "শুধু পছন্দের" ফিল্টার */
.qs-wish-filter.on {
  background: linear-gradient(135deg, #fb7185, #e11d48) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.qs-svc.is-wish-hidden { display: none !important; }

/* ── লগইন / রেজিস্টার কার্ডের প্রবেশ ───────────────────────── */
.qs-anim-in .qs-card { animation: qsAnimCardIn .52s cubic-bezier(.16, 1, .3, 1) both; }
.qs-anim-in .qs-logo-img,
.qs-anim-in .qs-card h2,
.qs-anim-in .qs-card .sub,
.qs-anim-in .qs-tabs,
.qs-anim-in .qs-card form > *,
.qs-anim-in .qs-card .dv,
.qs-anim-in .qs-card .br,
.qs-anim-in .qs-card .hl {
  animation: qsAnimRise .5s cubic-bezier(.16, 1, .3, 1) both;
}
.qs-anim-in .qs-card h2 { animation-delay: .05s; }
.qs-anim-in .qs-card .sub { animation-delay: .09s; }
.qs-anim-in .qs-tabs { animation-delay: .13s; }
.qs-anim-in .qs-card form > *:nth-child(1) { animation-delay: .18s; }
.qs-anim-in .qs-card form > *:nth-child(2) { animation-delay: .23s; }
.qs-anim-in .qs-card form > *:nth-child(3) { animation-delay: .28s; }
.qs-anim-in .qs-card form > *:nth-child(4) { animation-delay: .33s; }
.qs-anim-in .qs-card form > *:nth-child(5) { animation-delay: .38s; }
.qs-anim-in .qs-card .dv { animation-delay: .43s; }
.qs-anim-in .qs-card .br { animation-delay: .47s; }
.qs-anim-in .qs-card .hl { animation-delay: .51s; }
.qs-anim-in .qs-logo-img { animation-name: qsAnimLogoIn; }

/* ── keyframes ──────────────────────────────────────────────── */
@keyframes qsAnimFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes qsAnimFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes qsAnimCardIn {
  0%   { opacity: 0; transform: translateY(28px) scale(.9); }
  62%  { opacity: 1; transform: translateY(-5px) scale(1.016); }
  100% { opacity: 1; transform: none; }
}
@keyframes qsAnimCardOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(10px) scale(.965); }
}
@keyframes qsAnimLogoIn {
  0%   { opacity: 0; transform: translateY(14px) scale(.94); }
  100% { opacity: 1; transform: none; }
}
@keyframes qsAnimGlow {
  0%   { opacity: 0; transform: scale(.5); }
  45%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: .72; transform: scale(1); }
}
@keyframes qsAnimHalo {
  0%   { opacity: .6; transform: scale(.48); }
  72%  { opacity: 0; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(1.6); }
}
@keyframes qsAnimDisc {
  0%   { opacity: 0; transform: scale(.24); }
  62%  { opacity: 1; transform: scale(1.14); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes qsAnimSpec {
  0%   { opacity: 0; transform: translate(0, 3px); }
  100% { opacity: .3; transform: none; }
}
@keyframes qsAnimOrbitIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes qsAnimSheenSpin { from { transform: rotate(-40deg); } to { transform: rotate(320deg); } }
@keyframes qsAnimSheenFade { 0% { opacity: 0; } 22% { opacity: .95; } 100% { opacity: 0; } }
@keyframes qsAnimDraw { to { stroke-dashoffset: 0; } }
@keyframes qsAnimMotifOut {
  0%   { opacity: 0; transform: translate(0, 12px) scale(.6); }
  30%  { opacity: 1; transform: none; }
  68%  { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translate(14px, -20px) scale(1.18); }
}
@keyframes qsAnimMotifStay {
  0%   { opacity: 0; transform: scale(.55); }
  65%  { opacity: 1; transform: scale(1.07); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes qsAnimBeat {
  0%   { opacity: 0; transform: scale(.4); }
  30%  { opacity: 1; transform: scale(1.18); }
  45%  { transform: scale(.94); }
  60%  { transform: scale(1.11); }
  75%  { transform: scale(1); }
  86%  { transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes qsAnimRise { from { opacity: 0; transform: translateY(11px); } to { opacity: 1; transform: none; } }
@keyframes qsAnimChip {
  0%   { opacity: 0; transform: translateY(8px) scale(.9); }
  100% { opacity: 1; transform: none; }
}
@keyframes qsAnimBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes qsAnimBarLoop {
  0%   { transform: translateX(-105%); }
  100% { transform: translateX(232%); }
}
@keyframes qsAnimBurst {
  0%   { opacity: 1; transform: translate(-50%, -50%) rotate(var(--a)) translateY(0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(.16) rotate(180deg); }
}
@keyframes qsAnimFall {
  0%   { opacity: 1; transform: translate(-50%, -50%) rotate(var(--a)) translateY(0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateY(var(--d)) scale(.4) rotate(140deg); }
}
@keyframes qsAnimFloat {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateY(6px) scale(.5); }
  22%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(1.05); }
}
@keyframes qsAnimSpark {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateY(0) scale(.2); }
  22%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(1); }
}
@keyframes qsAnimSpin { to { transform: rotate(360deg); } }
@keyframes qsAnimShimmer { from { background-position: 140% 0; } to { background-position: -140% 0; } }
@keyframes qsWishPop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); }
  62%  { transform: scale(.92); }
  100% { transform: scale(1); }
}
@keyframes qsWishOut {
  0%   { transform: scale(1); }
  40%  { transform: scale(.72); }
  100% { transform: scale(1); }
}
@keyframes qsWishBit {
  0%   { opacity: 1; transform: translate(-50%, -50%) rotate(var(--a)) translateY(0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(.2); }
}

/* ── মোবাইল ─────────────────────────────────────────────────── */
@media (max-width: 380px) {
  .qsAnim-card { padding: 22px 18px 18px; border-radius: 21px; max-width: 320px; }
  .qsAnim-stage { width: 108px; height: 108px; }
  .qsAnim-stage::before { width: 116px; height: 116px; margin: -58px 0 0 -58px; }
  .qsAnim-title { font-size: 17.5px; }
  .qsAnim-chip { font-size: 12.5px; }
}

/* ── নড়াচড়া বন্ধ রাখার অনুরোধ ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .qsAnim-overlay,
  .qsAnim-overlay.is-out,
  .qsAnim-card,
  .qsAnim-overlay--cancel .qsAnim-card,
  .qsAnim-overlay.is-out .qsAnim-card { animation-duration: .01ms !important; }

  .qsAnim-halo,
  .qsAnim-sheen,
  .qsAnim-burst,
  .qsAnim-stage::before { display: none !important; }

  .qsAnim-disc,
  .qsAnim-spec,
  .qsAnim-check,
  .qsAnim-motif,
  .qsAnim-title,
  .qsAnim-sub,
  .qsAnim-chip,
  .qsAnim-bar {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
  }
  .qsAnim-bar i { animation: none !important; transform: scaleX(1); }
  .qsAnim-overlay--payment-submit .qsAnim-bar i { animation: none !important; transform: none; width: 100%; }

  .qs-anim-in .qs-card,
  .qs-anim-in :is(.qs-logo-img, .qs-card h2, .qs-card .sub, .qs-tabs, form > *, .dv, .br, .hl) {
    animation: none !important;
  }
  .qs-anim-shimmer { animation: none !important; color: inherit !important; }
  .qs-anim-btn-loading .qs-anim-spin { animation-duration: 1.4s; }
  .qsWish, .qsWish * { transition: none !important; animation: none !important; }
}