/* ============================================================================
   Section 04 — "live fragments": coded croppings of the banker platform's
   client-story output. NO images ship (see design handoff). Fragments are
   aria-hidden, inert; the caption rail carries the meaning.

   Two modes:
   • Static (default / mobile / prefers-reduced-motion / no-JS): fanned stack,
     everything visible, no pinning, no micro-animations.
   • Live (JS adds `.story--live` only on desktop ≥840px + motion allowed):
     sticky-pinned stage, scroll-driven fan, per-fragment micro-animations.
   All "start-hidden" states are scoped under `.story--live` so the fallback
   always renders the finished state.

   Scoped tokens — sampled from the product, deliberately isolated from the
   site theme so nothing leaks in or out.
   ========================================================================== */
.story {
  --sf-surface: #FAF8F1;                 /* warm ivory canvas */
  --sf-card: #FFFFFF;
  --sf-panel: #FBF6EB;                   /* cream insight panel */
  --sf-border: rgba(26, 36, 64, 0.10);
  --sf-border-2: rgba(26, 36, 64, 0.16);
  --sf-navy: #212C46;                    /* serif headlines */
  --sf-ink: #39435A;                     /* body copy */
  --sf-muted: #8A93A6;                   /* captions / labels */
  --sf-gold: #B98F2C;                    /* category labels + accents */
  --sf-green: #4E8A6B;                   /* positive / returned */
  --sf-red: #BB4A3C;                     /* restrained negative */
  --sf-serif: Garamond, "EB Garamond", "Hoefler Text", Georgia, "Times New Roman", serif;
  --sf-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Arial, sans-serif;
  --sf-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sf-card-w: 424px;
  --sf-topbar: 108px;                    /* fixed topbar height (20 + 68 logo + 20) */

  position: relative;
  /* same breathing room between the §04 paragraph and this band as other
     sections leave between their sub-title and the next block */
  margin-top: clamp(44px, 7vh, 84px);
  background: var(--sf-surface);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

/* wrapper is a plain block until JS opts into the pinned mode */
.story-wrap { position: relative; }
.story-stage { position: relative; }
.sf-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(48px, 8vh, 96px) clamp(22px, 5vw, 72px);
}

/* ---------- caption rail (real, readable text — carries the meaning) ------- */
.sf-rail-head {
  font-family: var(--sf-serif);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.1;
  color: var(--sf-navy);
  margin: 0 0 clamp(20px, 3vh, 30px);
}
.sf-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.sf-step { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: baseline; }
.sf-step-idx {
  font-family: var(--sf-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em;
  color: var(--sf-gold); align-self: start; padding-top: 3px;
}
.sf-step-title { font-family: var(--sf-serif); font-size: 1.2rem; line-height: 1.15; color: var(--sf-navy); }
.sf-step-sub { grid-column: 2; font-family: var(--sf-sans); font-size: 0.85rem; line-height: 1.45; color: var(--sf-muted); margin-top: 3px; }

.sf-chips { margin-top: clamp(24px, 3.4vh, 34px); display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.sf-chips-cap {
  width: 100%; font-family: var(--sf-sans); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--sf-muted); margin-bottom: 4px;
}
.sf-chip {
  font-family: var(--sf-sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--sf-ink); background: var(--sf-card); border: 1px solid var(--sf-border-2);
  border-radius: 999px; padding: 7px 14px;
}
.sf-chip::before { content: ""; }

/* ---------- the stack of fragments (inert — never invites a click) -------- */
.sf-stack { position: relative; margin-top: clamp(30px, 5vh, 44px); pointer-events: none; }

/* faint numbered chapter rail behind the cards — whispers "there are chapters" */
.sf-chapters {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  padding-left: 4px; opacity: 0.07; overflow: hidden;
}
.sf-chapters span {
  font-family: var(--sf-sans); font-size: 0.95rem; letter-spacing: 0.02em; color: var(--sf-navy);
  white-space: nowrap;
}

/* ---------- a fragment (coded cropping of the product) -------------------- */
.sf-frag {
  position: relative; z-index: 1; width: min(90%, var(--sf-card-w)); margin: 0 auto;
  background: var(--sf-card); border: 1px solid var(--sf-border); border-radius: 12px;
  padding: clamp(20px, 2.4vw, 26px); box-shadow: 0 18px 44px -30px rgba(26, 36, 64, 0.4);
  /* every fragment ends unfinished: content fades out before the card does */
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 99%);
          mask-image: linear-gradient(180deg, #000 70%, transparent 99%);
}
.sf-frag + .sf-frag { margin-top: -34px; }
.sf-f1 { transform: rotate(-2deg); }
.sf-f2 { transform: rotate(1deg); z-index: 2; }
.sf-f3 { transform: rotate(2.4deg); z-index: 3; }

/* category label — small-caps gold with a leading dot */
.sf-cat {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sf-sans); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--sf-gold);
}
.sf-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sf-gold); flex: none; }

