/* LIVE SEGEL: current Wira Chibi finisher only.
   Legacy normal-size Wira/Bunga/Sidma finisher styles are intentionally excluded. */
/* Wira finisher preview: keep the battlefield visible, then focus only the eyes. */
#segelStage.finisher-focus .segelFinalFocus{inset:0!important;left:0!important;top:0!important;width:100%!important;height:100%!important;border:0;border-radius:0;background:#000!important;box-shadow:none;overflow:hidden;transform:none;z-index:30!important;visibility:visible!important;opacity:1!important}
#segelStage.finisher-focus .finalEyePortrait{
  left:-7%;top:30%;width:114%;height:40%;
  background-image:url('../assets/fx/wira/final-v4/wira-eye-ice-electric-v1.webp');
  background-size:cover;background-position:center 48%;background-repeat:no-repeat;
  border-top:2px solid rgba(120,235,255,.72);border-bottom:2px solid rgba(120,205,255,.5);
  box-shadow:0 0 46px rgba(65,208,255,.34),inset 0 0 28px rgba(75,218,255,.22);
  filter:saturate(1.08) contrast(1.04) brightness(.98) drop-shadow(0 0 15px rgba(78,210,255,.72));
  transform:translateX(-115%) skewX(-4deg);opacity:0;
  animation:wiraIcyEyeCutin 980ms cubic-bezier(.18,.85,.3,1) forwards!important
}
#segelStage.finisher-focus .finalEyePortrait:after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 49%,rgba(195,251,255,.18),transparent 24%),
    linear-gradient(90deg,rgba(0,0,0,.9) 0,transparent 14% 86%,rgba(0,0,0,.9) 100%);
  mix-blend-mode:normal;animation:wiraEyeElectricPulse 980ms ease-out both
}
#segelStage.finisher-focus .finalFocusGlint,#segelStage.finisher-focus .segelFinisherCallout{display:none}
#segelStage.finisher-focus .segelFinalFocus:before,
#segelStage.finisher-focus .segelFinalFocus:after{
  content:'';position:absolute;left:5%;width:90%;aspect-ratio:4/1;z-index:2;
  background-image:url('../assets/fx/wira/final-v5/jurus-penamat-logo-sheet-v1.webp');
  background-repeat:no-repeat;background-size:100% 200%;
  animation:wiraFinalTitle 980ms ease-out both;pointer-events:none;
  filter:drop-shadow(0 3px 7px rgba(16,148,255,.4));
}
#segelStage.finisher-focus .segelFinalFocus:before{top:4%;background-position:center top}
#segelStage.finisher-focus .segelFinalFocus:after{bottom:4%;background-position:center bottom}
@keyframes wiraFinalTitle{0%{opacity:0;transform:translateX(-18px) skewX(-7deg) rotate(-3deg) scale(.85)}24%,86%{opacity:1;transform:skewX(-7deg) rotate(-3deg)}100%{opacity:0;transform:translateX(12px) skewX(-7deg) rotate(-3deg)}}
@keyframes wiraIcyEyeCutin{
  0%{opacity:0;transform:translateX(-115%) skewX(-4deg) scale(1.04);filter:brightness(.45) saturate(.7)}
  24%{opacity:1;transform:translateX(0) skewX(-4deg) scale(1.04);filter:brightness(.7) saturate(.95) drop-shadow(0 0 10px rgba(78,210,255,.5))}
  58%{opacity:1;transform:translateX(0) skewX(-4deg) scale(1.075);filter:brightness(1.08) saturate(1.28) drop-shadow(0 0 30px rgba(125,235,255,1))}
  82%{opacity:1;transform:translateX(0) skewX(-4deg) scale(1.09);filter:brightness(1.26) saturate(1.38) drop-shadow(0 0 42px rgba(190,248,255,1))}
  100%{opacity:1;transform:translateX(10%) skewX(-4deg) scale(1.1);filter:brightness(1.05) saturate(1.25) drop-shadow(0 0 28px rgba(95,224,255,.92))}
}
@keyframes wiraEyeElectricPulse{
  0%,20%{opacity:0}
  48%{opacity:.35}
  68%{opacity:1}
  78%{opacity:.42}
  88%{opacity:1}
  100%{opacity:.5}
}
@media(max-width:520px){
  #segelStage.finisher-focus .finalEyePortrait{left:-12%;top:31%;width:124%;height:38%;background-position:center 48%}
}

/* Attack sprite must be visible after the eye cut-in; the legacy rule hid it. */
  #segelStage.finisher-dash .segelFinisherAttack.segelFinisherAttack{display:block!important;opacity:1!important;visibility:visible!important;z-index:31!important}
  #segelStage.finisher-math .segelMathBurst{z-index:32}
#segelStage.finisher-impact .segelFinisherImpact{visibility:visible!important;z-index:33!important}
/* The 11-frame glacier is advanced by the live render loop. CSS must not
   animate or swap it independently, otherwise the last frame can overlap the
   victory panel or jump to the wrong row. */
#segelStage .segelFinisherImpact{left:0;top:0;bottom:auto;width:0;height:0;background-image:url('../assets/fx/wira/final-v5/glacier-clean-sheet-v1.webp');background-repeat:no-repeat;background-size:400% 300%;background-position:0 0;transform:none;transform-origin:center bottom;animation:none!important;object-fit:contain;mix-blend-mode:normal;filter:drop-shadow(0 0 12px rgba(94,219,255,.65))}

/* Main battle charge: use the authored Wira charge sheet, not the old generic aura. */
.segelChargeHero{position:absolute;left:5%;bottom:4%;width:auto;height:66%;aspect-ratio:543/724;z-index:11;opacity:0;visibility:hidden;pointer-events:none;background:url('../assets/fx/wira/final-v2/wira-charge-sheet-v3.webp') 0 0/400% 100% no-repeat;filter:drop-shadow(0 10px 8px rgba(0,0,0,.58)) drop-shadow(0 0 13px rgba(71,211,255,.5))}
#segelStage.finisher-charge .segelChargeAura{display:none!important}
/* 1600ms: sama dengan LIVE_FINISHER.chargeMs (pemilik mahu aura farming lebih lama). */
#segelStage.finisher-charge .segelChargeHero{visibility:visible;opacity:1;animation:wiraChargeSheet 1600ms steps(1,end) 1 forwards}
@keyframes wiraChargeSheet{0%,24.99%{background-position:0 0}25%,49.99%{background-position:33.333% 0}50%,74.99%{background-position:66.666% 0}75%,100%{background-position:100% 0}}
@media(max-width:520px){.segelChargeHero{left:4%;bottom:5%;width:auto;height:66%;aspect-ratio:543/724}}

/* Aura farming begins on pure black; the live arena is deliberately hidden
   until the eye cut-in finishes and the final FX snaps back onto the Segel. */
#segelStage.finisher-charge:after{
  background:#000!important;opacity:1!important;z-index:10!important;
  animation:none!important
}
#segelStage.finisher-charge .segelChargeHero{z-index:12!important}
#segelStage.finisher-charge canvas,
#segelStage.finisher-charge .segelShellHud{filter:brightness(0)!important}


/* JS owns the glacier timeline and fracture fade. */
#segelStage .segelGlacierShard{position:absolute;z-index:33;pointer-events:none;background-repeat:no-repeat;transform-origin:50% 70%;filter:drop-shadow(0 0 5px rgba(173,235,255,.6));will-change:transform,opacity}