/* ═══════════════════════════════════════════════════════════════════════════
   STORY TYPE — the three chapter headings arrive line by line
   ═══════════════════════════════════════════════════════════════════════════

   What this replaces, and why

   "Lower EMI. / Better deal?" was running the site-wide type-motion
   treatment: the whole block fades in while its weight and tracking settle.
   That is the right default for a section title, and it is wrong for these
   three, because it treats a two-line statement as one object. The whole
   point of the writing is the TURN — a flat claim on the first line, and the
   question or the correction on the second. A single fade shows both halves
   at once and the turn lands on nothing.

   So each line is masked and rises into its own slot, the second a beat
   behind the first. The reader meets "Lower EMI." and then, a moment later,
   "Better deal?" arrives underneath it. The animation is now saying the
   same thing the sentence is.

   ── Why a mask and not a fade ───────────────────────────────────────────

   The line is wrapped in a block with overflow:hidden and slides up from
   below its own edge, so it looks printed into place rather than dissolved
   onto the page. A fade says "appearing". A mask-rise says "arriving". For
   editorial type at 39px the second is the one that reads as composed.

   overflow:hidden on a line of type clips descenders — the y in "only", the
   tail of the ? in "deal?" — so each line carries padding-bottom and pulls
   it back with an equal negative margin. The mask gets the room; the layout
   does not move.

   ── The safety rule ─────────────────────────────────────────────────────

   The hidden state is scoped to .lr-armed, which only story-type.js ever
   adds. No script, no observer, an old browser: the class is absent and all
   three headings render exactly as they always did. And once a heading has
   arrived it is latched — it can never be un-arrived by a later frame.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The heading has to establish its own formatting context, or the LAST
   line's negative margin collapses straight through it and is lost — the
   heading then measures 6px taller than it used to and every chapter
   nudges down the page. Measured: 90.47px against the 84.23px it should
   be, which is exactly one line's worth of descender padding. flow-root
   confines the collapse to the heading; its own 24px bottom margin is
   untouched. */
#marketing-view .lr-block h3:has(.lr-line),
#marketing-view .lr-block.lr-armed h3{ display:flow-root; }

/* The mask. One per visual line, created by the script from the <br>. */
#marketing-view .lr-block .lr-line{
  display:block;
  overflow:hidden;
  /* Room for descenders inside the mask, taken straight back out of the
     layout so the heading occupies exactly the height it always did. */
  padding-bottom:.16em;
  margin-bottom:-.16em;
}

/* The line itself. Only the START is described here; the finished state is
   whatever the heading was already styled as, so nothing about colour,
   weight or tracking is touched. */
#marketing-view .lr-block.lr-armed .lr-in{
  display:block;
  transform:translateY(108%) scale(.975);
  transform-origin:left bottom;
  opacity:0;
  will-change:transform;
  transition:
    transform .74s cubic-bezier(.16,.84,.3,1),
    opacity   .42s ease;
  /* --lr-i is the line's index, written by the script. 95ms is the gap
     that reads as "and then" rather than as two separate events. */
  transition-delay:calc(var(--lr-i, 0) * .095s);
}
#marketing-view .lr-block.lr-armed.lr-in-view .lr-in{
  transform:none;
  opacity:1;
}
/* Done moving — stop holding a compositor layer for the rest of the page. */
#marketing-view .lr-block.lr-in-view .lr-in{ will-change:auto; }

/* ── The rest of the block follows the heading in ────────────────────────
   The chapter number leads, the heading turns, then the one-line summary
   and the links settle under it. Everything after the heading only fades
   and lifts a little: moving body copy and links around is harder to read
   and adds nothing once the heading has done the work. */
#marketing-view .lr-block.lr-armed > .lr-follow{
  opacity:0;
  transform:translateY(13px);
  transition:opacity .5s ease, transform .62s cubic-bezier(.16,.84,.3,1);
  /* --lr-f is the child's order below the heading, written by the script.
     The eyebrow sits ABOVE the heading and is given index 0, so it leads;
     everything under the heading follows it in turn. */
  transition-delay:calc(var(--lr-f, 0) * .08s);
}
#marketing-view .lr-block.lr-armed.lr-in-view > .lr-follow{
  opacity:1;
  transform:none;
}

/* The eyebrow opens its tracking as it lands — a small thing, but it is
   what makes "01 / LOAN COST" read as a chapter marker being set rather
   than a label that was already there.

   BOTH ends are variables that story-type.js measures off the element
   itself. The first version of this ended on `letter-spacing: inherit`,
   which outranked the eyebrow's own rule and silently threw away its
   authored 2px tracking — the label arrived and then collapsed to normal
   spacing. An animation layer must never decide what the finished state
   is; it only decides where the journey starts. */
#marketing-view .lr-block.lr-armed > .mn-refresh-eyebrow{
  letter-spacing:var(--lr-ls0, .3em);
  transition:opacity .5s ease,
             transform .62s cubic-bezier(.16,.84,.3,1),
             letter-spacing .62s cubic-bezier(.16,.84,.3,1);
}
#marketing-view .lr-block.lr-armed.lr-in-view > .mn-refresh-eyebrow{
  letter-spacing:var(--lr-ls1, 2px);
}

/* ── Reduced motion ──────────────────────────────────────────────────────
   Reduce, not remove. No rise, no scale, no tracking shift — those are the
   parts that move. A plain fade stays, because it does not. Nothing here
   may leave a heading invisible under any circumstances. */
@media (prefers-reduced-motion: reduce){
  #marketing-view .lr-block.lr-armed .lr-in,
  #marketing-view .lr-block.lr-armed.lr-in-view .lr-in{
    transform:none;
    transition:opacity .4s ease;
  }
  #marketing-view .lr-block.lr-armed .lr-in{ opacity:.001; }
  #marketing-view .lr-block.lr-armed.lr-in-view .lr-in{ opacity:1; }

  #marketing-view .lr-block.lr-armed > .lr-follow,
  #marketing-view .lr-block.lr-armed.lr-in-view > .lr-follow{
    transform:none;
    transition:opacity .4s ease;
    transition-delay:0s;
  }
  #marketing-view .lr-block.lr-armed > .mn-refresh-eyebrow,
  #marketing-view .lr-block.lr-armed.lr-in-view > .mn-refresh-eyebrow{
    letter-spacing:var(--lr-ls1, 2px);
  }
}