@-webkit-keyframes cc-rot3{0%{opacity:1}22%{opacity:1}32%{opacity:0}89%{opacity:0}100%{opacity:1}}
@keyframes cc-rot3{0%{opacity:1}22%{opacity:1}32%{opacity:0}89%{opacity:0}100%{opacity:1}}
/* belt-and-suspenders: form 1 & 2 layers start hidden so the base shows alone on the first frame */
.character-thumb > .Synccharacter2,
.character-thumb > .Synccharacter3,
.character-thumb > .SyncName2,
.character-thumb > .SyncName3{ opacity:0; }
.character-thumb > .Synccharacter1,
.character-thumb > .Synccharacter2,
.character-thumb > .Synccharacter3,
.character-thumb > .SyncName1,
.character-thumb > .SyncName2,
.character-thumb > .SyncName3{
  -webkit-animation: cc-rot3 9s ease-in-out infinite both;
          animation: cc-rot3 9s ease-in-out infinite both;
}
/* order base -> form1 -> form2: with cc-rot3 a MORE-negative delay surfaces LATER, so
   form1 (Sync*2) = -6s shows 2nd, form2 (Sync*3) = -3s shows 3rd. */
.character-thumb > .Synccharacter1,.character-thumb > .SyncName1{ -webkit-animation-delay:0s;  animation-delay:0s; }
.character-thumb > .Synccharacter2,.character-thumb > .SyncName2{ -webkit-animation-delay:-6s; animation-delay:-6s; }
.character-thumb > .Synccharacter3,.character-thumb > .SyncName3{ -webkit-animation-delay:-3s; animation-delay:-3s; }

/* (names already overlap at top:0 via chara_icons.css `.character-thumb > div`; they cross-fade
    by opacity — 2-way via `fade`, 3-way via `cc-rot3` above. No repositioning needed.) */

/* ---- (2) form-change icon slots (original icon art; slot 0 = left, slot 1 = right) ---- */
.character-thumb > .cicon{
  position:absolute; top:84px; width:31px; height:34px; z-index:4;
  background:no-repeat center; background-size:contain;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.7));
}
.character-thumb > .cicon.slot0{ left:2px; }
.character-thumb > .cicon.slot1{ left:26px; }
.character-thumb > .cicon-transform{ background-image:url('/assets/icon_elements/HUD_icnTransform.webp'); }
.character-thumb > .cicon-tag{ background-image:url('/assets/icon_elements/MChaIco_icnTagChange.webp'); }
.character-thumb > .cicon-synchro{ background-image:url('/assets/icon_elements/MChaIco_icnSynchro_On.webp'); }