/* ==========================================================================
   USAIndiaCFO — v27 team.html: the roll call, reworked.
   Overrides for the .seq section, layered on clay.css (which is not edited).
   The section is ONE composition at every size (the old .seq-m mobile
   timeline is gone; roll() in js/people.js re-lays the same line as two rows
   of three on narrow stages). The reduced-motion fallback (.seq--static) is
   untouched: clay.css's .seq--static rules out-rank these.

   What changed and why:
     · portraits stand STRAIGHT (no --r tilt) and smaller (--w .76 in the
       markup), on a two-tier stagger — four along a low band, two crests
       flanking the title — so every frame is >= 120 canvas px from its
       neighbours and the title sits in the hollow between the crests;
     · the line's motion is the event: a bronze spark rides the path ahead
       of the portraits with a short fading tail (three dashes of the same
       path, shorter and brighter towards the spark), and each portrait
       lifts off the line and settles as the spark reaches it — translateY
       + scale with a small overshoot, no rotation;
     · captions get a little more room and may wrap, instead of running past
       their box; nothing hangs into a neighbouring frame (measured).
   ========================================================================== */

/* straight, no tilt — the hand-laid rotation was the clutter */
.seq__item { transform: translate(-50%, -50%); }

/* lift and settle: rise off the line, scale from .92, a slight overshoot
   on the transform only (opacity eases plainly, so nothing flashes) */
.seq__item figure {
  opacity: 0;
  transform: translate3d(0, 34px, 0) scale(.92);
  transition: opacity .5s var(--ease), transform .95s cubic-bezier(.3, 1.4, .5, 1);
}
.seq__item[data-on="true"] figure { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }

/* captions: a touch wider than the frame, and the role line may wrap
   (clay.css ellipsises it, but with the caption's centred flex items the
   long titles overflowed the box instead — visible in the old layout) */
.seq__item .figure__cap { left: -24px; right: -24px; margin-top: 12px; }
.seq__item .figure__cap span { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.5; }
/* reduced-motion grid: with the caption pulled out of flow (clay.css, for
   the canvas) a wrapped sixth frame sat on top of the row above's captions.
   In the static grid the caption can simply take its own height. */
.seq--static .seq__item .figure__cap { position: static; margin-top: 12px; }
/* the static grid opens the page, so it starts below the fixed header (the
   pinned stage places its head by --seqHeadTop instead) */
.seq.seq--static .seq__stage { padding-top: calc(var(--head-h) + clamp(24px, 4vw, 48px)); }

/* the spark's tail: clones of the drawn path (made by roll() in js/people.js),
   each a short dash ending at the spark — longer and fainter further back */
.seq__line .seq__trail { stroke: var(--bronze-bright); stroke-width: 2.2; stroke-linecap: round; }
.seq__line .seq__trail--1 { opacity: .14; }
.seq__line .seq__trail--2 { opacity: .32; }
.seq__line .seq__trail--3 { opacity: .72; }

/* the spark itself: a solid bronze point and one thin ring — matte, not a
   blurred glow (the system has no glows) */
.seq__spark { fill: var(--bronze-bright); }
.seq__spark-ring { fill: none; stroke: var(--bronze-bright); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .32; }

/* ── head + captions (were inline styles; tokens so the blue theme reaches them) */
.seq__title { margin-top: 16px; font: 250 clamp(2.25rem, 4.6vw, 3.875rem)/1.04 Newsreader, Georgia, serif;
  letter-spacing: -.024em; color: var(--cream); }
/* a long page title (the leadership H1) — smaller, narrower, so it sits in
   the hollow between the two crests at every stage size */
.seq__title--long { max-width: 21ch; margin-inline: auto;
  font-size: clamp(1.875rem, min(3.2vw, 5.4vh), 3rem); line-height: 1.08; }
.seq__sub { margin: 16px auto 0; max-width: 46ch; color: rgba(var(--cream-rgb), .58); }
.seq__cap b { color: rgba(var(--cream-rgb), .85); }
.seq__cap span { color: var(--bronze-bright); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }

/* ── one composition at every size (roll() in js/people.js) ──────────────
   The head, the canvas and the counter are placed by three variables the
   script measures: on wide stages the head is centred on the two crests
   (the hollow of the wave); on stages <= 940px wide the head sits under the
   fixed header, the two rows of three are centred in the band between the
   head and the counter, and the counter clears the mobile bar. The fallbacks
   are clay.css's own values, so nothing moves before the script runs. */
.seq__head { top: var(--seqHeadTop, clamp(48px, 12vh, 132px)); }
.seq__canvas { top: var(--seqCanvasTop, 50%); }
.seq__count { bottom: var(--seqFoot, 22px); }
/* wide: the short head sits in the hollow between the two crests — its box
   stays narrower than the gap, so it never reaches a crest frame's caption */
.seq[data-layout="wide"] .seq__head { width: min(92vw, 560px); }
/* two rows of three: the names may wrap (the frames are narrower than a
   long name at phone scale); nothing else about the captions changes */
.seq[data-layout="narrow"] .seq__item .figure__cap b { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
.seq[data-layout="narrow"] .seq__item .figure__cap { left: -20px; right: -20px; margin-top: 10px; }
.seq[data-layout="narrow"] .seq__item .figure__cap span { font-size: 10px; letter-spacing: .12em; }
/* the head + wave wait, hidden, until people.js has placed them for the loaded fonts (no visible jump) */
.seq--wait .seq__head, .seq--wait .seq__line { visibility: hidden; }