/* ═══════════════════════════════════════════════════════════════════════════
   READ-ALONG — states for the cards scroll-focus.js walks through
   ═══════════════════════════════════════════════════════════════════════════

   Three states, and the rule that matters is the third one: a card you have
   already read never dims again. Dimming behind the reader turns a guide
   into a strobe.

     .sf-pending   not reached yet — low, dim, no accent
     .sf-active    at the reading position — lifted, accent edge
     (neither)     read — bright and settled, exactly as designed

   Nothing here applies until scroll-focus.js adds .sf-on to a grid, so the
   static page, a reader with JavaScript off, and the print view all show
   every card at full strength.

   Two implementation notes worth keeping:

   - Movement uses the `translate` property, not `transform`. The tool cards
     carry inline onmouseenter handlers that write element.style.transform
     directly, and .hiw-step:hover sets a transform of its own. A transform
     here would be silently clobbered by both.
   - The accent is an ::after edge rather than a box-shadow ring, because the
     same inline handlers overwrite box-shadow on hover.
   ═══════════════════════════════════════════════════════════════════════════ */

.sf-on .sf-item{
  position:relative;
  opacity:1;
  translate:0 0;
  transition:opacity .5s cubic-bezier(.2,.7,.2,1),
             translate .5s cubic-bezier(.2,.7,.2,1);
}

/* Not reached yet.

   0.72, not the 0.42 this started at. Element opacity fades the text and the
   card together over the page ground, so at 0.42 the body copy measured
   1.93:1 against its own card — unreadable for anyone who stops scrolling
   mid-grid, uses magnification, or scrolls faster than the transition. At
   0.72 it measures 3.47:1, still a plain step down from the 6.53:1 of a card
   that has been read, but legible at every moment.

   The "which card is current" signal therefore leans on the accent edge and
   the badge rather than on dimming, which is the right place for it anyway:
   those are additive marks, not subtractive ones. */
.sf-on .sf-item.sf-pending{
  opacity:.72;
  translate:0 14px;
}

/* At the reading position. A 3px accent edge down the leading side — it
   names the current card without moving it or restyling it. */
