/* ============================================
   FLOW — Rocket home-equity walkthrough: the screens. Positions come
   straight from the Figma frames (393x852). Script sets data-* on .fd-stage
   (page, slide, step, kb, sel1, sel3) and these rules do the animating.
   ============================================ */
.fd-stage {
  --fd-font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pill: #eaeaea;
}
.fd-stage[data-page="sheet"], .fd-stage[data-page="app"] { --pill: #2e2e2e; }

/* ---------- home ---------- */
.fd-home {
  position: absolute; inset: 0; background: #fff;
  transform-origin: 50% 50%;
  transition: transform calc(0.75s * var(--t, 1)) cubic-bezier(0.32, 0.72, 0, 1);
}
.fd-dim { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity calc(0.75s * var(--t, 1)) ease; pointer-events: none; }
.fd-stage:not([data-page="home"]) .fd-home { transform: scale(0.94) translateY(8px); }
.fd-stage:not([data-page="home"]) .fd-dim { opacity: 0.2; }

.fd-card {
  position: absolute; border-radius: 24px; background: #fff;
  box-shadow: inset 0 0 0 1px #e9e9e9;
  transition: transform calc(0.18s * var(--t, 1)) ease, background calc(0.18s * var(--t, 1)) ease;
}
.fd-card.is-pressed { transform: scale(0.96); background: #fafafa; }
.fd-seg { position: absolute; border-radius: 24px; background: #f7f7f7; box-shadow: inset 0 0 0 1px #e3e3e3; }
.fd-seg-thumb {
  position: absolute; background: #fff; border-radius: 20px;
  box-shadow: inset 0 0 0 1px #e3e3e3, 0 6px 14px rgba(17, 17, 17, 0.08);
}
.fd-rate { position: absolute; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px #f0f0f0; }
.fd-chip { position: absolute; border-radius: 8px; background: #e4e9fd; }
.fd-calc { position: absolute; border-radius: 16px; background: #f6f8ff; }

/* ---------- onboarding ---------- */
.fd-onb {
  position: absolute; inset: 0; background: #fff; overflow: hidden;
  transform-origin: 50% 0; border-radius: 0;
  transform: translateY(100%);
  transition: transform calc(0.75s * var(--t, 1)) cubic-bezier(0.32, 0.72, 0, 1), border-radius calc(0.8s * var(--t, 1)) cubic-bezier(0.32, 0.72, 0, 1), opacity calc(0.35s * var(--t, 1)) ease;
}
.fd-stage[data-page="onb"] .fd-onb { transform: none; }
/* when the goal sheet rises, this page shrinks back (like an iOS sheet) */
.fd-stage[data-page="sheet"] .fd-onb,
.fd-stage[data-page="app"] .fd-onb {
  transform: translateY(54px) scale(0.918); border-radius: 36px;
  transition-duration: calc(0.8s * var(--t, 1)), calc(0.8s * var(--t, 1)), calc(0.35s * var(--t, 1));
}
.fd-stage[data-page="app"] .fd-onb { opacity: 0; }
.fd-onbdim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity calc(0.8s * var(--t, 1)) ease; }
.fd-stage[data-page="sheet"] .fd-onbdim, .fd-stage[data-page="app"] .fd-onbdim { opacity: 0.09; }
.fd-track {
  position: absolute; left: 0; top: 0; width: 393px; height: 852px;
  transition: transform calc(0.7s * var(--t, 1)) cubic-bezier(0.32, 0.72, 0, 1);
}
.fd-stage[data-slide="1"] .fd-track { transform: translateX(-345px); }
.fd-stage[data-slide="2"] .fd-track { transform: translateX(-690px); }
.fd-mini { position: absolute; overflow: hidden; border-radius: 32px; background: #f7f7f7; }
.fd-mini-img { transform-origin: 50% 0; transform: scale(1.07); transition: transform calc(1.3s * var(--t, 1)) cubic-bezier(0.16, 1, 0.3, 1) calc(0.1s * var(--t, 1)); }
.fd-stage[data-slide="0"] .fd-mini:nth-child(1) .fd-mini-img,
.fd-stage[data-slide="1"] .fd-mini:nth-child(2) .fd-mini-img,
.fd-stage[data-slide="2"] .fd-mini:nth-child(3) .fd-mini-img { transform: none; }
.fd-ttl {
  position: absolute; inset: 0; opacity: 0; transform: translateY(14px);
  transition: opacity calc(0.35s * var(--t, 1)) ease, transform calc(0.5s * var(--t, 1)) ease;
}
.fd-stage[data-slide="0"] .fd-ttl[data-i="0"],
.fd-stage[data-slide="1"] .fd-ttl[data-i="1"],
.fd-stage[data-slide="2"] .fd-ttl[data-i="2"] {
  opacity: 1; transform: none;
  transition: opacity calc(0.5s * var(--t, 1)) ease calc(0.2s * var(--t, 1)), transform calc(0.7s * var(--t, 1)) cubic-bezier(0.16, 1, 0.3, 1) calc(0.2s * var(--t, 1));
}
.fd-pag { position: absolute; left: 178.5px; top: 714px; height: 4px; display: flex; gap: 6px; }
.fd-pag i { display: block; width: 4px; height: 4px; border-radius: 2px; background: #ccc; transition: width calc(0.5s * var(--t, 1)) cubic-bezier(0.32, 0.72, 0, 1), background calc(0.3s * var(--t, 1)) ease; }
.fd-stage[data-slide="0"] .fd-pag i:nth-child(1),
.fd-stage[data-slide="1"] .fd-pag i:nth-child(2),
.fd-stage[data-slide="2"] .fd-pag i:nth-child(3) { width: 16px; background: #111; }
.fd-btn { position: absolute; background: #111; border-radius: 28px; transition: transform calc(0.18s * var(--t, 1)) ease; }
.fd-btn.is-pressed { transform: scale(0.97); }

/* ---------- dark backdrop + sheet ---------- */
.fd-dark { position: absolute; inset: 0; background: #111; opacity: 0; transition: opacity calc(0.5s * var(--t, 1)) ease; pointer-events: none; }
.fd-stage[data-page="sheet"] .fd-dark, .fd-stage[data-page="app"] .fd-dark { opacity: 1; }
.fd-sheet {
  position: absolute; inset: 0; transform: translateY(852px); pointer-events: none;
  transition: transform calc(0.8s * var(--t, 1)) cubic-bezier(0.32, 0.72, 0, 1);
}
.fd-stage[data-page="sheet"] .fd-sheet, .fd-stage[data-page="app"] .fd-sheet { transform: none; }
.fd-sheet-bg {
  position: absolute; left: 0; top: 64px; width: 393px; height: 788px;
  background: #fff; border-radius: 40px 40px 0 0;
  transition: transform calc(0.8s * var(--t, 1)) cubic-bezier(0.32, 0.72, 0, 1);
}
.fd-stage[data-page="app"] .fd-sheet-bg { transform: translateY(80px); }
.fd-sheet-ui { position: absolute; inset: 0; transition: opacity calc(0.3s * var(--t, 1)) ease; }
.fd-stage[data-page="app"] .fd-sheet-ui { opacity: 0; }
.fd-back { opacity: 0; transition: opacity calc(0.3s * var(--t, 1)) ease; }
.fd-stage[data-step="1"] .fd-back, .fd-stage[data-step="2"] .fd-back { opacity: 1; }
.fd-prog { position: absolute; left: 24px; top: 144px; width: 345px; height: 3px; border-radius: 2px; background: #f2f2f2; overflow: hidden; }
.fd-prog i { display: block; height: 100%; width: 122px; background: #de3341; border-radius: 2px; transition: width calc(0.8s * var(--t, 1)) cubic-bezier(0.32, 0.72, 0, 1); }
.fd-stage[data-step="1"] .fd-prog i { width: 183px; }
.fd-stage[data-step="2"] .fd-prog i { width: 245px; }
.fd-stage[data-sel3="1"] .fd-prog i { width: 345px; }

.fd-step {
  position: absolute; inset: 0; opacity: 0; transform: translateX(48px); pointer-events: none;
  transition: opacity calc(0.4s * var(--t, 1)) ease, transform calc(0.7s * var(--t, 1)) cubic-bezier(0.32, 0.72, 0, 1);
}
.fd-stage[data-step="0"] .fd-step[data-i="0"],
.fd-stage[data-step="1"] .fd-step[data-i="1"],
.fd-stage[data-step="2"] .fd-step[data-i="2"] { opacity: 1; transform: none; }
.fd-stage[data-step="1"] .fd-step[data-i="0"],
.fd-stage[data-step="2"] .fd-step[data-i="0"],
.fd-stage[data-step="2"] .fd-step[data-i="1"] { transform: translateX(-48px); }
.fd-stage[data-page="app"] .fd-step[data-i="0"],
.fd-stage[data-page="app"] .fd-step[data-i="1"],
.fd-stage[data-page="app"] .fd-step[data-i="2"] { opacity: 0; transition-duration: calc(0.3s * var(--t, 1)); }

.fd-opt {
  position: absolute; border-radius: 16px; background: #f7f7f7;
  box-shadow: inset 0 0 0 1px #ededed;
  transition: background calc(0.25s * var(--t, 1)) ease, box-shadow calc(0.25s * var(--t, 1)) ease, transform calc(0.18s * var(--t, 1)) ease;
}
.fd-opt.is-pressed { transform: scale(0.98); }
.fd-stage[data-sel1="1"] .fd-opt[data-q="1"][data-n="1"],
.fd-stage[data-sel3="1"] .fd-opt[data-q="3"][data-n="2"] { background: #eff7f3; box-shadow: inset 0 0 0 2px #0a9142; }
.fd-field { position: absolute; border-radius: 16px; background: #f2f2f2; }
.fd-cur, .fd-amt { z-index: 1; }
.fd-amt::after {
  content: ""; position: absolute; left: 100%; margin-left: 3px; top: -8px; width: 2px; height: 16px;
  background: #de3341; animation: fd-blink 1s steps(1) infinite;
}
@keyframes fd-blink { 50% { opacity: 0; } }

.fd-kb {
  position: absolute; left: 0; top: 560px; width: 393px; height: 292px; background: #d0d4dc;
  transform: translateY(100%); transition: transform calc(0.5s * var(--t, 1)) cubic-bezier(0.32, 0.72, 0, 1);
}
.fd-stage[data-kb="1"] .fd-kb { transform: none; }
.fd-key { position: absolute; border-radius: 5px; background: #adb3bc; mix-blend-mode: multiply; opacity: 0; transition: opacity calc(0.12s * var(--t, 1)) ease; }
.fd-key.is-down { opacity: 1; transition-duration: calc(0.04s * var(--t, 1)); }

/* ---------- application ---------- */
.fd-app { position: absolute; inset: 0; pointer-events: none; }
.fd-pillwrap, .fd-x3 { opacity: 0; transform: translateY(-10px); transition: opacity calc(0.4s * var(--t, 1)) ease calc(0.25s * var(--t, 1)), transform calc(0.6s * var(--t, 1)) cubic-bezier(0.16, 1, 0.3, 1) calc(0.25s * var(--t, 1)); }
.fd-pillwrap { position: absolute; left: 0; top: 0; width: 393px; height: 150px; }
.fd-pillhead { position: absolute; background: #222; border-radius: 21px; transition: transform calc(0.18s * var(--t, 1)) ease, background calc(0.18s * var(--t, 1)) ease; }
.fd-pillhead.is-pressed { transform: scale(0.95); background: #2c2c2c; }
/* 4-section progress ring: static, draws in once as the page arrives */
.fd-prog-ring .base path { stroke: #545454; }
.fd-prog-ring .on { stroke: #fff; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset calc(0.55s * var(--t, 1)) ease; }
.fd-stage[data-page="app"] .fd-prog-ring .on { stroke-dashoffset: 0; }
.fd-stage[data-page="app"] .fd-prog-ring .s1 { transition-delay: calc(0.7s * var(--t, 1)); }
.fd-stage[data-page="app"] .fd-prog-ring .s2 { transition-delay: calc(1.2s * var(--t, 1)); }
.fd-stage[data-page="app"] .fd-pillwrap, .fd-stage[data-page="app"] .fd-x3 { opacity: 1; transform: none; }
/* with the step overview open there is no close button (as in the design) */
.fd-stage[data-page="app"][data-steps="1"] .fd-x3 { opacity: 0; transition-delay: 0s; }
.fd-ac {
  position: absolute; border-radius: 24px; background: #fff;
  box-shadow: inset 0 0 0 1px #e9e9e9;
  opacity: 0; transform: translateY(28px);
  transition: opacity calc(0.2s * var(--t, 1)) ease, transform calc(0.2s * var(--t, 1)) ease;
}
.fd-ac.is-open { box-shadow: 0 10px 30px rgba(17, 17, 17, 0.08); }
.fd-live { position: absolute; border-radius: 24px; background: #f7f7f7; opacity: 0; transform: translateY(28px); transition: opacity calc(0.2s * var(--t, 1)) ease, transform calc(0.2s * var(--t, 1)) ease; }
.fd-ghost { position: absolute; border-radius: 24px; box-shadow: inset 0 0 0 2px #111; }
.fd-stage[data-page="app"] .fd-ac, .fd-stage[data-page="app"] .fd-live {
  opacity: 1; transform: none;
  transition: opacity calc(0.6s * var(--t, 1)) ease calc((0.3s + var(--d, 0) * 0.09s) * var(--t, 1)), transform calc(0.9s * var(--t, 1)) cubic-bezier(0.16, 1, 0.3, 1) calc((0.3s + var(--d, 0) * 0.09s) * var(--t, 1));
}
.fd-ac[data-c="1"] { --d: 1; } .fd-ac[data-c="2"] { --d: 2; } .fd-ac[data-c="3"] { --d: 3; } .fd-live { --d: 4; }

/* ---------- step overview: sits under the sheet and is uncovered as it slides down ---------- */
.fd-steps { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.fd-stage[data-page="app"] .fd-steps { opacity: 1; }
.fd-sr {
  position: absolute; left: 0; width: 393px; height: 24px;
  opacity: 0; transform: translateY(-14px);
  transition: opacity calc(0.2s * var(--t, 1)) ease, transform calc(0.2s * var(--t, 1)) ease;
}
.fd-stage[data-page="app"][data-steps="1"] .fd-sr {
  opacity: 1; transform: none;
  transition: opacity calc(0.5s * var(--t, 1)) ease calc((0.15s + var(--i, 0) * 0.07s) * var(--t, 1)), transform calc(0.8s * var(--t, 1)) cubic-bezier(0.16, 1, 0.3, 1) calc((0.15s + var(--i, 0) * 0.07s) * var(--t, 1));
}
.fd-sc { position: absolute; left: 32px; top: 0; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; line-height: 1; }
.fd-sc svg { display: block; }
.fd-sc-on { background: #fff; color: #111; }
.fd-sc-next { background: #222; color: #fff; }
.fd-dash { position: absolute; left: 43px; top: 31.5px; width: 2px; height: 10px; border-radius: 1px; background: #5c5c5c; }
.fd-stage .fd-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2.4px; }
/* tapping the "Application" pill slides the white sheet down to reveal the steps */
.fd-appbody { transition: transform calc(0.8s * var(--t, 1)) cubic-bezier(0.32, 0.72, 0, 1); }
.fd-stage[data-page="app"][data-steps="1"] .fd-appbody { transform: translateY(316px); }
.fd-stage[data-page="app"][data-steps="1"] .fd-sheet-bg { transform: translateY(396px); }

/* ---------- chrome ---------- */
.fd-pills i { position: absolute; top: 24px; height: 16px; border-radius: 8px; background: var(--pill); transition: background calc(0.5s * var(--t, 1)) ease; }
.fd-pills i:nth-child(1) { left: 45px; width: 56px; }
.fd-pills i:nth-child(2) { left: 279px; width: 24px; }
.fd-pills i:nth-child(3) { left: 308px; top: 22px; width: 20px; height: 20px; border-radius: 50%; }
.fd-pills i:nth-child(4) { left: 333px; width: 28px; }
.fd-ind { position: absolute; left: 125px; top: 839px; width: 144px; height: 5px; border-radius: 3px; background: #111; }
@media (prefers-reduced-motion: reduce) {
  .fd-amt::after { animation: none; }
}