.sf-head { font-family: var(--sf-serif); font-size: 1.32rem; line-height: 1.18; color: var(--sf-navy); margin: 13px 0 0; }
.sf-head-sans { font-family: var(--sf-sans); font-size: 1.12rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }

/* stat row */
.sf-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; }
.sf-stat { padding: 0 14px; border-left: 1px solid var(--sf-border); }
.sf-stat:first-child { padding-left: 0; border-left: 0; }
.sf-val { display: block; font-family: var(--sf-serif); font-size: 1.24rem; color: var(--sf-navy); font-variant-numeric: tabular-nums; }
.sf-val.sf-pos { color: var(--sf-green); }
.sf-val.sf-neg { color: var(--sf-red); }
.sf-cap { display: block; margin-top: 4px; font-family: var(--sf-sans); font-size: 0.68rem; color: var(--sf-muted); }

/* numbered facts */
.sf-facts { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: sf; }
.sf-facts li {
  counter-increment: sf; position: relative; padding-left: 30px; margin-top: 11px;
  font-family: var(--sf-sans); font-size: 0.86rem; line-height: 1.5; color: var(--sf-ink);
}
.sf-facts li::before {
  content: counter(sf, decimal-leading-zero); position: absolute; left: 0; top: 1px;
  font-size: 0.72rem; font-weight: 700; color: var(--sf-gold); font-variant-numeric: tabular-nums;
}