.sf-on .sf-item::after{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:3px;
  height:0;
  border-radius:0 3px 3px 0;
  background:var(--mo-accent,#087443);
  opacity:0;
  transition:height .42s cubic-bezier(.2,.7,.2,1),
             top .42s cubic-bezier(.2,.7,.2,1),
             opacity .3s ease;
  pointer-events:none;
}
.sf-on .sf-item.sf-active::after{
  top:18%;
  height:64%;
  opacity:1;
}
[data-theme="dark"] .sf-on .sf-item::after{background:#5FD9A0;}

/* ── The six numbered process steps ──────────────────────────────────────
   The badge is already the step's identity, so it carries the state rather
   than a second indicator competing with it. Pending reads as an empty
   outline, the current step fills with the accent and gains a halo, and a
   completed step settles back to the solid brand green. */

.sf-on .hiw-step .hiw-num{
  transition:background .35s ease, color .35s ease,
             box-shadow .35s ease, border-color .35s ease;
  border:2px solid #085C3A;
  box-sizing:border-box;
}
.sf-on .hiw-step.sf-pending .hiw-num{
  background:transparent;
  color:#085C3A;
  border-color:#085C3A59;
}
.sf-on .hiw-step.sf-active .hiw-num{
  background:#18C979;
  border-color:#18C979;
  color:#06281f;
  box-shadow:0 0 0 6px #18c9792e;
}
[data-theme="dark"] .sf-on .hiw-step .hiw-num{border-color:#18C979;}
[data-theme="dark"] .sf-on .hiw-step.sf-pending .hiw-num{
  background:transparent;color:#5FD9A0;border-color:#18c97959;
}
[data-theme="dark"] .sf-on .hiw-step.sf-active .hiw-num{
  background:#18C979;border-color:#18C979;color:#061410;box-shadow:0 0 0 6px #18c97933;
}

/* The step icon warms as its step becomes current, matching the hover state
   that already exists so the two never contradict each other. */
.sf-on .hiw-step .hiw-icon{transition:color .35s ease;}
.sf-on .hiw-step.sf-active .hiw-icon{color:#18C979;}

/* ── The progress rail ───────────────────────────────────────────────────
   One hairline above a grid, filling as the reader works through it. It is
   the only part of this that says how much is left, which is the question a
   six-card grid otherwise refuses to answer. */

.sf-rail{
  max-width:1040px;
  margin:0 auto 18px;
  height:2px;
  border-radius:2px;
  background:#085c3a1f;
  overflow:hidden;
}
.sf-rail i{
  display:block;
  height:100%;
  width:100%;
  border-radius:2px;
  background:linear-gradient(90deg,#085C3A,#18C979);
  transform:scaleX(var(--sf-p,0));
  transform-origin:left center;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
[data-theme="dark"] .sf-rail{background:#ffffff1a;}
[data-theme="dark"] .sf-rail i{background:linear-gradient(90deg,#18C979,#5FD9A0);}

/* The tools grid sits in a 1100px section rather than the 1040px process
   grid, so its rail matches its own content width. */
#moneyed-tools .sf-rail{max-width:none;}

/* ── Reduced motion ──────────────────────────────────────────────────────

   Reduce MOVEMENT, not feedback. What causes vestibular trouble is things
   travelling across the screen — sliding, parallax, scaling, spinning. A
   change of opacity or colour in place does not, and the setting was never
   meant to strip a page of all state.

   So with the setting on, the read-along still works: cards ahead are still
   held back, the current card still takes the accent edge and the lit badge.
   Nothing slides, and nothing animates further than a short cross-fade.

   The !important is load-bearing. homepage-refresh.css kills every
   transition inside #marketing-view wholesale under this same media query:

       #marketing-view *, ::before, ::after { transition:none!important }

   Correct for movement, too broad for colour — without these overrides the
   states would snap. They are scoped to .sf-* so the blanket rule still
   governs everything else on the page. */
 (prefers-reduced-motion:reduce){
  .sf-on .sf-item{
    translate:none!important;
    transition:opacity .2s linear!important;
  }
  .sf-on .sf-item.sf-pending{opacity:.72;translate:none!important;}
  .sf-on .sf-item::after{
    top:18%;height:64%;
    transition:opacity .2s linear!important;
  }
  .sf-on .hiw-step .hiw-num{
    transition:background .2s linear,color .2s linear,border-color .2s linear!important;
  }
  .sf-on .hiw-step .hiw-icon{transition:color .2s linear!important;}
  .sf-rail i{transition:transform .2s linear!important;}
}

/* ── The three consolidation scenarios ───────────────────────────────────
   Each card's split bar is the whole argument: how much of every rupee
   repaid is interest. Growing it as the card is reached means the reader
   watches the orange section widen from "as it stands" to "stretched"
   rather than finding three finished bars and having to compare them cold.
   The interest portion grows a beat after the principal, so the cost is
   seen arriving rather than being there all along. */

.sf-on .mn-cons-card .mn-cons-bar i,
.sf-on .mn-cons-card .mn-cons-bar u{
  transform:scaleX(1);
  transform-origin:left center;
  transition:transform .75s cubic-bezier(.2,.7,.2,1);
}
.sf-on .mn-cons-card .mn-cons-bar u{
  transform-origin:right center;
  transition-delay:.22s;
}
.sf-on .mn-cons-card.sf-pending .mn-cons-bar i,
.sf-on .mn-cons-card.sf-pending .mn-cons-bar u{
  transform:scaleX(0);
}

/* The verdict line is the card's conclusion, so it lands last. */
.sf-on .mn-cons-card .mn-cons-verdict{
  opacity:1;translate:0 0;
  transition:opacity .5s ease .34s, translate .5s cubic-bezier(.2,.7,.2,1) .34s;
}
.sf-on .mn-cons-card.sf-pending .mn-cons-verdict{opacity:0;translate:0 8px;}

/* The bars grow and the verdict slides, so both are movement: under reduced
   motion they are simply present. */
 (prefers-reduced-motion:reduce){
  .sf-on .mn-cons-card .mn-cons-bar i,
  .sf-on .mn-cons-card .mn-cons-bar u,
  .sf-on .mn-cons-card.sf-pending .mn-cons-bar i,
  .sf-on .mn-cons-card.sf-pending .mn-cons-bar u{transform:none!important;transition:none!important;}
  .sf-on .mn-cons-card .mn-cons-verdict,
  .sf-on .mn-cons-card.sf-pending .mn-cons-verdict{opacity:1!important;translate:none!important;}
}

/* ── The icon writes itself ──────────────────────────────────────────────
   scroll-focus.js measures each shape in a card's icon and hands over its
   length as --len plus a per-shape delay as --d. A stroked shape then traces
   from nothing to whole; a filled one fades on the same clock. Several
   strokes in sequence make the icon look written rather than stamped.

   The length has to come from JS because CSS cannot measure a path. If the
   measurement failed, --len is never set, the fallback 0 leaves dasharray
   effectively off, and the icon simply appears — which is the old behaviour,
   not a broken one. */

.sf-on .sf-item svg .sf-draw{
  stroke-dasharray:var(--len,0);
  stroke-dashoffset:0;
  transition:stroke-dashoffset .85s cubic-bezier(.33,.9,.3,1) var(--d,0s);
}
.sf-on .sf-item.sf-pending svg .sf-draw{
  stroke-dashoffset:var(--len,0);
}
.sf-on .sf-item svg .sf-fade{
  opacity:1;
  transition:opacity .4s ease var(--d,0s);
}
.sf-on .sf-item.sf-pending svg .sf-fade{opacity:0;}

/* ── The second beat ─────────────────────────────────────────────────────
   Each card has a reassurance at the bottom — "✓ No credit score impact",
   "Free", "45 lenders". It is the answer to the objection the card raises,
   so it lands a moment after the card itself rather than with it. */
.sf-on .hiw-step .hiw-note{
  opacity:1;translate:0 0;
  transition:opacity .45s ease .3s, translate .45s cubic-bezier(.2,.7,.2,1) .3s;
}
.sf-on .hiw-step.sf-pending .hiw-note{opacity:0;translate:0 6px;}

@media (prefers-reduced-motion:reduce){
  /* Tracing a line is movement, so under this setting the icon is simply
     drawn. The badge still fades, since that is not. */
  .sf-on .sf-item svg .sf-draw,
  .sf-on .sf-item.sf-pending svg .sf-draw{
    stroke-dasharray:none!important;stroke-dashoffset:0!important;transition:none!important;
  }
  .sf-on .sf-item svg .sf-fade,
  .sf-on .sf-item.sf-pending svg .sf-fade{opacity:1!important;transition:none!important;}
  .sf-on .hiw-step .hiw-note,
  .sf-on .hiw-step.sf-pending .hiw-note{
    opacity:1!important;translate:none!important;transition:none!important;
  }
}