Motivation

I'm trying to draw a subway map: lines are getting together in bunches and branch off.
For example, here C-line (blue) and G-line (ligh-green) branch off:

While they are in bunch, I use line-pattern:

But then, I need to make a smooth transition from a pattern to 2 separate lines, which then would be centered normally.

More complicated example where one bunch branches of into 2 other bunches:

Design Alternatives

Split line into smaller chunks, assign an offset property to each segment separately.

"line-offset": [
  "case",
  ["has", "offset"],
  ["to-number", ["get", "offset"]],
  0
]

There is a visible staircase effect when number of segments is low, especially on a small zoom:

Design

Ideally, I will need to set something like this:

"line_offset": [
  "interpolate",
  ["linear"],
  ["line-progress"],
  0, 2.5, // where 2.5 is some magic number for when line is in a bunch
  1, 0
]

Unfortunately, line-progress can only be used in the line-gradient property.
https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/#line-progress

I wonder how feasible it is to implement it for line-offset as well.
Or, perhaps, there are better ways to solve my problem.