/* ============================================================
   AMP STACKFLOW — co-invest -> capital-stack flow (hero data-viz)
   Hand-authored SVG. Built TO ~/WEB-DESIGN-RULESET.md (§2/§3/§4/§5/§7).
   Palette: navy #06101F field, gold #C9A84C / hot-gold #FFD56B accent,
   cream #F3EFE6 text. Type: IBM Plex (Serif head / Sans label / Mono fig).
   Self-hosted. No CDN. Structure-only — no yield/return/$ performance.
   ============================================================ */

.amp-sf{
  position:relative;
  padding:88px 32px 96px;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(201,168,76,0.06) 0%, transparent 60%),
    linear-gradient(180deg, #06101F 0%, #050D1A 100%);
  border-top:1px solid rgba(201,168,76,0.10);
  border-bottom:1px solid rgba(201,168,76,0.10);
  overflow:hidden;
}
.amp-sf__inner{ max-width:1160px; margin:0 auto; }

.amp-sf__head{ text-align:center; max-width:760px; margin:0 auto 52px; }
.amp-sf__eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px; letter-spacing:0.24em; text-transform:uppercase;
  color:#C9A84C; margin-bottom:20px;
}
.amp-sf__title{
  font-family:'IBM Plex Serif',serif; font-weight:300;
  font-size:clamp(30px,4.4vw,52px); line-height:1.07;
  color:#F3EFE6; letter-spacing:-0.018em; margin:0 0 18px;
}
.amp-sf__title em{ font-style:italic; color:#C9A84C; font-weight:400; }
.amp-sf__caption{
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  font-size:clamp(15px,1.5vw,18px); line-height:1.55;
  color:rgba(243,239,230,0.78); margin:0;
}

/* ---- figure / svg shell ---- */
.amp-sf__fig{
  position:relative; margin:0 auto; max-width:1080px;
}
.amp-sf__svg{
  display:block; width:100%; height:auto;
  font-family:'IBM Plex Sans',system-ui,sans-serif;
}

/* svg text roles */
.amp-sf__svg .sf-node-name{
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  font-weight:500; fill:#F3EFE6;
}
.amp-sf__svg .sf-node-sub{
  font-family:'IBM Plex Mono',monospace;
  fill:rgba(243,239,230,0.62); letter-spacing:0.04em;
}
.amp-sf__svg .sf-fig{
  font-family:'IBM Plex Mono',monospace;
  fill:#C9A84C; letter-spacing:0.02em;
}
.amp-sf__svg .sf-tranche-name{
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  font-weight:500; fill:#06101F;
}
.amp-sf__svg .sf-tranche-role{
  font-family:'IBM Plex Mono',monospace;
  fill:rgba(6,16,31,0.72); letter-spacing:0.04em;
}
.amp-sf__svg .sf-callout{
  font-family:'IBM Plex Mono',monospace;
  fill:rgba(243,239,230,0.66); letter-spacing:0.05em;
}

/* ---- streams (the inbound flows) ----
   Crisp Sankey-style ribbons: butt caps for clean edges (no organic blob),
   constant stroke width, smooth bezier curve. Institutional wider than retail. */
.amp-sf__svg .sf-stream{
  fill:none;
  stroke-linecap:butt;
  stroke-linejoin:round;
}
.amp-sf__svg .sf-stream--lp{   stroke:rgba(243,239,230,0.26); }
.amp-sf__svg .sf-stream--retail{ stroke:#C9A84C; }

/* draw-in animation: streams + merge */
.amp-sf__svg .sf-stream{
  stroke-dasharray: var(--len, 1400);
  stroke-dashoffset: var(--len, 1400);
}
.amp-sf__svg .sf-merge,
.amp-sf__svg .sf-tranche-rect,
.amp-sf__svg .sf-resolve{
  opacity:0;
}
.amp-sf__svg .sf-tranche-rect{
  transform: translateX(-14px);
  transform-box: fill-box;
}
.amp-sf__svg .sf-label-grp{ opacity:0; }

/* PLAY state (added by JS on intersect) */
.amp-sf.is-drawn .sf-stream{
  stroke-dashoffset:0;
  transition: stroke-dashoffset 1500ms cubic-bezier(.45,.05,.2,1);
}
.amp-sf.is-drawn .sf-merge{
  opacity:1;
  transition: opacity 700ms ease 900ms;
}
.amp-sf.is-drawn .sf-resolve{
  opacity:0.92;
  transition: opacity 700ms ease 1300ms;
}
.amp-sf.is-drawn .sf-tranche-rect{
  opacity:1; transform: translateX(0);
  transition: opacity 640ms ease, transform 640ms cubic-bezier(.2,.7,.2,1);
}
.amp-sf.is-drawn .sf-tranche-rect--1{ transition-delay:1500ms; }
.amp-sf.is-drawn .sf-tranche-rect--2{ transition-delay:1720ms; }
.amp-sf.is-drawn .sf-tranche-rect--3{ transition-delay:1940ms; }
.amp-sf.is-drawn .sf-label-grp{
  opacity:1; transition: opacity 600ms ease 2100ms;
}

/* hover affordance on interactive groups */
.amp-sf__svg .sf-hit{ cursor:pointer; fill:transparent; }
.amp-sf__svg .sf-stream,
.amp-sf__svg .sf-tranche-rect{ transition:filter 200ms ease; }
.amp-sf__svg .sf-grp.is-hover .sf-stream,
.amp-sf__svg .sf-grp.is-hover .sf-tranche-rect{
  filter:drop-shadow(0 0 10px rgba(255,213,107,0.55));
}

/* tooltip */
.amp-sf__tip{
  position:absolute; z-index:4; pointer-events:none;
  max-width:240px;
  padding:11px 14px;
  background:rgba(6,16,31,0.96);
  border:1px solid rgba(201,168,76,0.42);
  border-radius:6px;
  box-shadow:0 8px 28px rgba(0,0,0,0.5);
  opacity:0; transform:translateY(4px);
  transition:opacity 160ms ease, transform 160ms ease;
}
.amp-sf__tip.is-on{ opacity:1; transform:translateY(0); }
.amp-sf__tip-name{
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  font-weight:600; font-size:13px; color:#F3EFE6; margin-bottom:3px;
}
.amp-sf__tip-role{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px; letter-spacing:0.04em; color:#C9A84C;
}

/* legend */
.amp-sf__legend{
  display:flex; justify-content:center; gap:30px; flex-wrap:wrap;
  margin:38px auto 0; max-width:760px;
}
.amp-sf__legend-item{
  display:flex; align-items:center; gap:9px;
  font-family:'IBM Plex Mono',monospace;
  font-size:12px; letter-spacing:0.04em; color:rgba(243,239,230,0.74);
}
.amp-sf__swatch{ width:22px; height:4px; border-radius:2px; }
.amp-sf__swatch--lp{ background:rgba(243,239,230,0.45); }
.amp-sf__swatch--retail{ background:#C9A84C; }

.amp-sf__disclaimer{
  max-width:760px; margin:40px auto 0; text-align:center;
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  font-size:12.5px; line-height:1.55; color:rgba(243,239,230,0.52);
}
.amp-sf__disclaimer strong{ color:rgba(243,239,230,0.74); font-weight:600; }

/* ============================================================
   REDUCED MOTION — render fully composed static, no draw
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .amp-sf__svg .sf-stream{ stroke-dashoffset:0 !important; transition:none !important; }
  .amp-sf__svg .sf-merge{ opacity:1 !important; transition:none !important; }
  .amp-sf__svg .sf-resolve{ opacity:0.92 !important; transition:none !important; }
  .amp-sf__svg .sf-tranche-rect{ opacity:1 !important; transform:none !important; transition:none !important; }
  .amp-sf__svg .sf-label-grp{ opacity:1 !important; transition:none !important; }
}

/* ============================================================
   MOBILE — <=640px: SVG swaps to the vertical viewBox/layout via JS;
   tighten head + padding so the stacked diagram reads cleanly at 360px.
   ============================================================ */
@media (max-width:640px){
  .amp-sf{ padding:64px 18px 72px; }
  .amp-sf__head{ margin-bottom:38px; }
  .amp-sf__legend{ gap:18px; margin-top:30px; }
  .amp-sf__tip{ max-width:200px; }
}