/* ═══════════════════════════════════════════════════════════════════════════
   REVEAL — the second half of the homepage stops repeating itself
   ═══════════════════════════════════════════════════════════════════════════

   The diagnosis

   The top of this page has five bespoke scroll systems — the hero lab, the
   four-pillars film, the five-step explainer, the membership latch, the
   chapter line-masks — and it reads as a piece of film. Everything from
   "Where would you like to start?" down does not. Eleven sections, about
   16,000px, roughly two thirds of the page, all share exactly one
   treatment: fade up 44px. Same distance, same curve, same timing, eleven
   times in a row.

   A reader's eye learns that in two sections and then stops seeing it.
   That is why the lower page feels flat even though technically every
   block is animated. The problem is not that there is too little motion;
   it is that there is one motion.

   What this adds, and why it is one file and not three

   There are already nineteen scroll-driven scripts on this page. The last
   thing it needs is a twentieth bespoke one. So this is a primitive with
   two behaviours that get applied where they mean something:

     .rv-item   a repeated thing — a card, a row, a question — arrives in
                sequence with its neighbours instead of as a slab. A list
                that arrives in order reads as authored. A list that
                appears all at once reads as a screenshot.

     .rv-count  a figure counts up to itself. 16 Yrs / 45 Lenders / 500+
                Loan Products is the trust bar, and three static numbers
                are a claim. The same three counting are a measurement.
                The site already proves the pattern with the CIBIL score
                in the stories; it just was never used anywhere else.

   The safety contract is the same one every other layer here follows:
   nothing is hidden except behind a class that only reveal.js adds, the
   arrival is latched and can never be undone, and reduced motion keeps a
   plain fade with no movement at all.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The staggered item ──────────────────────────────────────────────── */

/* The hidden state is scoped to .rv-armed on the GROUP, which only
   reveal.js adds. No script, no observer, old browser: no class, and every
   card renders exactly as it always did. */
#marketing-view .rv-armed > .rv-item,
#marketing-view .rv-armed .rv-item{
  opacity:0;
  /* RAISED 24 Oct 2026, from translateY(18px) scale(.985) and a 62ms
     step. Nakul could not tell these were animating at all, and the
     reason was not the distance — it was the STEP. At 62ms a row of six
     finishes in 372ms, which the eye reads as one slab appearing, not
     as a sequence. 88ms puts the same six at 528ms: still one gesture,
     but now a wave you can see travel.

     The travel went 18→26px and the scale .985→.97 for the same reason,
     and no further: Nakul's standing rule on this site is that motion
     must feel seamless and nothing may happen dramatically. This is
     meant to be noticed, not performed. */
  transform:translateY(26px) scale(.97);
  transition:
    opacity   .52s ease,
    transform .72s cubic-bezier(.16,.84,.3,1);
  /* --rv-i is the item's index in its group, written by the script. It
     is capped at 10 there, so the longest any list takes to finish
     arriving is 10 × 88ms = 880ms however many items it holds. */
  transition-delay:calc(var(--rv-i, 0) * .088s);
}
#marketing-view .rv-armed.rv-in > .rv-item,
#marketing-view .rv-armed.rv-in .rv-item{
  opacity:1;
  transform:none;
}

/* A table row is not a card. transform on a <tr> is legal but it detaches
   the row from the table's own layout while it runs, which can shiver the
   column widths. Rows fade only. */
#marketing-view .rv-armed tr.rv-item{
  transform:none;
  transition:opacity .45s ease;
  transition-delay:calc(var(--rv-i, 0) * .05s);
}

/* The generic section fade already animates the first six children of a
   grid. Where this layer has taken an item over, that rule has to let go
   or the two run at once on the same element and the stagger doubles. */
#marketing-view .motion-section.motion-arrived > * > *.rv-item,
#marketing-view .motion-section.motion-arrived > *.rv-item{
  animation:none !important;
}

/* Done moving. */
#marketing-view .rv-armed.rv-in .rv-item{ will-change:auto; }

/* ── The counting figure ─────────────────────────────────────────────── */

/* Digits of different widths make a counter jitter sideways while it runs,
   which is the single thing that makes a count-up look cheap. Tabular
   figures hold the column. */
#marketing-view .rv-count{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* ── Reduced motion ──────────────────────────────────────────────────────
   Reduce, not remove. The rise and the scale are the parts that move, so
   they go; a plain opacity fade carries no movement and stays. The script
   skips the counting entirely and writes the final figure. Nothing here
   may leave content invisible under any circumstances. */
