/* ============================================
   FAN SCENE — Rocket "Decision Time". Pairs with fan-rocket-chooseloan.js
   and fan-demo.css. Dimensions are the Figma frames slide3left /
   slide3middle / slide3right. Stage classes: .p1 playing, .up estimates out
   of the envelope, .sp sparkle, .bl/.br button
   pulse, .p3 idle.
   ============================================ */

/* ---------- the fan (measured off rocket-chooseloan.png) ---------- */
.fs-rocket-chooseloan .fk-m { left: 145.4px; top: 90px; width: 324.706px; height: 340px; --par: 10; --sc: 0.95; }
.fs-rocket-chooseloan .fk-l { left: 56.12px; top: 127.05px; width: 260px; height: 263.77px; --par: 5;
  --r: 0deg; --tx: 121.6px; --ty: 0px; --sc: 0.9; opacity: 0; }
.fs-rocket-chooseloan .fk-r { left: 296.75px; top: 127.17px; width: 260px; height: 263.77px; --par: 5;
  --r: 0deg; --tx: -119px; --ty: 0px; --sc: 0.9; opacity: 0; }
.fs-rocket-chooseloan .fk-l, .fs-rocket-chooseloan .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-chooseloan .fk-m { transition: transform 0.8s cubic-bezier(0.2, 1.1, 0.3, 1); }
.fs-rocket-chooseloan.p1 .fk-l, .fs-rocket-chooseloan.p1 .fk-r { opacity: 1; --tx: 0px; --ty: 0px; --sc: 1; }
.fs-rocket-chooseloan.p1 .fk-l { --r: -8deg; }
.fs-rocket-chooseloan.p1 .fk-r { --r: 8deg; transition-delay: 0.18s; }
.fs-rocket-chooseloan.p1 .fk-m { --sc: 1; }
.fs-rocket-chooseloan.p3 .fk-l { animation: fk-float 6.4s ease-in-out 0.3s infinite; }
.fs-rocket-chooseloan.p3 .fk-r { animation: fk-float 5.6s ease-in-out 0s infinite; }
.fs-rocket-chooseloan.p3 .fk-m { animation: fk-float 7.2s ease-in-out 0.6s infinite; }

.fs-rocket-chooseloan .c-ico { display: block; flex: none; }
.fs-rocket-chooseloan .c-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-chooseloan.p1 .c-in { opacity: 1; transform: none; }

