/* ============================================================================
   WELL RUN · SIGNAL SYSTEM — SIGNAL TYPE · EXTRAS (PROPOSAL)
   The other roles a type system needs to animate: eyebrow / kicker labels and
   staggered lists. Same engine, same tokens.
   Contract: class="wr-type" data-type-fx="eyebrow-…" | "list-…".
   list-* uses the engine's 'items' split (each child gets --st-i). PROPOSAL.
   Built on Signal Core tokens.  SPEED · timing × var(--st-speed,1).
   ============================================================================ */

/* ════════════════════════════════════════════════════════════════════════════
   EYEBROW / KICKER — the small mono uppercase labels above a title.
   ════════════════════════════════════════════════════════════════════════════ */

/* E1 · Track In — letter-spacing expands from tight to wide as it fades up.
   The signature kicker arrival. */
.wr-type.is-split[data-type-fx="eyebrow-track"] {
  opacity:0; letter-spacing:0.02em; transform:translateY(6px);
  transition:opacity calc(.6s * var(--st-speed,1)) var(--wr-ease-out),
             letter-spacing calc(.8s * var(--st-speed,1)) var(--wr-ease-out),
             transform calc(.7s * var(--st-speed,1)) var(--wr-ease-out);
}
.wr-type.is-in[data-type-fx="eyebrow-track"] { opacity:1; letter-spacing:0.18em; transform:none; }

/* E2 · Rule Grow — a leading brand tick grows out while the label fades. */
[data-type-fx="eyebrow-rule"] { display:inline-flex; align-items:center; gap:11px; }
[data-type-fx="eyebrow-rule"]::before {
  content:''; width:26px; height:3px; border-radius:9999px; background:var(--wr-grad);
  transform:scaleX(0); transform-origin:left;
  transition:transform calc(.65s * var(--st-speed,1)) var(--wr-ease-out);
}
.wr-type.is-arming[data-type-fx="eyebrow-rule"]::before { transition:none !important; }
.wr-type.is-split[data-type-fx="eyebrow-rule"] {
  opacity:0; transition:opacity calc(.6s * var(--st-speed,1)) var(--wr-ease-out) calc(.12s * var(--st-speed,1));
}
.wr-type.is-in[data-type-fx="eyebrow-rule"] { opacity:1; }
.wr-type.is-in[data-type-fx="eyebrow-rule"]::before { transform:scaleX(1); }

/* E3 · Label Lift — removed (2026-06-16, per review). */

/* ════════════════════════════════════════════════════════════════════════════
   LISTS — staggered item reveals. Engine 'items' split tags each child
   .wr-type__item and sets its --st-i.
   ════════════════════════════════════════════════════════════════════════════ */

[data-type-fx^="list-"] { list-style:none; padding:0; margin:0; }
[data-type-fx^="list-"] .wr-type__item {
  position:relative; padding-left:24px; margin:0 0 12px;
}
[data-type-fx^="list-"] .wr-type__item:last-child { margin-bottom:0; }
[data-type-fx^="list-"] .wr-type__item::before {
  content:''; position:absolute; left:0; top:0.62em; width:12px; height:2px;
  border-radius:2px; background:var(--wr-grad);
}
.wr-type.is-arming[data-type-fx^="list-"] .wr-type__item,
.wr-type.is-arming[data-type-fx^="list-"] .wr-type__item::before { transition:none !important; }

/* L1 · Item Cascade — items fade up one after another. */
[data-type-fx="list-cascade"] { --st-stagger:85ms; }
.is-split[data-type-fx="list-cascade"] .wr-type__item {
  opacity:0; transform:translateY(0.6em);
  transition:opacity calc(.55s * var(--st-speed,1)) var(--wr-ease-out) calc(var(--st-i) * var(--st-stagger) * var(--st-speed,1)),
             transform calc(.65s * var(--st-speed,1)) var(--wr-ease-out) calc(var(--st-i) * var(--st-stagger) * var(--st-speed,1));
}
.is-in[data-type-fx="list-cascade"] .wr-type__item { opacity:1; transform:none; }

/* L2 · Item Slide — items slide in from the left, staggered. */
[data-type-fx="list-slide"] { --st-stagger:80ms; }
.is-split[data-type-fx="list-slide"] .wr-type__item {
  opacity:0; transform:translateX(-16px);
  transition:opacity calc(.5s * var(--st-speed,1)) var(--wr-ease-out) calc(var(--st-i) * var(--st-stagger) * var(--st-speed,1)),
             transform calc(.6s * var(--st-speed,1)) var(--wr-ease-out) calc(var(--st-i) * var(--st-stagger) * var(--st-speed,1));
}
.is-in[data-type-fx="list-slide"] .wr-type__item { opacity:1; transform:none; }

/* L3 · Marker Pop — each item's brand marker grows from the left, then the text
   fades in just behind it. */
[data-type-fx="list-pop"] { --st-stagger:90ms; }
.is-split[data-type-fx="list-pop"] .wr-type__item {
  opacity:0; transform:translateX(4px);
  transition:opacity calc(.45s * var(--st-speed,1)) var(--wr-ease-out) calc((var(--st-i) * var(--st-stagger) + 90ms) * var(--st-speed,1)),
             transform calc(.5s * var(--st-speed,1)) var(--wr-ease-out) calc((var(--st-i) * var(--st-stagger) + 90ms) * var(--st-speed,1));
}
.is-split[data-type-fx="list-pop"] .wr-type__item::before {
  transform:scaleX(0); transform-origin:left;
  transition:transform calc(.5s * var(--st-speed,1)) var(--wr-ease-spring) calc(var(--st-i) * var(--st-stagger) * var(--st-speed,1));
}
.is-in[data-type-fx="list-pop"] .wr-type__item { opacity:1; transform:none; }
.is-in[data-type-fx="list-pop"] .wr-type__item::before { transform:scaleX(1); }

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .wr-type.is-split[data-type-fx^="eyebrow-"],
  [data-type-fx^="list-"] .wr-type__item {
    opacity:1 !important; transform:none !important; letter-spacing:0.18em;
  }
  [data-type-fx="eyebrow-rule"]::before,
  [data-type-fx^="list-"] .wr-type__item::before { transform:none !important; }
}