/* ============================================
   FLOW — Rocket "Getting loan approval" walkthrough: the screens. Positions come
   from the Figma frames (Animation 5, 393x852). The script sets data-* on
   .fd-stage (pg, hs, pr, dd, nx, kb, gt) and these rules do the animating.
   Everything is scoped to .ao-root so it can sit next to the other flows.
   ============================================ */
.ao-root {
  position: absolute; inset: 0; overflow: hidden; background: #111;
  --fd-font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  font-family: var(--fd-font); color: #111;
}
:where(.ao-root > section, .ao-root > div) { position: absolute; left: 0; top: 0; width: 393px; height: 852px; }
.ao-root img { filter: none; }

/* ---------- shared bits ---------- */
.ao-t { position: absolute; margin: 0; white-space: nowrap; font-size: 16px; line-height: 21px; font-weight: 400; color: #111; }
.ao-t.ao-wr { white-space: normal; }
.ao-t.m16 { font-size: 16px; line-height: 21px; font-weight: 500; }
.ao-t.r16 { font-size: 16px; line-height: 21px; font-weight: 400; }
.ao-t.m14 { font-size: 14px; line-height: 18px; font-weight: 500; }
.ao-t.r14 { font-size: 14px; line-height: 18px; font-weight: 400; color: #545454; }
.ao-t.m12 { font-size: 12px; line-height: 16px; font-weight: 500; }
.ao-t.m24 { font-size: 24px; line-height: 31px; font-weight: 500; }
.ao-t.m32 { font-size: 32px; line-height: 40px; font-weight: 500; }
.ao-t.ao-white { color: #fff; }
.ao-t.ao-gray { color: #545454; }
.ao-t.ao-ink { color: #111; }
.ao-t.ao-n { color: #21273d; }
.ao-t.ao-c { text-align: center; }
.ao-i { position: absolute; display: block; max-width: none; pointer-events: none; }

.ao-pills i { position: absolute; top: var(--pt, 24px); height: 16px; border-radius: 8px; background: var(--pc, #2e2e2e); }
.ao-pills i:nth-child(1) { left: 45px; width: 56px; }
.ao-pills i:nth-child(2) { left: 279px; width: 24px; }
.ao-pills i:nth-child(3) { left: 308px; top: calc(var(--pt, 24px) - 2px); width: 20px; height: 20px; border-radius: 50%; }
.ao-pills i:nth-child(4) { left: 333px; width: 28px; }
.ao-pills.is-fin { --pc: #eaeaea; }
.ao-hi { position: absolute; top: 839px; height: 5px; border-radius: 100px; background: #111; }
.ao-hi.is-light { background: #fff; }
.ao-qsheet .ao-hi { top: 775px; }

.ao-btn { position: absolute; background: #111; border-radius: 100px; display: flex; align-items: center; justify-content: center;
  transition: transform calc(0.18s * var(--t, 1)) ease, background calc(0.25s * var(--t, 1)) ease; }
.ao-btn .ao-t { position: static; }
.ao-btn.is-pressed { transform: scale(0.97); }
.ao-ghost { position: absolute; border-radius: 100px; box-shadow: inset 0 0 0 2px #111; }

/* ---------- the approval hub ---------- */
.ao-dark { background: #111; }
.ao-hub { background: #111; transform-origin: 50% 0; transition: transform calc(0.8s * var(--t, 1)) var(--ease); }
.ao-hh { position: absolute; inset: 0; transition: opacity calc(0.4s * var(--t, 1)) ease; }
.fd-stage[data-pg="q1"] .ao-hh, .fd-stage[data-pg="q2"] .ao-hh, .fd-stage[data-pg="q3"] .ao-hh, .fd-stage[data-pg="q4"] .ao-hh { opacity: 0; }
/* iOS-style presentation: the approval page shifts up and shrinks back behind the rising question sheet */
.fd-stage[data-pg="q1"] .ao-hub, .fd-stage[data-pg="q2"] .ao-hub, .fd-stage[data-pg="q3"] .ao-hub, .fd-stage[data-pg="q4"] .ao-hub { transform: translateY(-78.2px) scale(0.918); }
.ao-hubdim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity calc(0.8s * var(--t, 1)) var(--ease); }
.fd-stage[data-pg="q1"] .ao-hubdim, .fd-stage[data-pg="q2"] .ao-hubdim, .fd-stage[data-pg="q3"] .ao-hubdim, .fd-stage[data-pg="q4"] .ao-hubdim { opacity: 0.086; }
.ao-pillhead { position: absolute; background: #222; border-radius: 100px; transition: transform calc(0.18s * var(--t, 1)) ease; }
.ao-pic { position: absolute; left: 16px; top: 12px; width: 18px; height: 18px; transition: opacity calc(0.4s * var(--t, 1)) ease; }
.ao-pic svg { display: block; }
.ao-pic-ok { opacity: 0; transform: scale(0.5); transition: opacity calc(0.35s * var(--t, 1)) ease, transform calc(0.5s * var(--t, 1)) cubic-bezier(0.2, 1.5, 0.4, 1); }
.fd-stage[data-go="1"] .ao-pic-ok { opacity: 1; transform: none; }
.fd-stage[data-go="1"] .ao-pic-spin { opacity: 0; }
.ao-sheet {
  position: absolute; left: 0; top: 144px; width: 393px; height: 930px; background: #fff; border-radius: 28px 28px 0 0;
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
}
.ao-sum {
  position: absolute; left: 24px; top: 24px; width: 345px; height: 110px; background: #edf1ff; border-radius: 16px;
  box-shadow: inset 0 0 0 1px #f2f2f2; transition: top calc(0.8s * var(--t, 1)) var(--ease);
}
.fd-stage[data-hs="4"] .ao-sum { top: 149px; }
.ao-rv { position: absolute; inset: 0; opacity: 0; transform: translateY(10px); transition: opacity calc(0.5s * var(--t, 1)) ease, transform calc(0.7s * var(--t, 1)) var(--ease); }
.fd-stage[data-hs="4"] .ao-rv { opacity: 1; transform: none; transition-delay: calc(0.25s * var(--t, 1)); }
.ao-get { top: 291px; opacity: 0; transform: translateY(10px); transition: opacity calc(0.5s * var(--t, 1)) ease, transform calc(0.7s * var(--t, 1)) var(--ease); }
.fd-stage[data-hs="4"] .ao-get { opacity: 1; transform: none; transition-delay: calc(0.3s * var(--t, 1)); }
.ao-get { background: rgba(0, 0, 0, 0.04); }
.ao-get .ao-t { color: #949494; transition: color calc(0.25s * var(--t, 1)) ease; }
.fd-stage[data-go="1"] .ao-get { background: #111; }
.fd-stage[data-go="1"] .ao-get .ao-t { color: #fff; }
.fd-stage[data-hs="4"] .ao-get.is-pressed { transform: scale(0.97); }
.ao-ac {
  position: absolute; left: 24px; width: 345px; background: #fff; border-radius: 16px; overflow: hidden;
  transition: top calc(0.8s * var(--t, 1)) var(--ease), height calc(0.8s * var(--t, 1)) var(--ease), box-shadow calc(0.5s * var(--t, 1)) ease;
}
.ao-ring { transition: opacity calc(0.3s * var(--t, 1)) ease calc(0.3s * var(--t, 1)); }
.ao-ck { transition: opacity calc(0.3s * var(--t, 1)) ease calc(0.3s * var(--t, 1)), transform calc(0.45s * var(--t, 1)) cubic-bezier(0.2, 1.5, 0.4, 1) calc(0.3s * var(--t, 1)); }
.ao-chv { transform-origin: 50% 50%; transition: transform calc(0.5s * var(--t, 1)) var(--ease); }
.ao-body { transition: opacity calc(0.35s * var(--t, 1)) ease; }
.ao-t3b { opacity: 0; }
.fd-stage[data-hs="3"] .ao-t3a, .fd-stage[data-hs="4"] .ao-t3a { opacity: 0; }
.fd-stage[data-hs="3"] .ao-t3b, .fd-stage[data-hs="4"] .ao-t3b { opacity: 1; }
.ao-live { position: absolute; left: 24px; width: 345px; height: 188px; background: #f7f7f7; border-radius: 16px; transition: top calc(0.8s * var(--t, 1)) var(--ease); }

/* ---------- Income source questions ---------- */
.ao-q { pointer-events: none; }
.ao-qsheet {
  position: absolute; left: 0; top: 64px; width: 393px; height: 788px; background: #fff; border-radius: 28px 28px 0 0;
  transform: translateY(800px);
  transition: transform calc(0.8s * var(--t, 1)) var(--ease);
}
.fd-stage[data-pg="q1"] .ao-qsheet, .fd-stage[data-pg="q2"] .ao-qsheet, .fd-stage[data-pg="q3"] .ao-qsheet, .fd-stage[data-pg="q4"] .ao-qsheet { transform: none; }
.ao-qhead { position: absolute; left: 0; top: 0; width: 393px; height: 80px; background: #fff; border-radius: 28px 28px 0 0; }
.ao-back { transition: opacity calc(0.3s * var(--t, 1)) ease; }
.fd-stage[data-pg="q1"][data-nx="0"] .ao-back, .fd-stage[data-pg="q4"] .ao-back { opacity: 0; }
.ao-prog { position: absolute; width: 345px; height: 3px; border-radius: 100px; background: #f2f2f2; overflow: hidden; transition: opacity calc(0.3s * var(--t, 1)) ease; }
.fd-stage[data-pg="q4"] .ao-prog { opacity: 0; }
.ao-prog i { display: block; width: 122px; height: 100%; border-radius: 100px; background: #de3341; transition: width calc(0.9s * var(--t, 1)) var(--ease); }
.fd-stage[data-pr="2"] .ao-prog i { width: 213px; }
.fd-stage[data-pr="3"] .ao-prog i { width: 300px; }
.ao-qstep { position: absolute; left: 0; top: 0; width: 393px; height: 788px; opacity: 0; transform: translateX(48px); pointer-events: none;
  transition: opacity calc(0.4s * var(--t, 1)) ease, transform calc(0.7s * var(--t, 1)) var(--ease); }
.fd-stage[data-pg="q1"] .ao-qstep[data-i="1"], .fd-stage[data-pg="q2"] .ao-qstep[data-i="2"], .fd-stage[data-pg="q3"] .ao-qstep[data-i="3"], .fd-stage[data-pg="q4"] .ao-qstep[data-i="4"] { opacity: 1; transform: none; }
.fd-stage[data-pg="q2"] .ao-qstep[data-i="1"], .fd-stage[data-pg="q3"] .ao-qstep[data-i="1"], .fd-stage[data-pg="q3"] .ao-qstep[data-i="2"], .fd-stage[data-pg="q4"] .ao-qstep[data-i="1"], .fd-stage[data-pg="q4"] .ao-qstep[data-i="2"], .fd-stage[data-pg="q4"] .ao-qstep[data-i="3"] { transform: translateX(-48px); }
.fd-stage[data-pg="hub"] .ao-qstep { transition-duration: calc(0.2s * var(--t, 1)); }

/* step 1: the select + dropdown (the page content stays put when it opens) */
.ao-s1c { position: absolute; inset: 0; }
.ao-sel { position: absolute; left: 24px; top: 255px; width: 345px; height: 68px; border-radius: 16px; background: #f2f2f2; }
.ao-selv.is-ph { color: #7b7b7b; }
.ao-dd {
  position: absolute; left: 24px; top: 331px; width: 345px; height: 255px; background: #fff; border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.04);
  opacity: 0; transform: translateY(-8px) scale(0.98); transform-origin: 50% 0; pointer-events: none;
  transition: opacity calc(0.25s * var(--t, 1)) ease, transform calc(0.45s * var(--t, 1)) var(--ease);
}
.fd-stage[data-dd="1"] .ao-dd { opacity: 1; transform: none; }
.ao-di { position: absolute; left: 1px; width: 343px; height: 64px; transition: background calc(0.15s * var(--t, 1)) ease; }
.ao-di .ao-t { white-space: nowrap; font-weight: 600; }
.ao-di.is-pressed { background: #f7f7f7; }
.ao-dv { position: absolute; left: 21px; width: 303px; height: 1px; background: #f2f2f2; }

/* steps 2 + 3: the input fields */
.ao-fld { position: absolute; left: 24px; width: 345px; height: 68px; border-radius: 16px; background: #f7f7f7; }
.ao-fv { position: absolute; left: 20px; top: 33.5px; display: flex; gap: 4px; line-height: 21px; font-size: 16px; }
.ao-cur { font-weight: 500; color: #545454; }
.ao-val { font-weight: 400; color: #111; position: relative; }
.ao-val.is-ph { color: #7b7b7b; }
.ao-val.is-typing::after { content: ""; position: absolute; left: 100%; margin-left: 3px; top: 2px; width: 2px; height: 16px; background: #de3341; animation: ao-blink 1s steps(1) infinite; }
@keyframes ao-blink { 50% { opacity: 0; } }
.ao-cal { position: absolute; left: 304px; top: 18px; width: 24px; height: 24px; display: block; }
.ao-cal svg { display: block; }

/* step 4: the income summary */
.ao-add { position: absolute; border-radius: 100px; box-shadow: inset 0 0 0 2px #111; transition: transform calc(0.18s * var(--t, 1)) ease; }
.ao-add.is-pressed { transform: scale(0.98); }

/* footer + buttons */
.ao-qf { position: absolute; left: 0; top: 670px; width: 393px; height: 118px; background: #fff; opacity: 0; transition: opacity calc(0.4s * var(--t, 1)) ease; }
.fd-stage[data-nx="1"] .ao-qf, .fd-stage[data-pg="q4"] .ao-qf { opacity: 1; }
.ao-next { left: 24px; top: 686px; width: 345px; height: 56px; background: rgba(0, 0, 0, 0.04); opacity: 0;
  transition: top calc(0.5s * var(--t, 1)) var(--ease), opacity calc(0.4s * var(--t, 1)) ease, background calc(0.25s * var(--t, 1)) ease, transform calc(0.18s * var(--t, 1)) ease; }
.ao-next .ao-t { color: #949494; transition: color calc(0.25s * var(--t, 1)) ease; }
.fd-stage[data-nx="1"] .ao-next { opacity: 1; }
.fd-stage[data-kb="1"] .ao-next { top: 417px; }
.ao-next.is-on { background: #111; }
.ao-next.is-on .ao-t { color: #fff; }
.ao-done { left: 24px; top: 686px; width: 345px; height: 56px; opacity: 0; pointer-events: none; transition: opacity calc(0.4s * var(--t, 1)) ease, transform calc(0.18s * var(--t, 1)) ease; }
.fd-stage[data-pg="q4"] .ao-done { opacity: 1; }
.ao-kb { position: absolute; left: 0; top: 560px; width: 393px; height: 292px; background: #d0d4dc; transform: translateY(100%); transition: transform calc(0.5s * var(--t, 1)) var(--ease); }
.fd-stage[data-kb="1"] .ao-kb { transform: none; }
.ao-kbwrap { pointer-events: none; }
.ao-kbi { position: absolute; left: 0; top: 0; width: 393px; height: 262px; max-width: none; }
.ao-kk { position: absolute; width: 123px; height: 46px; border-radius: 5px; background: #adb3bc; mix-blend-mode: multiply; opacity: 0; transition: opacity calc(0.12s * var(--t, 1)) ease; }
.ao-kk.is-down { opacity: 1; transition-duration: calc(0.04s * var(--t, 1)); }

/* ---------- "Reviewing your loan details" loader ---------- */
.ao-load { background: #111; pointer-events: none; transform: translateY(100%); transition: transform calc(0.7s * var(--t, 1)) var(--ease); }
.fd-stage[data-pg="load"] .ao-load, .fd-stage[data-pg="fin"] .ao-load { transform: none; }
.ao-pills.is-load { --pc: #2e2e2e; }
.ao-gl { transition: opacity calc(0.4s * var(--t, 1)) ease; }
.ao-gl2 { opacity: 0; }
.fd-stage[data-gt="2"] .ao-gl1 { opacity: 0; }
.fd-stage[data-gt="2"] .ao-gl2 { opacity: 1; transition-delay: calc(0.3s * var(--t, 1)); }
.ao-mark { position: absolute; overflow: visible; }
.ao-pc { transform-box: fill-box; transform-origin: 50% 50%; transform: translate(var(--ox), var(--oy)) scale(0.6);
  transition: transform calc(1.4s * var(--t, 1)) cubic-bezier(0.2, 0.8, 0.25, 1) calc(var(--k) * 0.06s * var(--t, 1)); }
.fd-stage[data-gt="1"] .ao-pc, .fd-stage[data-gt="2"] .ao-pc, .fd-stage[data-gt="d"] .ao-pc { transform: none; }
.ao-solid { opacity: 0; transition: opacity calc(0.6s * var(--t, 1)) ease calc(0.5s * var(--t, 1)); }
.fd-stage[data-gt="2"] .ao-solid { opacity: 1; }
.fd-stage[data-gt="d"] .ao-solid { opacity: 0; }
.ao-dot { position: absolute; display: block; background: #fff; border-radius: 50%; opacity: 0; transform: translate(var(--sx), var(--sy));
  transition: transform calc(1.4s * var(--t, 1)) cubic-bezier(0.2, 0.8, 0.25, 1) calc(var(--k) * 0.07s * var(--t, 1)), opacity calc(0.5s * var(--t, 1)) ease calc(var(--k) * 0.07s * var(--t, 1)); }
.fd-stage[data-gt="1"] .ao-dot, .fd-stage[data-gt="d"] .ao-dot { opacity: 1; transform: none; }
.fd-stage[data-gt="2"] .ao-dot { opacity: 0; transform: translate(var(--gx), var(--gy)) scale(0.2);
  transition: transform calc(0.9s * var(--t, 1)) cubic-bezier(0.55, 0, 0.8, 0.4) calc(var(--k) * 0.04s * var(--t, 1)), opacity calc(0.3s * var(--t, 1)) ease calc((0.6s + var(--k) * 0.04s) * var(--t, 1)); }
.fd-stage[data-gt="1"] .ao-dot { animation: ao-drift 3.2s ease-in-out 1.8s infinite alternate; }
@keyframes ao-drift { from { translate: 0 0; } to { translate: 0 -5px; } }

/* ---------- "You're ready to sign" ---------- */
/* the white page slides up opaque over the black loader (no cross-fade, no grey ghosting) */
.ao-fin { background: #fff; pointer-events: none; transform: translateY(100%); transition: transform calc(0.8s * var(--t, 1)) var(--ease); }
.fd-stage[data-pg="fin"] .ao-fin { transform: none; }
.ao-fc { position: absolute; inset: 0; }
.ao-est { position: absolute; left: 24px; top: 168px; width: 345px; height: 278px; transform: translateY(14px) scale(0.97); opacity: 0;
  transition: transform calc(0.8s * var(--t, 1)) cubic-bezier(0.2, 1.1, 0.3, 1), opacity calc(0.5s * var(--t, 1)) ease; }
.fd-stage[data-pg="fin"] .ao-est { transform: none; opacity: 1; transition-delay: calc(0.5s * var(--t, 1)); }
.ao-eb { position: absolute; left: -1.5px; top: -1.5px; width: 348px; height: 281px; border: 1.5px solid #d2d9f4; border-radius: 25.5px; box-sizing: border-box; }
.ao-ed { position: absolute; left: 0; top: 0; width: 345px; height: 206px; background: #edf1ff; border-radius: 24px; z-index: 2; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.02)); }
.ao-ec { position: absolute; left: 0; top: 182px; width: 345px; height: 96px; background: #d2d9f4; border-radius: 0 0 24px 24px; }
.ao-ep { position: absolute; inset: 0; z-index: 3; }
.ao-li { position: absolute; left: 24px; width: 327px; height: 24px; opacity: 0; transform: translateY(10px);
  transition: opacity calc(0.5s * var(--t, 1)) ease, transform calc(0.7s * var(--t, 1)) var(--ease); }
.fd-stage[data-pg="fin"] .ao-li { opacity: 1; transform: none; transition-delay: calc((0.9s + var(--i, 0) * 0.14s) * var(--t, 1)); }
.ao-ff { position: absolute; left: 0; top: 734px; width: 393px; height: 118px; background: #fff; }
.ao-fnext { opacity: 0; transition: opacity calc(0.5s * var(--t, 1)) ease; }
.fd-stage[data-pg="fin"] .ao-fnext { opacity: 1; transition-delay: calc(1s * var(--t, 1)); }
.ao-confetti { position: absolute; left: -53px; top: 0; width: 499px; height: 384.943px; max-width: none; opacity: 0; }
/* the Figma frame check shows the static confetti; the animation draws its own burst on the overlay below */
.fd-stage[data-pg="fin"][data-still="1"] .ao-confetti { opacity: 1; }
.ao-cfx { position: absolute; left: 0; top: 0; width: 393px; height: 852px; pointer-events: none; overflow: visible; z-index: 10; }
.ao-cfx path { opacity: 0; }