/* ---------- middle: the envelope ---------- */
.fs-rocket-chooseloan .c-mid {
  position: relative; width: 100%; height: 100%; background: #fff; overflow: hidden; border-radius: 30.081px;
  font-family: 'Figtree', 'Inter', sans-serif; color: #111;
  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-chooseloan .c-head { position: absolute; left: 28px; top: 35.5px; width: 267px; text-align: center; }
.fs-rocket-chooseloan .c-h1 { margin: 0; font-size: 18.574px; font-weight: 500; line-height: 31px; color: #111; }
.fs-rocket-chooseloan .c-h2 { margin: 11.3px 0 0; font-size: 12.383px; font-weight: 400; line-height: 17px; color: #545454; }

.fs-rocket-chooseloan .e-env { position: absolute; left: 65.06px; top: 129.55px; width: 192.876px; height: 171.188px;
  transform: scale(0.9); opacity: 0; transform-origin: 50% 70%;
  transition: transform 0.9s cubic-bezier(0.2, 1.3, 0.4, 1) 0.35s, opacity 0.4s ease 0.35s; }
.fs-rocket-chooseloan.p1 .e-env { transform: none; opacity: 1; }
/* the cards live inside the envelope: clipped at its bottom edge until they rise */
.fs-rocket-chooseloan .e-cards { position: absolute; inset: 0; clip-path: inset(-60px -24px 0 -24px); }
.fs-rocket-chooseloan .e-a, .fs-rocket-chooseloan .e-b { position: absolute; transition: transform 0.85s cubic-bezier(0.2, 1.25, 0.35, 1); }
.fs-rocket-chooseloan .e-a { left: 25.61px; top: 17.1px; width: 141.669px; height: 101.601px; transform: translateY(104px); }
.fs-rocket-chooseloan .e-b { left: 19.37px; top: 24.92px; width: 154.146px; height: 104.973px; transform: translateY(112px);
  background: #edf1ff; border-radius: 10.723px; filter: drop-shadow(0 3.098px 4.648px rgba(0,0,0,.25)); transition-delay: 0.2s; }
.fs-rocket-chooseloan.up .e-a, .fs-rocket-chooseloan.up .e-b { transform: none; }

.fs-rocket-chooseloan .e-acard { position: absolute; left: 50%; top: 50%; width: 135.556px; transform: translate(-50%, -50%) rotate(-4deg);
  background: #d2d9f4; border-radius: 9.43px; padding: 9.43px; filter: drop-shadow(0 2.82px 2.044px rgba(0,0,0,.25)); font-size: 5.501px; color: #111; }
.fs-rocket-chooseloan .e-bin { position: absolute; left: 10.72px; top: 10.72px; width: 132.7px; font-size: 6.255px; color: #111; }
.fs-rocket-chooseloan .e-top { display: flex; gap: 9.43px; align-items: flex-start; width: 116.696px; }
.fs-rocket-chooseloan .e-bin .e-top { width: 132.7px; gap: 10.723px; }
.fs-rocket-chooseloan .e-tc { flex: 1 0 0; display: flex; flex-direction: column; gap: 1.572px; min-width: 1px; }
.fs-rocket-chooseloan .e-lab { font-size: 1em; font-weight: 400; line-height: normal; white-space: nowrap; }
.fs-rocket-chooseloan .e-amtrow { display: flex; align-items: flex-end; gap: 1.572px; }
.fs-rocket-chooseloan .e-amt { font-size: 12.573px; font-weight: 500; line-height: 15.717px; white-space: nowrap; }
.fs-rocket-chooseloan .e-mo { font-size: 1em; font-weight: 400; line-height: normal; padding-bottom: 2.138px; white-space: nowrap; }
.fs-rocket-chooseloan .e-blank { display: block; width: 44.153px; height: 18.591px; }
.fs-rocket-chooseloan .e-mo-b { padding-bottom: 2.431px; }
.fs-rocket-chooseloan .e-rows { display: flex; flex-direction: column; gap: 1.572px; width: 116.696px; margin-top: 6.287px; }
.fs-rocket-chooseloan .e-rows-b { width: 132.7px; gap: 1.787px; margin-top: 7.149px; }
.fs-rocket-chooseloan .e-row { display: flex; align-items: center; justify-content: space-between; height: 9.43px; font-size: 1em; font-weight: 400; line-height: normal; white-space: nowrap; }
.fs-rocket-chooseloan .e-rows-b .e-row { height: 10.723px; }
.fs-rocket-chooseloan .e-strong { font-weight: 500; }
.fs-rocket-chooseloan .e-rl { display: flex; align-items: center; gap: 1.572px; width: 63.652px; }
.fs-rocket-chooseloan .e-rows-b .e-rl { width: 72.382px; gap: 1.787px; }
.fs-rocket-chooseloan .e-rl .px { width: 6.287px; }
.fs-rocket-chooseloan .e-digits { position: absolute; left: 13.94px; top: 23.88px; width: 39.505px; height: 11.619px; }
.fs-rocket-chooseloan.up .e-dg { animation: e-shim 1.7s ease-in-out infinite; }
.fs-rocket-chooseloan.up .e-dg:nth-child(2) { animation-delay: 0.14s; }
.fs-rocket-chooseloan.up .e-dg:nth-child(3) { animation-delay: 0.28s; }
.fs-rocket-chooseloan.up .e-dg:nth-child(4) { animation-delay: 0.42s; }
@keyframes e-shim { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.fs-rocket-chooseloan .e-spark { opacity: 0; transform: scale(0.3) rotate(-30deg); transform-origin: 50% 50%; }
.fs-rocket-chooseloan.sp .e-spark { opacity: 1; transform: none; animation: e-spark 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.2) 1 forwards; }
@keyframes e-spark { 0% { opacity: 0; transform: scale(0.3) rotate(-30deg); } 40% { opacity: 1; transform: scale(1.35) rotate(0); } 100% { opacity: 1; transform: scale(1) rotate(0); } }

.fs-rocket-chooseloan .e-front { position: absolute; left: 0; top: 51.12px; width: 192.876px; height: 120.064px;
  filter: drop-shadow(0 3.098px 1.549px rgba(0,0,0,.05)) drop-shadow(6.197px 15.492px 5.81px rgba(0,0,0,.05)) drop-shadow(7.746px 7.746px 7.746px rgba(0,0,0,.05)); }
.fs-rocket-chooseloan .e-fin { position: absolute; left: 18.59px; top: 37.96px; width: 155.695px; height: 85.981px; }

/* ---------- side cards: the loan estimate ---------- */
.fs-rocket-chooseloan .c-side {
  position: relative; width: 100%; height: 100%;
  filter: drop-shadow(0 20px 20px rgba(0,0,0,.06)) drop-shadow(0 10px 12px rgba(0,0,0,.1)) drop-shadow(0 4px 5px rgba(0,0,0,.04));
  font-family: 'Figtree', 'Inter', sans-serif; color: #21273d;
}
.fs-rocket-chooseloan .c-est { position: absolute; left: -1.13px; top: 0; width: 262.26px; border: 1.13px solid #d2d9f4; border-radius: 18.087px; isolation: isolate; }
.fs-rocket-chooseloan .c-det { position: relative; z-index: 2; width: 260px; margin-bottom: -18.087px; padding: 18.087px; background: #edf1ff; border-radius: 18.087px;
  filter: drop-shadow(0 7.536px 7.536px rgba(0,0,0,.02)); }
.fs-rocket-chooseloan .c-top { display: flex; gap: 18.087px; align-items: flex-start; width: 223.826px; }
.fs-rocket-chooseloan .c-tc { flex: 1 0 0; min-width: 1px; display: flex; flex-direction: column; gap: 3.014px; }
.fs-rocket-chooseloan .c-lab { font-size: 10.551px; font-weight: 400; line-height: normal; white-space: nowrap; }
.fs-rocket-chooseloan .c-amtrow { display: flex; align-items: flex-end; gap: 3.014px; }
.fs-rocket-chooseloan .c-amt { position: relative; display: inline-block; font-size: 24.116px; font-weight: 500; line-height: 30.145px; white-space: nowrap; }
.fs-rocket-chooseloan .c-ghost { visibility: hidden; }
.fs-rocket-chooseloan .c-live { position: absolute; left: 0; top: 0; }
.fs-rocket-chooseloan .c-mo { font-size: 10.551px; font-weight: 400; line-height: normal; padding-bottom: 3.768px; white-space: nowrap; }
.fs-rocket-chooseloan .c-rows { display: flex; flex-direction: column; gap: 3.014px; width: 223.826px; margin-top: 12.058px; }
.fs-rocket-chooseloan .c-row { display: flex; align-items: center; justify-content: space-between; height: 18.087px; font-size: 10.551px; font-weight: 500; line-height: normal; white-space: nowrap; }
.fs-rocket-chooseloan .c-reg > span:last-child { font-weight: 400; }
.fs-rocket-chooseloan .c-rl { display: flex; align-items: center; gap: 3.014px; width: 122.087px; }
.fs-rocket-chooseloan .c-btn { margin-top: 18.087px; width: 223.826px; padding: 13.942px 15.072px; border-radius: 75.362px; background: #21273d; color: #fff;
  font-size: 12.058px; font-weight: 500; line-height: 8.6px; text-align: center; white-space: nowrap; }
.fs-rocket-chooseloan .c-cust { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 3.014px; width: 260px; padding: 36.174px 0 18.087px;
  background: #d2d9f4; border-radius: 0 0 16.957px 16.957px; font-size: 12.058px; font-weight: 500; line-height: normal; white-space: nowrap; overflow: hidden; }
.fs-rocket-chooseloan .c-edit { margin: 0 2.96px; }
.fs-rocket-chooseloan.bl [data-card="0"] .c-btn, .fs-rocket-chooseloan.br [data-card="1"] .c-btn { animation: c-pulse 0.9s ease-out 1; }
@keyframes c-pulse { 0% { box-shadow: 0 0 0 0 rgba(33,39,61,.4); transform: scale(1); } 30% { transform: scale(0.97); } 100% { box-shadow: 0 0 0 12px rgba(33,39,61,0); transform: scale(1); } }