/* ============================================
   FAN SCENE — Rocket "The Long Middle". Pairs with fan-rocket-application.js
   and fan-demo.css. Dimensions are the Figma frames slide2left /
   slide2middle / slide2right. Stage classes: .p1 playing, .sd sheet down,
   .pr pill pressed, .d1-3 sections done,
   .q1-3 credit-check points ticked, .pu Start pulse, .p3 idle.
   ============================================ */

/* ---------- the fan (measured off rocket-application.png) ---------- */
.fs-rocket-application .fk-m { left: 143.96px; top: 89.89px; width: 312.078px; height: 339.215px; --par: 10; --sc: 0.95; }
.fs-rocket-application .fk-l { left: 50.5px; top: 124.65px; width: 260px; height: 270px; --par: 5;
  --r: 0deg; --tx: 119.8px; --ty: 0px; --sc: 0.9; opacity: 0; }
.fs-rocket-application .fk-r { left: 288.62px; top: 124.78px; width: 260px; height: 270px; --par: 5;
  --r: 0deg; --tx: -118.3px; --ty: 0px; --sc: 0.9; opacity: 0; }
.fs-rocket-application .fk-l, .fs-rocket-application .fk-r {
  transition: transform 0.95s cubic-bezier(0.2, 1.3, 0.3, 1) 0.1s, opacity 0.25s ease 0.1s;
}
.fs-rocket-application .fk-m { transition: transform 0.8s cubic-bezier(0.2, 1.1, 0.3, 1); }
.fs-rocket-application.p1 .fk-l, .fs-rocket-application.p1 .fk-r { opacity: 1; --tx: 0px; --ty: 0px; --sc: 1; }
.fs-rocket-application.p1 .fk-l { --r: -8deg; }
.fs-rocket-application.p1 .fk-r { --r: 8deg; transition-delay: 0.18s; }
.fs-rocket-application.p1 .fk-m { --sc: 1; }
.fs-rocket-application.p3 .fk-l { animation: fk-float 6.4s ease-in-out 0.3s infinite; }
.fs-rocket-application.p3 .fk-r { animation: fk-float 5.6s ease-in-out 0s infinite; }
.fs-rocket-application.p3 .fk-m { animation: fk-float 7.2s ease-in-out 0.6s infinite; }

.fs-rocket-application .s-ico { display: block; flex: none; }
.fs-rocket-application .s-in { opacity: 0; transform: translateY(9px);
  transition: opacity 0.5s ease calc(0.25s + var(--i, 0) * 0.09s), transform 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) calc(0.25s + var(--i, 0) * 0.09s); }
.fs-rocket-application.p1 .s-in { opacity: 1; transform: none; }
.fs-rocket-application .s-down { transform: rotate(180deg); }

