I believe that the problem you are facing is caused by the fact that when you rotate individual arcs, they rotate around.
In other words, the axes of your circle rotate, and your arcs use the same axes to determine their own rotations. Therefore, if you look at your example A, you will say that it rotates in world space by -90, and then immediately rotates in world space by 30. To solve this, you want the arcs to rotate locally and not in world space.
I think you can solve this problem by setting up this structure:
Empty GameObject SCircle
------ Empty gameObject BlueArcCenter → position 0,0,0
----------- blue arc → change position here to make it offset from zero ex: (radius, 0, 0)
------ Empty gameObject RedArcCenter → position (0,0,0)
----------- red arc → change position here to make it offset from zero ex: (- radius, 0, 0)
Now change your code so that:
To rotate the blue and red arcs alternately, you rotate their arcCenters,
To rotate the entire configuration, turn SCircle. This, in turn, will turn both ArcCenters, which in turn will turn both arcs regardless of how they are oriented relative to each other or themselves rotate.
Note: Also, I read that people use Quaternions a lot less these days, as they really don't make sense when you read the code. You might want to change your code to regular rotations to make it more readable.
If you have the setting above use something like:
in a circle of rotation:
thisSCircle.transform.Rotate(0, -90, 0, Space.Self);
To rotate arcs around their common center:
blueArcCenter.transform.Rotate(0, -30, 0, Space.Self) redArcCemter.transform.Rotate(0, 30, 0, Space.Self)
(you need to add lerps and stuff, but this should get you started).