@media (prefers-reduced-motion: reduce){
  #marketing-view .rv-armed > .rv-item,
  #marketing-view .rv-armed .rv-item{
    transform:none;
    transition:opacity .4s ease;
    transition-delay:0s;
  }
  #marketing-view .rv-armed.rv-in > .rv-item,
  #marketing-view .rv-armed.rv-in .rv-item{ opacity:1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE LENDER RAIL — 18 lenders that nobody could read
   ═══════════════════════════════════════════════════════════════════════════

   This started as a motion note and turned out to be a content bug.

   .lstrip__wrap is 439px wide with overflow:hidden. .lstrip__track inside
   it is 4,872px. So about three names were visible and the rest were
   clipped off the right edge with no way to reach them — no scrollbar, no
   drag, nothing. State Bank, HDFC and ICICI were the whole roster as far
   as any reader could tell.

   And the track holds 36 items which are 18 lenders listed TWICE, in the
   same order. Content is only ever doubled like that for one reason: a
   seamless marquee, where the animation runs to exactly -50% and the
   second copy is already sitting where the first one started, so the loop
   has no seam. The markup was built for this and the animation was never
   written. So this is finishing the thing, not decorating it.

   Speed is set from the real measured width by reveal.js, so the names
   travel at the same pace whatever the screen — a duration hardcoded in
   seconds would crawl on a phone and race on a desktop.
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes moneyed-rail{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }   /* exactly one copy of the list */
}

#marketing-view .lender-strip .lstrip__track.rail-on{
  animation:moneyed-rail var(--rail-dur, 55s) linear infinite;
  will-change:transform;
}

/* Off screen it stops. A marquee animating in a section nobody is looking
   at is pure battery, and on a phone that matters more than it does here. */
#marketing-view .lender-strip .lstrip__track.rail-on:not(.rail-live){
  animation-play-state:paused;
}

/* Hovering is the reader saying "wait, what was that one" — so it waits. */
@media (hover:hover) and (pointer:fine){
  #marketing-view .lender-strip .lstrip__wrap:hover .lstrip__track.rail-on{
    animation-play-state:paused;
  }
}

/* The generic section-arrival rule animates the first six children of a
   grid, and the track is one of them. One element cannot run two
   animations from one property, so that rule has to let go here. */
#marketing-view .lender-strip.motion-section.motion-arrived > * > .lstrip__track,
#marketing-view .lender-strip .lstrip__track{
  animation-name:moneyed-rail;
}
#marketing-view .lender-strip .lstrip__track:not(.rail-on){
  animation:none;
}

/* ── Reduced motion ──────────────────────────────────────────────────────
   No marquee. But switching it off would put us straight back to three
   visible lenders out of eighteen, so the track wraps onto several lines
   instead and the duplicate half is hidden. Every lender is readable, and
   nothing moves. */
@media (prefers-reduced-motion: reduce){
  #marketing-view .lender-strip .lstrip__track,
  #marketing-view .lender-strip .lstrip__track.rail-on{
    animation:none !important;
    flex-wrap:wrap;
    justify-content:center;
    width:auto;
  }
  #marketing-view .lender-strip .lstrip__wrap{ overflow:visible; }
  #marketing-view .lender-strip .lstrip__item.rail-dupe{ display:none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ZOOM — the panels that are the point of the page
   ═══════════════════════════════════════════════════════════════════════════

   The stagger above is for LISTS. This is for the one big object a page is
   built around: the booking card, a founder card, a value card. Those don't
   want a sequence, they want to come forward.

   Scale alone looks like a bounce. Scale plus a small rise plus the opacity
   settling slightly ahead of the movement reads as something arriving at
   its place, which is the difference between motion and a jolt.

   The CSS `scale` property is used rather than `transform: scale()`
   deliberately — .lf-card, .founder-card and several others already own
   their `transform` on hover, and writing to it here would cancel theirs
   the moment the pointer arrives.
   ═══════════════════════════════════════════════════════════════════════════ */

#marketing-view .rv-zoom,
.rv-zoom{
  opacity:0;
  scale:.955;
  translate:0 18px;
  transform-origin:center 60%;
  transition:
    opacity   .45s ease,
    scale     .80s cubic-bezier(.16,.84,.28,1),
    translate .80s cubic-bezier(.16,.84,.28,1);
  will-change:scale, translate;
}
#marketing-view .rv-zoom.rv-zoomed,
.rv-zoom.rv-zoomed{ opacity:1; scale:1; translate:0 0; will-change:auto; }

/* A card that is itself a staggered item must not fight its own group. */
.rv-item.rv-zoom{ transition-delay:calc(var(--rv-i, 0) * .062s); }

@media (prefers-reduced-motion: reduce){
  .rv-zoom, .rv-zoom.rv-zoomed{
    scale:1; translate:none;
    transition:opacity .4s ease;
  }
  .rv-zoom{ opacity:.001; }
  .rv-zoom.rv-zoomed{ opacity:1; }
}