/* ---------- middle: dark phone ---------- */
.fs-rocket-application .s-mid {
  position: relative; width: 100%; height: 100%; background: #111; overflow: hidden; border-radius: 30.081px;
  font-family: 'Figtree', 'Inter', sans-serif; color: #fff;
  box-shadow: 0 4.011px 10.027px -2.005px rgba(0,0,0,.04), 0 18.048px 36.097px -8.022px rgba(0,0,0,.08), 0 40.108px 80.215px -16.043px rgba(0,0,0,.06);
}
.fs-rocket-application .s-status { position: absolute; left: 0; top: 0; width: 312.096px; height: 48.13px; }
.fs-rocket-application .s-time { position: absolute; left: 18.632px; width: 77.64px; text-align: center; top: 17.2px;
  font: 590 13.197px/17.079px -apple-system, 'SF Pro', 'Inter', system-ui, sans-serif; color: #fff; }
.fs-rocket-application .s-levels { position: absolute; left: 224.5px; top: 20.3px; display: flex; gap: 5.434px; align-items: center; }
.fs-rocket-application .s-levels .px { position: static; }
.fs-rocket-application .s-island { position: absolute; left: 107.91px; top: 10.09px; width: 96.263px; height: 27.947px; border-radius: 77.631px; background: #000; }

.fs-rocket-application .s-pillwrap { position: absolute; left: 0; width: 312.096px; top: 65.4px; display: flex; justify-content: center; }
.fs-rocket-application .s-pill { display: flex; align-items: center; gap: 9.53px; padding: 9.53px 12.706px; border-radius: 79.414px; background: #222;
  font-size: 12.706px; font-weight: 500; line-height: normal; color: #fff; white-space: nowrap;
  transition: transform 0.18s ease, background-color 0.18s ease; }
.fs-rocket-application.pr .s-pill { transform: scale(0.93); background: #333; }
.fs-rocket-application .s-pic { position: relative; width: 14.293px; height: 14.293px; flex: none; }

/* the stepper (revealed when the sheet slides down) */
.fs-rocket-application .s-stepper { position: absolute; left: 19.06px; top: 122.11px; width: 273.977px; height: 191.885px; }
.fs-rocket-application .s-item { position: relative; display: flex; align-items: center; height: 31.765px; padding: 0 9.53px 0 38.119px; gap: 12.706px;
  font-size: 12.706px; font-weight: 500; line-height: normal; color: #fff; white-space: nowrap; }
.fs-rocket-application .s-ind { position: absolute; left: 6.35px; top: 6.356px; width: 19.053px; height: 19.053px; border-radius: 50%; background: #222;
  display: flex; align-items: center; justify-content: center; font-size: 11.11px; }
.fs-rocket-application .s-ind b { font-weight: 500; }
.fs-rocket-application .s-ind.s-done { background: #fff; }
.fs-rocket-application .s-app { padding-left: 3.177px; gap: 9.53px; }
.fs-rocket-application .s-ring { position: relative; width: 25.412px; height: 25.412px; flex: none; }
.fs-rocket-application .s-ring b { position: absolute; left: 3.18px; top: 3.18px; width: 19.058px; height: 19.058px; display: flex; align-items: center; justify-content: center;
  font-size: 11.118px; font-weight: 500; color: #111; }
.fs-rocket-application .s-div { position: relative; width: 115.115px; height: 6.351px; }
.fs-rocket-application .s-foot { position: absolute; left: 0; top: 159.52px; width: 273.634px; padding-left: 9.529px; font-family: 'Inter', sans-serif;
  font-size: 10.176px; line-height: 12.438px; color: #fff; }
.fs-rocket-application .s-foot p { margin: 0; }
.fs-rocket-application .s-link { margin-top: 6.353px !important; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }

/* the stepper sits under the sheet and is simply revealed as it slides away;
   Goals' tick gives a little pop once it is uncovered */
.fs-rocket-application.sd .s-goals .s-ind { animation: s-pop 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) 0.8s 1; }
@keyframes s-pop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
.fs-rocket-application .s-home { position: absolute; left: 50%; bottom: 6.35px; width: 114.321px; height: 3.969px; margin-left: -57.16px; border-radius: 100px; background: #111; }

/* the white sheet: starts up over the stepper, slides down off the frame */
.fs-rocket-application .s-sheet {
  position: absolute; left: 0; top: 100px; width: 312.096px; height: 784.607px; background: #fff; border-radius: 22.236px 22.236px 0 0;
  filter: drop-shadow(0 7.941px 11.912px rgba(0,0,0,.1)); color: #111;
  transform: translateY(0); transition: transform 0.95s cubic-bezier(0.3, 0.9, 0.3, 1);
}
.fs-rocket-application.sd .s-sheet { transform: translateY(265.3px); }
.fs-rocket-application .s-sin { position: absolute; left: 19.06px; top: 19.059px; width: 273.977px; display: flex; flex-direction: column; gap: 9.53px; }
.fs-rocket-application .s-scard { background: #fff; border: 0.794px solid #f2f2f2; border-radius: 12.706px; padding: 19.059px; }
.fs-rocket-application .s-scard.s-open { border: 0; box-shadow: 0 7.941px 23.824px rgba(0,0,0,.1); display: flex; flex-direction: column; gap: 12.706px; }
.fs-rocket-application .s-shead { display: flex; align-items: center; gap: 6.353px; font-size: 12.706px; font-weight: 500; line-height: normal; }
.fs-rocket-application .s-shead span { flex: 1; }
.fs-rocket-application .s-sp { margin: 0; font-size: 11.118px; font-weight: 400; line-height: 13.8px; color: #545454; }
.fs-rocket-application .s-sbtn { width: 235.786px; height: 38.107px; border-radius: 100px; background: #111; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10.08px; font-weight: 500; margin-top: 6.353px; }
.fs-rocket-application .s-help { margin-top: 15.9px; background: #f7f7f7; border-radius: 12.706px; padding: 19.059px; display: flex; flex-direction: column; gap: 6.353px; }
.fs-rocket-application .s-hrow { display: flex; align-items: center; gap: 6.353px; font-size: 12.706px; font-weight: 500; }
.fs-rocket-application .s-help p { margin: 0; font-size: 11.118px; color: #545454; line-height: 13.8px; }
.fs-rocket-application .s-hbtns { display: flex; justify-content: space-between; margin-top: 12.7px; }
.fs-rocket-application .s-hbtn { display: flex; align-items: center; gap: 6.351px; border: 1.588px solid #111; border-radius: 100px; padding: 9.527px 15.878px 9.527px 14.29px; font-size: 10.08px; font-weight: 500; }

/* ---------- side cards ---------- */
.fs-rocket-application .s-side {
  position: relative; width: 100%; height: 100%; background: #fff; overflow: hidden; border-radius: 30px;
  font-family: 'Figtree', 'Inter', sans-serif; color: #111;
  box-shadow: 0 4px 10px -2px rgba(0,0,0,.04), 0 10px 24px -8px rgba(0,0,0,.1), 0 20px 40px -8px rgba(0,0,0,.06);
}
.fs-rocket-application .sl-wrap, .fs-rocket-application .sr-wrap {
  position: absolute; left: 16px; top: 13.6px; width: 228px; display: flex; flex-direction: column; gap: 7.939px; }
.fs-rocket-application .sr-wrap { left: 15.878px; top: 15.878px; width: 228.244px;  }
.fs-rocket-application .sl-card, .fs-rocket-application .sr-card { box-sizing: border-box; background: #fff; box-shadow: inset 0 0 0 0.662px #e9e9e9; border-radius: 16px; padding: 15.878px; }
.fs-rocket-application .sl-open, .fs-rocket-application .sr-open { box-shadow: 0 6.616px 19.847px rgba(0,0,0,.1); display: flex; flex-direction: column; gap: 10.585px; }
.fs-rocket-application .sl-h { display: flex; align-items: center; gap: 5.293px; height: 21px; font-size: 10.585px; font-weight: 500; line-height: 21px; }
.fs-rocket-application .sl-h > span:not(.sr-box) { flex: 1; position: relative; top: -2.4px; }
.fs-rocket-application .sl-card p, .fs-rocket-application .sr-card p { margin: 0; height: 36px; font-size: 9.262px; font-weight: 400; line-height: 12px; color: #545454; }
.fs-rocket-application .sr-card p { height: 54px; }
.fs-rocket-application .sl-btn { margin-top: 5.3px; width: 196.489px; height: 31.756px; border-radius: 100px; background: #111; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 7px; font-weight: 500; align-self: flex-start; }
.fs-rocket-application .sl-open .sl-btn, .fs-rocket-application .sr-open .sl-btn { margin-top: 5.293px; }
.fs-rocket-application .sr-open .sr-list { margin-top: 5.293px; }
.fs-rocket-application .sr-box { display: flex; align-items: center; justify-content: center; width: 15.878px; height: 15.878px; flex: none; }

/* left: the dashed circles turn slowly while the card waits */
.fs-rocket-application.p1 .sl-ic { animation: s-spin 9s linear infinite; }
@keyframes s-spin { to { transform: rotate(360deg); } }
.fs-rocket-application.pu .sl-btn:not(.sr-btn) { animation: s-pulse 0.9s ease-out 1; }
@keyframes s-pulse { 0% { box-shadow: 0 0 0 0 rgba(17,17,17,.35); transform: scale(1); } 30% { transform: scale(0.96); } 100% { box-shadow: 0 0 0 12px rgba(17,17,17,0); transform: scale(1); } }

/* right: sections tick off */
.fs-rocket-application .sr-ck .ck-ring { transition: opacity 0.2s ease; }
.fs-rocket-application .sr-ck .ck-fill { transform-box: fill-box; transform-origin: 50% 50%; transform: scale(0.2); opacity: 0;
  transition: transform 0.42s cubic-bezier(0.2, 1.4, 0.4, 1), opacity 0.15s ease; }
.fs-rocket-application .sr-ck .ck-tick { stroke-dasharray: 6; stroke-dashoffset: 6; transition: stroke-dashoffset 0.3s ease-out 0.1s; }
.fs-rocket-application.d1 .sr-card:nth-child(1) .ck-ring, .fs-rocket-application.d2 .sr-card:nth-child(2) .ck-ring, .fs-rocket-application.d3 .sr-card:nth-child(3) .ck-ring { opacity: 0; }
.fs-rocket-application.d1 .sr-card:nth-child(1) .ck-fill, .fs-rocket-application.d2 .sr-card:nth-child(2) .ck-fill, .fs-rocket-application.d3 .sr-card:nth-child(3) .ck-fill { transform: none; opacity: 1; }
.fs-rocket-application.d1 .sr-card:nth-child(1) .ck-tick, .fs-rocket-application.d2 .sr-card:nth-child(2) .ck-tick, .fs-rocket-application.d3 .sr-card:nth-child(3) .ck-tick { stroke-dashoffset: 0; }
.fs-rocket-application .sr-list { display: flex; flex-direction: column; gap: 5.293px; }
.fs-rocket-application .sr-b { display: flex; align-items: center; gap: 5.293px; font-size: 7.939px; font-weight: 500; line-height: normal; white-space: nowrap; }
.fs-rocket-application .sr-bt { width: 15.878px; height: 15.878px; display: flex; align-items: center; justify-content: center; flex: none; }
.fs-rocket-application .sr-tk .tkp { stroke-dasharray: 8; stroke-dashoffset: 8; transition: stroke-dashoffset 0.35s ease-out; }
.fs-rocket-application.q1 .sr-b:nth-child(1) .tkp, .fs-rocket-application.q2 .sr-b:nth-child(2) .tkp, .fs-rocket-application.q3 .sr-b:nth-child(3) .tkp { stroke-dashoffset: 0; }