/* ============================================
   FAN SCENE — Rocket "Earning Trust". Pairs with fan-rocket-goals.js and
   fan-demo.css. Dimensions are the Figma frames slide1left / slide1middle /
   slide1right. Phase classes on the stage: .p1 (playing), .p3 (idle),
   .bar-on (goal chosen).
   ============================================ */

/* ---------- the fan (measured off rocket-goals.png) ---------- */
.fs-rocket-goals .fk-m { left: 137.9px; top: 90px; width: 324.706px; height: 340px; --par: 10; --sc: 0.95; }
.fs-rocket-goals .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-goals .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-goals .fk-l, .fs-rocket-goals .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-goals .fk-m { transition: transform 0.8s cubic-bezier(0.2, 1.1, 0.3, 1); }
.fs-rocket-goals.p1 .fk-l, .fs-rocket-goals.p1 .fk-r { opacity: 1; --tx: 0px; --ty: 0px; --sc: 1; }
.fs-rocket-goals.p1 .fk-l { --r: -8deg; }
.fs-rocket-goals.p1 .fk-r { --r: 8deg; transition-delay: 0.18s; }
.fs-rocket-goals.p1 .fk-m { --sc: 1; }
/* a side card slides out so what it is doing can be seen, then tucks back */

.fs-rocket-goals.p3 .fk-l { animation: fk-float 6.4s ease-in-out 0.3s infinite; }
.fs-rocket-goals.p3 .fk-r { animation: fk-float 5.6s ease-in-out 0s infinite; }
.fs-rocket-goals.p3 .fk-m { animation: fk-float 7.2s ease-in-out 0.6s infinite; }

/* things that rise in, staggered by --i */
.fs-rocket-goals .g-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-goals.p1 .g-in { opacity: 1; transform: none; }

/* ---------- middle card ---------- */
.fs-rocket-goals .g-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-goals .g-mhead { position: absolute; left: 0; top: 0; width: 100%; height: 66.098px; background: #fff; }
.fs-rocket-goals .g-mtitle { position: absolute; left: 0; right: 0; top: 23.9px; text-align: center; font-size: 13.22px; font-weight: 500; line-height: normal; }
.fs-rocket-goals .g-mbar { position: absolute; left: 19.829px; top: 67.21px; width: 285.047px; height: 2.479px; border-radius: 82px; background: #f2f2f2; overflow: hidden; }
.fs-rocket-goals .g-mfill { position: absolute; left: 0; top: 0; bottom: 0; width: 12%; border-radius: 82px; background: #de3341;
  transition: width 0.9s cubic-bezier(0.3, 0.9, 0.3, 1); }
.fs-rocket-goals.bar-on .g-mfill { width: 35.36%; }
.fs-rocket-goals .g-mbody { position: absolute; left: 19.829px; top: 89.52px; width: 285.047px; }
.fs-rocket-goals .g-mh1 { margin: 0 0 25.1px; font-size: 19.829px; font-weight: 500; line-height: normal; }
.fs-rocket-goals .g-opts { display: flex; flex-direction: column; gap: 6.61px; }
.fs-rocket-goals .g-opt {
  --bw: 0.826px; display: flex; align-items: center; height: 52.878px; width: 285.047px;
  padding-left: calc(17.35px - var(--bw)); border-radius: 9.915px;
  background: #f7f7f7; border: var(--bw) solid rgba(0,0,0,.04);
  font-size: 13.22px; font-weight: 500; line-height: normal; white-space: nowrap;
  transition: background-color 0.35s ease, border-color 0.35s ease, border-width 0.35s ease, padding-left 0.35s ease, 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-goals .g-opt.is-sel { --bw: 1.652px; background: #eff7f3; border-color: #0a9142; animation: g-press 0.45s cubic-bezier(0.3, 1.4, 0.5, 1) 1; }
@keyframes g-press { 0% { transform: scale(1); } 35% { transform: scale(0.975); } 100% { transform: scale(1); } }

/* ---------- side cards (shared header) ---------- */
.fs-rocket-goals .g-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-goals .g-shead { position: absolute; left: 0; top: 0; width: 100%; height: 52.926px; background: #fff; }
.fs-rocket-goals .g-stitle { position: absolute; left: 0; right: 0; top: 19.4px; text-align: center; font-size: 10.585px; font-weight: 500; line-height: normal; }
.fs-rocket-goals .g-sbar { position: absolute; left: 15.878px; top: 53.27px; width: 228.244px; height: 1.985px; border-radius: 66px; background: #f2f2f2; overflow: hidden; }
.fs-rocket-goals .g-sfill { position: absolute; left: 0; top: 0; bottom: 0; width: 35.36%; border-radius: 66px; background: #de3341; }
.fs-rocket-goals .g-sh1 { position: absolute; left: 15.88px; top: 71.13px; width: 228.244px; margin: 0; font-size: 15.878px; font-weight: 500; line-height: normal; }
.fs-rocket-goals .g-sp { position: absolute; left: 15.88px; top: 129.07px; width: 228.244px; margin: 0; font-size: 10.585px; font-weight: 400; line-height: normal; color: #545454; }

/* amount field (left card) */
.fs-rocket-goals .g-field { position: absolute; left: 15.88px; top: 202.24px; width: 228.244px; height: 44.987px; }
.fs-rocket-goals .g-fbox { position: absolute; inset: 0; border-radius: 10.585px; background: #f2f2f2; }
.fs-rocket-goals .g-flabel { position: absolute; z-index: 2; left: 12.7px; top: 9.3px; font-size: 7.939px; font-weight: 500; line-height: normal; }
.fs-rocket-goals .g-cur { position: absolute; left: 12.5px; top: 22.8px; font-size: 10.585px; font-weight: 500; line-height: normal; color: #545454; }
.fs-rocket-goals .g-val { position: absolute; left: 21.8px; top: 22.8px; font-size: 10.585px; font-weight: 400; line-height: normal; white-space: pre; }
.fs-rocket-goals .g-caret { display: inline-block; width: 0.66px; height: 10.585px; background: #de3341; margin-left: 2.3px; vertical-align: -1.6px; animation: g-blink 1.1s steps(1, end) infinite; }
@keyframes g-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* options (right card) */
.fs-rocket-goals .g-rh1 { }
.fs-rocket-goals .g-ropts { position: absolute; left: 15.878px; top: 154.3px; width: 228.244px; display: flex; flex-direction: column; gap: 5.293px; }
.fs-rocket-goals .g-ropt {
  --bw: 0.662px; display: flex; align-items: center; height: 42.341px; width: 228.244px;
  padding-left: calc(13.894px - var(--bw)); border-radius: 7.939px;
  background: #f7f7f7; border: var(--bw) solid rgba(0,0,0,.04);
  font-size: 7px; font-weight: 500; line-height: normal;
  transition: background-color 0.35s ease, border-color 0.35s ease, border-width 0.35s ease, padding-left 0.35s ease, 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-goals .g-ropt.is-sel { --bw: 1.323px; background: #eff7f3; border-color: #0a9142; animation: g-press 0.45s cubic-bezier(0.3, 1.4, 0.5, 1) 1; }