/* ============================================================
   Honest Mortgage — Clients portal: cinematic layer
   Loaded on the client flagship (buying.html) on top of site.css.
   Holds the signature client interactions: the scroll-drawn
   guided journey, conversational loan accordion, embedded
   calculator, and the cinematic reveal choreography.
   ============================================================ */

/* ---- cinematic reveal (richer than the base .reveal) ---- */
.cine { opacity: 0; transform: translateY(34px); filter: blur(6px); }
.cine.in { opacity: 1; transform: none; filter: none; transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease); }
.cine--l { transform: translateX(-40px); }
.cine--r { transform: translateX(40px); }
.cine.in.cine--l, .cine.in.cine--r { transform: none; }
/* On a phone the column is the full width, so a 40px sideways start pushes
   the element past the screen edge until it scrolls into view — and the page
   can be panned sideways in the meantime. Rise in vertically instead. */
@media (max-width: 640px) { .cine--l, .cine--r { transform: translateY(34px); } }
.cine[data-d="1"].in { transition-delay: 0.08s; }
.cine[data-d="2"].in { transition-delay: 0.16s; }
.cine[data-d="3"].in { transition-delay: 0.24s; }
.motion-calm .cine { filter: none; transform: translateY(20px); }
.motion-calm .cine.in { transition-duration: 0.6s; }
.motion-off .cine { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }

/* ============================================================
   HERO — cinematic client open with depth glows
   ============================================================ */
