/* ============================================
   FAN SCENE — Rocket "The Home Stretch". Pairs with fan-rocket-lock.js
   (story) and fan-demo.css (shell). Dimensions are the Figma frames
   slide4left / slide4middle / slide4right; the stage adds the classes
   .p1 → .p2 → .p3 as the story advances (none = pre-animation).
   ============================================ */

/* ---------- the fan: placement + tilt (measured off rocket-lock.png) ---------- */
.fs-rocket-lock .fk-m { left: 162px; top: 97.5px; width: 276px; height: 323px; --par: 10; }
.fs-rocket-lock .fk-l { left: 49.4px; top: 131.45px; width: 282.53px; height: 267.01px; --par: 5;
  --r: 0deg; --tx: 108.6px; --ty: -3.65px; --sc: 0.9; opacity: 0; }
.fs-rocket-lock .fk-r { left: 263.15px; top: 132.7px; width: 287.8px; height: 271.77px; --par: 5;
  --r: 0deg; --tx: -106px; --ty: -5.3px; --sc: 0.9; opacity: 0; }
.fs-rocket-lock .fk-m { --sc: 0.95; }

/* deal out */
.fs-rocket-lock .fk-l, .fs-rocket-lock .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-lock .fk-m { transition: transform 0.8s cubic-bezier(0.2, 1.1, 0.3, 1); }
.fs-rocket-lock.p1 .fk-l, .fs-rocket-lock.p1 .fk-r { opacity: 1; --tx: 0px; --ty: 0px; --sc: 1; }
.fs-rocket-lock.p1 .fk-l { --r: -8deg; }
.fs-rocket-lock.p1 .fk-r { --r: 8deg; transition-delay: 0.18s; }
.fs-rocket-lock.p1 .fk-m { --sc: 1; }

/* idle float, each card on its own phase */
.fs-rocket-lock.p3 .fk-l { animation: fk-float 6.4s ease-in-out 0.3s infinite; }
.fs-rocket-lock.p3 .fk-r { animation: fk-float 5.6s ease-in-out 0s infinite; }
.fs-rocket-lock.p3 .fk-m { animation: fk-float 7.2s ease-in-out 0.6s infinite; }

/* ---------- middle card ---------- */
.lk-mid {
  position: relative; width: 100%; height: 100%; background: #fff; overflow: hidden;
  border-radius: 30.081px;
  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);
}
.lk-head { position: absolute; left: 4px; top: 23.2px; width: 267px; text-align: center; }
.lk-h1 { margin: 0; font-weight: 500; font-size: 16px; line-height: normal; color: #111; }
.lk-h2 { margin: 9.287px auto 0; width: 225px; font-weight: 400; font-size: 11px; line-height: normal; color: #545454; }

/* things that rise in (middle card), staggered by --i */
.lk-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); }
.p1 .lk-in { opacity: 1; transform: none; }

/* the loan card */
.lk-est {
  position: absolute; left: 15.8px; top: 107.45px; width: 244.3px;
  border: 1.053px solid #d2d9f4; border-radius: 16.848px;
  font-family: 'Figtree', 'Inter', sans-serif; color: #21273d; isolation: isolate;
}
.lk-det {
  position: relative; z-index: 2; width: 242.196px; margin-bottom: -16.848px; padding: 16.848px;
  background: #edf1ff; border-radius: 16.848px; filter: drop-shadow(0 7.02px 7.02px rgba(0,0,0,.02));
}
.lk-top { display: flex; gap: 16.848px; align-items: flex-start; width: 208.499px; }
.lk-tc { flex: 1 0 0; min-width: 1px; display: flex; flex-direction: column; gap: 2.808px; }
.lk-lab { font-size: 9.828px; font-weight: 400; line-height: normal; white-space: nowrap; }
.lk-amtrow { display: flex; align-items: flex-end; gap: 2.808px; }
.lk-amt { position: relative; top: 1.4px; display: inline-block; font-size: 22.465px; font-weight: 500; line-height: 28.081px; white-space: nowrap; }
.lk-ghost { visibility: hidden; }
.lk-live { position: absolute; left: 0; top: 0; }
.lk-mo { font-size: 9.828px; font-weight: 400; line-height: normal; padding-bottom: 3.51px; white-space: nowrap; }
.lk-badge { flex: none; display: block; transform-origin: 50% 50%; transform: scale(1.9) rotate(-26deg); opacity: 0;
  transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.25) 1.65s, opacity 0.2s ease 1.65s; }
.p1 .lk-badge { transform: none; opacity: 1; }
.lk-rows { display: flex; flex-direction: column; gap: 2.808px; width: 208.499px; margin-top: 12.2px; }
.lk-row:nth-child(1) > span:last-child { letter-spacing: -0.35px; }
.lk-row:nth-child(2) > span:last-child { letter-spacing: -0.1px; }
.lk-row { display: flex; align-items: center; justify-content: space-between; height: 16.848px; font-size: 9.828px; font-weight: 500; line-height: normal; white-space: nowrap; }
.lk-rl { display: flex; align-items: center; gap: 2.808px; width: 113.727px; }
.lk-info { display: flex; height: 16.848px; align-items: center; justify-content: center; padding-top: 0.702px; }
.lk-info svg { display: block; }
.lk-cust {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 2.808px;
  width: 242.196px; padding: 33.697px 0 16.848px; background: #d2d9f4; border-radius: 0 0 15.795px 15.795px;
  font-size: 11.232px; font-weight: 500; line-height: normal; white-space: nowrap; overflow: hidden;
}
.lk-cchev { display: block; flex: none; }
.p3 .lk-cchev { animation: lk-nudge 1.1s ease-in-out 0.1s 1; }
@keyframes lk-nudge { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(3px); } 55% { transform: translateY(0); } 75% { transform: translateY(2px); } }

