/* formation reacts to hovered sword and to the cut */
.hero-formation{transition:filter .25s ease,opacity .25s ease}
.hero-formation.is-fire{filter:drop-shadow(0 0 18px rgba(255,120,40,.55)) saturate(1.2)}
.hero-formation.is-ice{filter:drop-shadow(0 0 18px rgba(170,230,250,.6)) saturate(1.05)}
.hero-formation.is-wind{filter:drop-shadow(0 0 16px rgba(170,220,170,.5)) saturate(1.1)}
.hero-formation.is-thunder{filter:drop-shadow(0 0 18px rgba(200,170,255,.6)) saturate(1.2)}
.hero-formation.is-flicker{animation:ffx-flicker 1.1s ease-in-out infinite}
@keyframes ffx-flicker{
  0%,100%{opacity:1}
  35%{opacity:.72}
  55%{opacity:1}
  72%{opacity:.82}
}
.hero-formation.is-cutting{animation:formation-cut .56s ease-out}
@keyframes formation-cut{
  0%{opacity:1;filter:brightness(2.0) drop-shadow(0 0 30px rgba(255,255,255,.9))}
  30%{opacity:1;filter:brightness(1.4)}
  100%{opacity:1;filter:none}
}
/* four sector arcs that light up separately */
.ffx-sectors{position:absolute;inset:0;pointer-events:none;z-index:3}
.ffx-arc{position:absolute;left:50%;top:50%;width:76%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(var(--a,-45deg));
  border-radius:50%;border:5px solid transparent;border-top-color:var(--c,#fff);opacity:0;
  -webkit-mask:radial-gradient(circle,transparent 58%,#000 60%,#000 70%,transparent 72%);
  mask:radial-gradient(circle,transparent 58%,#000 60%,#000 70%,transparent 72%);
  filter:drop-shadow(0 0 10px var(--c,#fff));transition:opacity .15s ease}
.ffx-arc.is-on{opacity:1;animation:ffx-blink .9s ease-in-out infinite}
@keyframes ffx-blink{0%,100%{opacity:.35}45%{opacity:1}60%{opacity:.5}80%{opacity:.95}}
@media (prefers-reduced-motion: reduce){
  .hero-formation{transition:none}
  .hero-formation.is-cutting,.hero-formation.is-flicker,.ffx-arc.is-on{animation:none}
}
/* element glyph on the formation, blinks in sync with the sword particles */
.ffx-glyph{position:absolute;inset:0;transform:rotate(var(--a,-45deg));opacity:0;pointer-events:none;
  transition:opacity .15s ease}
.ffx-glyph i{position:absolute;left:50%;top:4%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;
  background:var(--c,#fff);box-shadow:0 0 12px var(--c,#fff),0 0 26px var(--c,#fff)}
.ffx-glyph.is-on{opacity:1;animation:ffx-blink .9s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){
  .ffx-glyph.is-on{animation:none;opacity:.8}
}
/* sun-like element glyph on the formation (blinks with the arc) */
.ffx-glyph i{width:14px;height:14px;margin-left:-7px;background:radial-gradient(circle,#fff 0%,var(--c,#fff) 55%,rgba(255,255,255,0) 100%);
  box-shadow:0 0 12px var(--c,#fff),0 0 24px var(--c,#fff),
    0 -11px 0 -5px var(--c,#fff),0 11px 0 -5px var(--c,#fff),-11px 0 0 -5px var(--c,#fff),11px 0 0 -5px var(--c,#fff)}
/* sun rays */
.ffx-glyph.is-on i{animation:ffx-blink .9s ease-in-out infinite}
/* native formation groups: only the outer sector + element mark blink (inner ring untouched) */
#element-core{transform-box:fill-box;transform-origin:center}
.hero-formation-image.is-visible #element-core{animation:ffx-core .9s ease-in-out infinite}
.hero-formation-image.is-visible #active-sector{animation:ffx-sector .9s ease-in-out infinite}
@keyframes ffx-core{0%,100%{opacity:.42}50%{opacity:1}}
@keyframes ffx-sector{0%,100%{opacity:.25}50%{opacity:.9}}
.hero-formation.is-cutting .hero-formation-image.is-visible #element-core{animation:ffx-cut .55s ease-out}
.hero-formation.is-cutting .hero-formation-image.is-visible #active-sector{animation:ffx-cut .55s ease-out}
@keyframes ffx-cut{0%{opacity:1;filter:brightness(2.2)}100%{opacity:1;filter:none}}
@media (prefers-reduced-motion: reduce){
  .hero-formation-image.is-visible #element-core,
  .hero-formation-image.is-visible #active-sector{animation:none}
}
/* inner element mark (the sun / 16-point star) blinks much brighter */
.hero-formation-image{--el-glow:#e8dcff}
.hero-formation-image[data-formation="fire"]{--el-glow:#ff9a4d}
.hero-formation-image[data-formation="ice"]{--el-glow:#bfeaff}
.hero-formation-image[data-formation="wind"]{--el-glow:#bfe0b8}
.hero-formation-image[data-formation="thunder"]{--el-glow:#d6c2ff}
.hero-formation-image[data-formation="master"]{--el-glow:#e8dcff}
.hero-formation-image.is-visible #element-core{
  stroke-width:2.2;
  animation:ffx-core-strong .9s ease-in-out infinite;
}
@keyframes ffx-core-strong{
  0%,100%{opacity:.45;stroke-width:1.6;filter:drop-shadow(0 0 3px var(--el-glow))}
  50%{opacity:1;stroke-width:3.2;filter:drop-shadow(0 0 10px var(--el-glow)) drop-shadow(0 0 26px var(--el-glow))}
}
.hero-formation.is-cutting .hero-formation-image.is-visible #element-core{
  animation:ffx-core-cut .55s ease-out;
}
@keyframes ffx-core-cut{0%{opacity:1;stroke-width:3.6;filter:drop-shadow(0 0 18px var(--el-glow))}100%{opacity:1;stroke-width:2.2;filter:none}}
@media (prefers-reduced-motion: reduce){
  .hero-formation-image.is-visible #element-core{animation:none;opacity:.85}
}
/* small element seal: pulse bigger + brighter, glow spills outside the formation */
.hero-formation{overflow:visible !important}
.hero-formation-image{overflow:visible !important}
.hero-formation-image [data-active="1"] .seal-inner{
  transform-box:fill-box;transform-origin:center;
  animation:ffx-seal .9s ease-in-out infinite;
}
@keyframes ffx-seal{
  0%,100%{transform:scale(1);opacity:.95;filter:drop-shadow(0 0 4px var(--el-glow))}
  50%{transform:scale(1.8);opacity:1;filter:drop-shadow(0 0 14px var(--el-glow)) drop-shadow(0 0 36px var(--el-glow))}
}
.hero-formation.is-cutting .hero-formation-image [data-active="1"] .seal-inner{
  animation:ffx-seal-cut .55s ease-out;
}
@keyframes ffx-seal-cut{0%{transform:scale(1);filter:drop-shadow(0 0 20px var(--el-glow))}60%{transform:scale(1.9)}100%{transform:scale(1);filter:none}}
@media (prefers-reduced-motion: reduce){
  .hero-formation-image [data-active="1"] .seal-inner{animation:none;transform:scale(1.15);filter:drop-shadow(0 0 8px var(--el-glow))}
}
/* hover-only pulses: idle formation stays static */
.hero-formation-image.is-visible #element-core{animation:none !important}
.hero-formation-image [data-active="1"] .seal-inner{animation:none !important}
#b2-ip-layer:has(.b2-card.is-selected) .hero-formation-image.is-visible #element-core{animation:ffx-core-strong .9s ease-in-out infinite !important}
#b2-ip-layer:has(.b2-card.is-selected) .hero-formation-image.is-visible [data-active="1"] .seal-inner{animation:ffx-seal .9s ease-in-out infinite !important}
/* cut always pulses */
#b2-ip-layer .hero-formation.is-cutting .hero-formation-image.is-visible #element-core{animation:ffx-core-cut .55s ease-out !important}
#b2-ip-layer .hero-formation.is-cutting .hero-formation-image.is-visible [data-active="1"] .seal-inner{animation:ffx-seal-cut .55s ease-out !important}
/* hover-only (marker) */