.chero { position: relative; overflow: hidden; background: var(--navy); color: var(--cream); padding: clamp(72px,9vw,128px) 0 clamp(72px,9vw,120px); }
.chero__glow { position: absolute; inset: 0; pointer-events: none; }
.chero__glow::before, .chero__glow::after { content: ""; position: absolute; border-radius: 50%; }
.chero__glow::before { width: 60vw; height: 60vw; left: -14vw; top: -22vw; background: radial-gradient(circle, rgba(126,181,227,0.26), transparent 62%); }
.chero__glow::after { width: 46vw; height: 46vw; right: -10vw; top: -8vw; background: radial-gradient(circle, rgba(201,107,76,0.16), transparent 62%); }
.chero .wrap { position: relative; }
.chero h1 { font-weight: 900; letter-spacing: -0.035em; line-height: 0.94; font-size: clamp(48px,8vw,108px); margin: 0; color: #fff; max-width: 16ch; }
.chero h1 .soft { color: var(--sky); }
.chero .lede { margin: 26px 0 0; max-width: 56ch; font-size: clamp(18px,2vw,22px); line-height: 1.55; color: var(--fg-on-dark-2); }
.chero__actions { margin-top: 38px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

/* ============================================================
   GUIDED JOURNEY (after) — a terracotta line draws as you scroll
   ============================================================ */
.journey { position: relative; }
.journey__intro { max-width: 60ch; margin-bottom: clamp(40px,6vw,72px); }
.journey__track { position: relative; display: grid; grid-template-columns: 88px 1fr; gap: 0; }
.journey__rail { position: relative; }
.journey__rail::before { content: ""; position: absolute; left: 31px; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: var(--sand-deep); }
.journey__fill { position: absolute; left: 31px; top: 18px; width: 3px; border-radius: 3px; background: var(--terracotta); height: 0; transition: height 0.15s linear; will-change: height; }
.journey-accent-sky .journey__fill { background: var(--sky); }
.journey__steps { display: flex; flex-direction: column; }
/* The rail and the steps share one grid area. Side by side, the rail took an
   empty 88px column and each step then added its own 88px marker column, so
   the text was indented twice and the dots sat 88px off the line. Overlaid,
   the rail's 31px offset lands on the 64px dots' centres. */
.journey__rail, .journey__steps { grid-row: 1; grid-column: 1 / -1; }
@media (max-width: 640px) { .jstep { grid-template-columns: 76px 1fr; } }
.jstep { display: grid; grid-template-columns: 88px 1fr; grid-column: 1 / -1; align-items: start; padding: clamp(22px,3.2vw,40px) 0; }
.jstep__marker { position: relative; width: 64px; height: 64px; }
.jdot { position: absolute; left: 0; top: 4px; width: 64px; height: 64px; border-radius: 999px; background: #fff; border: 3px solid var(--sand-deep); display: grid; place-items: center; color: var(--muted); transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), color 0.5s var(--ease), background 0.5s var(--ease); z-index: 2; }
.jdot svg { width: 26px; height: 26px; }
.jstep.on .jdot { border-color: var(--terracotta); color: var(--terracotta); background: var(--terracotta-tint); transform: scale(1.08); }
.journey-accent-sky .jstep.on .jdot { border-color: var(--sky); color: var(--navy); background: var(--sky-tint); }
.jstep__body { padding-top: 6px; opacity: 0.45; transform: translateY(8px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.jstep.on .jstep__body { opacity: 1; transform: none; }
.jstep__n { font-size: 13px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--terracotta); }
.journey-accent-sky .jstep__n { color: var(--sky-deep, #4f93c9); }
.jstep h3 { margin: 6px 0 8px; font-size: clamp(24px,3vw,34px); font-weight: 800; letter-spacing: -0.02em; color: var(--navy); }
.jstep p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--fg2); max-width: 54ch; }
.motion-off .journey__fill { transition: none; }

/* ============================================================
   LOAN OPTIONS (after) — conversational accordion
   ============================================================ */
.lacc { display: flex; flex-direction: column; gap: 12px; max-width: 940px; }
.lrow { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); overflow: hidden; transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.lrow.open { box-shadow: var(--shadow-card); border-color: transparent; }
.lrow__head { display: flex; align-items: center; gap: 20px; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font-family: var(--font-sans); padding: 24px 28px; }
.lrow__icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: var(--radius-card); display: grid; place-items: center; background: var(--sky-tint); color: var(--navy); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.lrow.open .lrow__icon { background: var(--terracotta); color: #fff; }
.lrow__icon svg { width: 24px; height: 24px; }
.lrow__title { flex: 1; }
.lrow__title b { display: block; font-size: 20px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; }
.lrow__title span { font-size: 14.5px; color: var(--fg3); }
/* The one-line highlight beside each loan name. An <em>, not a <span>, so
   the subtitle rule above doesn't restyle it; inline-block so on a phone it
   wraps under the name as a unit. */
.lrow__pill { display: inline-block; vertical-align: 3px; margin-left: 10px; padding: 4px 11px; border-radius: var(--radius-pill);
  background: var(--sky-tint); color: var(--navy); font-style: normal; font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; }
@media (max-width: 520px) { .lrow__pill { margin: 6px 0 2px; display: table; } }
.lrow__chev { flex-shrink: 0; color: var(--muted); transition: transform var(--dur) var(--ease); }
.lrow.open .lrow__chev { transform: rotate(180deg); color: var(--terracotta); }
.lrow__chev svg { width: 22px; height: 22px; }
.lrow__panel { overflow: hidden; height: 0; transition: height 0.42s var(--ease); }
.motion-off .lrow__panel { transition: none; }
.lrow__inner { padding: 0 28px 28px 94px; }
.lrow__inner p { margin: 0 0 14px; font-size: 16px; line-height: 1.62; color: var(--fg2); max-width: 60ch; }
.lrow__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.lrow__meta span { font-size: 13px; font-weight: 600; color: var(--navy); background: var(--cream); border-radius: var(--radius-pill); padding: 7px 14px; }
@media (max-width: 640px) { .lrow__inner { padding: 0 24px 24px 24px; } }

/* ============================================================
   LOAN OPTIONS (before) — the old flat grid, for comparison
   ============================================================ */
.beforegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 980px) { .beforegrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .beforegrid { grid-template-columns: 1fr; } }

/* ============================================================
   EMBEDDED CALCULATOR (ported from the design-system UI kit)
   ============================================================ */
.calc2 { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px,4vw,48px); align-items: start; }
.calc2__panel { background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: clamp(28px,3vw,36px); }
.cl2 { margin-bottom: 30px; }
.cl2:last-child { margin-bottom: 0; }
.cl2__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.cl2__lab { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--navy); text-transform: uppercase; }
.cl2__val { font-size: 19px; font-weight: 700; color: var(--terracotta); font-variant-numeric: tabular-nums; }
.cl2 input[type=range] { width: 100%; height: 6px; border-radius: 999px; -webkit-appearance: none; appearance: none; cursor: pointer; outline: none; }
.cl2 input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 999px; background: var(--terracotta); cursor: pointer; border: 3px solid #fff; box-shadow: var(--shadow-btn); }
.cl2 input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 999px; background: var(--terracotta); border: 3px solid #fff; cursor: pointer; }
.cl2__terms { display: flex; gap: 10px; }
.cl2__term { flex: 1; padding: 13px 0; border-radius: var(--radius-btn); cursor: pointer; font: inherit; font-size: 15px; font-weight: 600; border: 1.5px solid var(--rule); background: #fff; color: var(--navy); transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.cl2__term.on { border-color: var(--terracotta); background: var(--terracotta-tint); color: var(--terracotta); }
.calc2__result { background: var(--navy); border-radius: var(--radius-card); padding: clamp(28px,3vw,36px); color: var(--cream); position: relative; overflow: hidden; }
.calc2__result::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 82% 8%, rgba(126,181,227,0.20), transparent 52%); }
.calc2__result > * { position: relative; }
.calc2__lbl { font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sky); margin-bottom: 14px; }
.calc2__big { font-size: clamp(46px,6vw,64px); font-weight: 900; letter-spacing: -0.03em; line-height: 1; margin-bottom: 26px; font-variant-numeric: tabular-nums; color: #fff; }
.calc2__row { display: flex; justify-content: space-between; padding: 13px 0; border-bottom: 1px dotted rgba(245,239,230,0.22); font-size: 15px; }
.calc2__row span { color: rgba(245,239,230,0.82); }
.calc2__row b { font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; }
.calc2__row--total { border-bottom: 0; padding: 16px 0 24px; }
.calc2__note { font-size: 12.5px; line-height: 1.5; color: rgba(245,239,230,0.6); margin-top: 16px; }
@media (max-width: 880px) { .calc2 { grid-template-columns: 1fr; } }

/* tween counter shimmer for calculator number */
.calc2__big.bump { animation: bump 0.3s var(--ease); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.03); } 100% { transform: scale(1); } }
.motion-off .calc2__big.bump { animation: none; }

/* APR beside the rate (Reg Z 1026.24): same treatment as the Tools calculators' .cs-apr */
.cl2__apr { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }
.cl2__aprlbl { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted, #6b7280); }
.cl2__apr b { font-size: 18px; font-weight: 700; color: var(--terracotta); font-variant-numeric: tabular-nums; }
.cl2__aprwhy { font-size: 12.5px; color: var(--fg3, #6b7280); flex-basis: 100%; }