/* ---------- left card: the completed sections ---------- */
.lk-left {
  position: relative; width: 100%; height: 100%; background: #fff; overflow: hidden; border-radius: 32.6px;
  box-shadow: 0 4.347px 10.867px -2.173px rgba(0,0,0,.04), 0 10.867px 26.08px -8.693px rgba(0,0,0,.1), 0 21.733px 43.466px -8.693px rgba(0,0,0,.06);
}
.lk-lrow {
  position: absolute; left: 17.25px; width: 248.023px; height: 51.76px; top: calc(17.256px + var(--i) * 60.387px);
  display: flex; align-items: center; padding: 0 17.254px;
  background: #fff; border: 0.719px solid #e9e9e9; border-radius: 11.503px;
  font-size: 11.503px; font-weight: 500; line-height: normal; color: #111; white-space: nowrap;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.5s ease calc(0.42s + var(--i) * 0.12s), transform 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) calc(0.42s + var(--i) * 0.12s);
}
.p1 .lk-lrow { opacity: 1; transform: none; }
.lk-lrow .lk-ck { flex: none; margin: 0 8.2px 0 1.2px; overflow: visible; }
.lk-lrow span { flex: 1; }
.lk-chev { flex: none; display: block; margin-right: -3px; overflow: visible; }

/* the ticks: ring → filled disc → check drawn */
.lk-ck .ck-ring { transition: opacity 0.2s ease calc(1.05s + var(--i) * 0.34s); }
.lk-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) calc(1.05s + var(--i) * 0.34s), opacity 0.15s ease calc(1.05s + var(--i) * 0.34s); }
.lk-ck .ck-tick { stroke-dasharray: 6; stroke-dashoffset: 6;
  transition: stroke-dashoffset 0.3s ease-out calc(1.18s + var(--i) * 0.34s); }
.p1 .lk-ck .ck-ring { opacity: 0; }
.p1 .lk-ck .ck-fill { transform: none; opacity: 1; }
.p1 .lk-ck .ck-tick { stroke-dashoffset: 0; }

/* ---------- right card: the Rocket mark assembling ---------- */
.lk-right {
  position: relative; width: 100%; height: 100%; background: #111; overflow: hidden; border-radius: 34.711px;
  box-shadow: 0 4.628px 11.57px -2.314px rgba(0,0,0,.04), 0 20.827px 41.653px -9.256px rgba(0,0,0,.08), 0 46.282px 92.563px -18.513px rgba(0,0,0,.06);
}
.lk-logo { position: absolute; display: block; overflow: visible; transform-origin: 50% 50%; }
.p3 .lk-logo { animation: lk-settle 0.7s cubic-bezier(0.3, 1.4, 0.5, 1) 1; }
@keyframes lk-settle { 0% { transform: scale(1); } 35% { transform: scale(1.09); } 100% { transform: scale(1); } }

/* pieces glide in from outside the mark (the mask hides them until they cross in) */
.lk-piece { transform-box: fill-box; transform-origin: 50% 50%; transform: translate(var(--ox), var(--oy)) scale(0.6);
  transition: transform 1.25s cubic-bezier(0.2, 0.8, 0.25, 1) calc(0.55s + var(--k) * 0.07s); }
.p1 .lk-piece { transform: none; }
/* …then the mark fills solid */
.lk-solid { opacity: 0; transition: opacity 0.55s ease 0.35s; }
.p2 .lk-solid { opacity: 1; }

/* loose dots: drift in, hover, then get drawn into the mark */
.lk-dot {
  position: absolute; display: block; background: #fff; border-radius: 50%; opacity: 0;
  transform: translate(var(--sx), var(--sy));
  transition: transform 1.05s cubic-bezier(0.2, 0.8, 0.25, 1) calc(0.35s + var(--k) * 0.09s), opacity 0.4s ease calc(0.35s + var(--k) * 0.09s);
}
.p1 .lk-dot { opacity: 1; transform: none; }
.p2 .lk-dot { opacity: 0; transform: translate(var(--gx), var(--gy)) scale(0.2);
  transition: transform 0.75s cubic-bezier(0.55, 0, 0.8, 0.4) calc(var(--k) * 0.045s), opacity 0.25s ease calc(0.5s + var(--k) * 0.045s); }

.lk-lock {
  position: absolute; margin: 0; left: 161.84px; top: 188.6px; transform: translateX(-50%);
  font-family: 'Figtree', 'Inter', sans-serif; font-size: 11.717px; font-weight: 400; line-height: normal; color: #fff; white-space: nowrap;
  opacity: 0; transition: opacity 0.5s ease 0.55s;
}
.p1 .lk-lock { opacity: 1; }

/* a soft ring as the lock lands */
.lk-pulse { position: absolute; width: 60px; height: 60px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.55); opacity: 0; pointer-events: none; }
.p3 .lk-pulse { animation: lk-ring 1.1s cubic-bezier(0.2, 0.6, 0.3, 1) 1; }
@keyframes lk-ring { 0% { opacity: 0.8; transform: scale(0.7); } 100% { opacity: 0; transform: scale(2.6); } }