/* insight card (fragment 2) */
.sf-insight { margin-top: 18px; background: var(--sf-panel); border: 1px solid var(--sf-border); border-radius: 9px; padding: 15px 16px; }
.sf-insight-title { font-family: var(--sf-sans); font-size: 0.92rem; font-weight: 600; color: var(--sf-navy); }
.sf-insight-body {
  margin: 7px 0 0; font-family: var(--sf-sans); font-size: 0.84rem; line-height: 1.55;
  /* the sentence fades to transparent as it runs on — intentionally unfinished */
  background: linear-gradient(180deg, var(--sf-ink) 42%, rgba(57, 67, 90, 0) 96%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* action cards (fragment 3) */
.sf-action { display: grid; grid-template-columns: auto 1fr; column-gap: 13px; margin-top: 16px; }
.sf-badge {
  align-self: start; font-family: var(--sf-sans); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em;
  border-radius: 999px; padding: 4px 11px; border: 1px solid; line-height: 1;
}
.sf-badge-buy { color: #2C5FA6; border-color: rgba(44, 95, 166, 0.5); }
.sf-badge-trim { color: var(--sf-gold); border-color: rgba(185, 143, 44, 0.5); }
.sf-action-title { display: block; font-family: var(--sf-sans); font-size: 0.94rem; font-weight: 600; color: var(--sf-navy); line-height: 1.3; }
.sf-action-body { margin: 5px 0 0; font-family: var(--sf-sans); font-size: 0.84rem; line-height: 1.5; color: var(--sf-ink); }
.sf-link { display: inline-block; margin-top: 8px; font-family: var(--sf-sans); font-size: 0.82rem; color: var(--sf-gold); cursor: default; }

/* ghosted placeholder card — no legible text, top edge visible, rest to the mask */
.sf-ghost { display: block; margin-top: 16px; padding-top: 4px; }
.sf-bar { display: block; height: 9px; border-radius: 5px; background: var(--sf-border-2); margin-top: 10px; }
.sf-bar-title { height: 11px; width: 62%; background: rgba(26, 36, 64, 0.14); }
.sf-bar-badge { height: 16px; width: 44px; border-radius: 999px; }
.sf-bar:nth-child(2) { width: 100%; }
.sf-bar-short { width: 72%; }

/* narrow phones — let the total value keep its own row so it never breaks mid-number */
@media (max-width: 560px) {
  .sf-stats { grid-template-columns: 1fr 1fr; gap: 14px 12px; }
  .sf-stat { padding: 0 0 0 12px; }
  .sf-stat:first-child { grid-column: 1 / -1; border-left: 0; padding-left: 0; }
  .sf-stat:nth-child(2) { border-left: 0; padding-left: 0; }
}

/* ============================================================================
   DESKTOP (≥840px) — two-column layout; fragments fan out (this is also the
   static reduced-motion end state).
   ========================================================================== */
@media (min-width: 840px) {
  .sf-inner { display: grid; grid-template-columns: minmax(230px, 300px) 1fr; column-gap: clamp(32px, 4.5vw, 72px); align-items: center; }
  .sf-rail { position: relative; z-index: 3; }
  .sf-stack { margin-top: 0; height: 560px; }
  .sf-chapters { justify-content: center; align-items: flex-start; padding-left: 8%; }

  .sf-frag {
    position: absolute; top: 50%; left: 50%; width: var(--sf-card-w); margin: 0;
    transform-origin: 50% 50%;
  }
  .sf-frag + .sf-frag { margin-top: 0; }
  /* fanned end state */
  .sf-f1 { transform: translate(-50%, -50%) translate(-134px, -8px) rotate(-5deg); }
  .sf-f2 { transform: translate(-50%, -50%) translate(2px, 2px) rotate(1.5deg); }
  .sf-f3 { transform: translate(-50%, -50%) translate(138px, 12px) rotate(5deg); }
}

/* ============================================================================
   LIVE mode — JS adds `.story--live` only on desktop + motion. Enables the
   sticky pin and the scroll-driven fan; sets the start-hidden states.
   ========================================================================== */
.story--live .story-wrap { height: 300vh; }
/* Pin BELOW the fixed topbar so "Each client's wealth story" clears it and stays
   visible while pinned. The inner fills the stage; the rail heading tops out just
   under the topbar while the card stack centres vertically (no empty lower band). */
.story--live .story-stage { position: sticky; top: var(--sf-topbar); height: calc(100vh - var(--sf-topbar)); display: flex; align-items: stretch; overflow: hidden; }
.story--live .sf-inner { width: 100%; align-items: center; grid-template-rows: 1fr; padding-top: clamp(22px, 3vh, 38px); padding-bottom: clamp(22px, 3vh, 38px); }
/* drop the rail a touch and lift the card stack a touch so the two columns read
   as better vertically aligned (rail heading still clears the topbar) */
.story--live .sf-rail { align-self: start; margin-top: clamp(28px, 5vh, 60px); }
.story--live .sf-stack { transform: translateY(clamp(-60px, -5vh, -28px)); }
.story--live .sf-frag { opacity: 0; will-change: transform, opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

/* rail steps dim until their beat is active; wide gap so the live beat clearly pops */
.story--live .sf-step { opacity: 0.22; transition: opacity 0.4s var(--sf-ease); }
.story--live .sf-step.is-active { opacity: 1; }
.story--live .sf-chips { opacity: 0; transform: translateY(6px); transition: opacity 0.5s var(--sf-ease), transform 0.5s var(--sf-ease); }
.story--live .sf-chips.is-visible { opacity: 1; transform: none; }

/* scroll cue — a downward chevron centred at the bottom of the pinned stage. Only in live
   mode (so never on the static/mobile stack). JS toggles .cue-on (gentle pulse) then
   .cue-off (200ms fade) once the user passes ~85% or the stage unpins. */
.sf-cue { display: none; }
.story--live .sf-cue {
  display: block; position: absolute; left: 50%; bottom: clamp(20px, 3vh, 30px);
  transform: translateX(-50%); width: 32px; color: var(--sf-gold);
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.sf-cue svg { display: block; width: 100%; height: auto; }
.story--live.cue-on .sf-cue { opacity: 1; animation: sfCuePulse 1.2s ease-in-out infinite; }
.story--live.cue-off .sf-cue { opacity: 0; animation: none; }
@keyframes sfCuePulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .story--live.cue-on .sf-cue { animation: none; opacity: 1; } }

/* micro-animation start states (only when JS is driving) */
.story--live .sf-facts li { opacity: 0; transform: translateY(6px); }
.story--live .sf-facts li.is-in { opacity: 1; transform: none; transition: opacity 0.5s var(--sf-ease), transform 0.5s var(--sf-ease); }
.story--live .sf-insight-body { clip-path: inset(0 0 100% 0); }
.story--live .sf-insight-body.is-in { clip-path: inset(0 0 0 0); transition: clip-path 0.5s var(--sf-ease); }
.story--live .sf-badge { opacity: 0; transform: scale(1.06); }
.story--live .sf-badge.is-in { opacity: 1; transform: scale(1); transition: opacity 0.15s var(--sf-ease), transform 0.15s var(--sf-ease); }
.story--live .sf-action-title { opacity: 0; }
.story--live .sf-action-title.is-in { opacity: 1; transition: opacity 0.25s var(--sf-ease); }

@media (prefers-reduced-motion: reduce) {
  .story--live .story-wrap { height: auto; }
  .story--live .story-stage { position: relative; height: auto; display: block; overflow: visible; }
  .story--live .sf-frag,
  .story--live .sf-facts li,
  .story--live .sf-badge,
  .story--live .sf-action-title { opacity: 1; transform: none; }
  .story--live .sf-insight-body { clip-path: none; }
  .story--live .sf-step { opacity: 1; }
  .story--live .sf-chips { opacity: 1; transform: none; }
}