/* characters.css — small supplement layered OVER chara_icons.css for the list page.
 * Keeps the original card design; only (1) smooths the multi-form (3-way) image+name rotation,
 * (2) makes the cross-fading names share one line, (3) lays out the form-change icons cleanly
 * using the original icon art. Loaded AFTER chara_icons.css so these rules win. */

/* ---- (1) smooth 3-way rotation: base -> form 1 -> form 2 (9s, even thirds, soft cross-fades) ----
   The fade-out completes by 32% (before the 33.3% stagger point) so at load (delays 0 / -6 / -3 =>
   positions 0% / 66.6% / 33.3%) the opacities are a clean 1 / 0 / 0 — no flash of form 2. */
@-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'); }