/* ============================================================
 * 伪骨骼精灵 rig —— 移植自试玩版 battle.css
 * 三只共用一张静态立绘，用 clip-path 各裁一条横带 + 不同形变曲线，
 * 让「一张图」表现出「一个活物」的呼吸 / 出招 / 受击 / 倒下。
 * 元素差异化：火躁水柔风飘土沉星浮草摇。
 * ============================================================ */

/* 抵消 play.css 里 .fighter img 的遗留样式（固定宽高 / 圆角 / multiply 混合） */
.rig-l > img, .rig-b > img, .rig-h > img{
  width:100% !important; height:100% !important;
  object-fit:contain; mix-blend-mode:normal; border-radius:0;
}

.sprite{
  position:relative; will-change:transform;
  width:min(34vw,148px); aspect-ratio:1/1; margin:0 auto;
}
/* 三层绝对定位、各放同一张图，img 用 contain，三层天然对齐同一坐标系 */
.rig{position:relative}
.rig > .rig-l, .rig > .rig-b, .rig > .rig-h{
  position:absolute; inset:0;
  will-change:transform, filter;
  transform-origin:50% 92%;   /* 以脚底为形变基点 */
  pointer-events:none;
}
.rig-l > img, .rig-b > img, .rig-h > img{
  width:100%; height:100%; object-fit:contain;
}
/* 投影只给最底层，避免 clip 切口被多次描影形成横穿白线 */
.rig-l > img{filter:drop-shadow(0 8px 14px rgba(48,76,63,.22))}
.sprite::after{
  content:""; position:absolute; left:50%; bottom:2%;
  width:62%; height:12%; transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(48,76,63,.26),transparent 70%);
  z-index:-1; pointer-events:none;
}

/* 裁剪带：错开 + 单侧渐隐，接缝处永远至少一层完全不透明 */
.rig-h > img{
  clip-path:inset(0 0 46% 0);
  -webkit-mask-image:linear-gradient(to bottom,#000 0 40%,rgba(0,0,0,0) 54%);
          mask-image:linear-gradient(to bottom,#000 0 40%,rgba(0,0,0,0) 54%);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.rig-b > img{
  clip-path:inset(40% 0 2% 0);
  -webkit-mask-image:linear-gradient(to bottom,#000 0 86%,rgba(0,0,0,0) 98%);
          mask-image:linear-gradient(to bottom,#000 0 86%,rgba(0,0,0,0) 98%);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.rig-l > img{clip-path:inset(86% 0 0 0)}

/* 待机呼吸：头略快、幅度略大，不同步以免像整块板子动 */
.side-enemy .rig-h{animation:breatheH 2.8s ease-in-out infinite}
.side-enemy .rig-b{animation:breatheB 3.4s ease-in-out infinite}
.side-enemy .rig-l{animation:grounded 3.4s ease-in-out infinite}
.side-player .rig-h{animation:breatheH 3.1s ease-in-out .4s infinite}
.side-player .rig-b{animation:breatheB 3.8s ease-in-out .4s infinite}
.side-player .rig-l{animation:grounded 3.8s ease-in-out .4s infinite}

@keyframes breatheH{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-1.4%) scale(1.008,1.022)}}
@keyframes breatheB{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(.6%) scale(1.012,1.014)}}
@keyframes grounded{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(.3%) scale(1.004,.994)}}

/* 元素化待机：不同元素不同呼吸方式（只改时长与幅度，方向留给动作） */
.sprite[data-el="fire"]  .rig-h{animation-duration:1.9s}
.sprite[data-el="fire"]  .rig-b{animation-duration:2.3s}
.sprite[data-el="water"] .rig-h{animation-duration:3.6s}
.sprite[data-el="water"] .rig-b{animation-duration:4.4s}
.sprite[data-el="wind"]  .rig-h{animation-duration:2.6s}
.sprite[data-el="wind"]  .rig-b{animation-duration:3.1s; animation-name:swayB}
.sprite[data-el="earth"] .rig-h{animation-duration:4.4s}
.sprite[data-el="earth"] .rig-b{animation-duration:5.2s}
.sprite[data-el="star"]  .rig-h{animation-duration:3.2s; animation-name:floatH}
.sprite[data-el="star"]  .rig-b{animation-duration:3.8s; animation-name:floatB}
.sprite[data-el="grass"] .rig-h{animation-name:swayH}
.sprite[data-el="grass"] .rig-b{animation-name:swayB}
@keyframes swayH{0%,100%{transform:rotate(0deg)}50%{transform:rotate(.8deg)}}
@keyframes swayB{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-.6deg)}}
@keyframes floatH{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.6%)}}
@keyframes floatB{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2%)}}

/* ── 姿态：蓄力 / 出招 / 受击 / 倒下 / 治疗 ── */
/* 出招方向：我方向右倾，敌方反向 */
.side-player{--bx:30px; --tilt:-7deg}
.side-enemy {--bx:-30px; --tilt:7deg}

.rig.charge .rig-h{animation:chgH .3s cubic-bezier(.3,.1,.5,1) both}
.rig.charge .rig-b{animation:chgB .3s cubic-bezier(.3,.1,.5,1) both}
.rig.charge .rig-l{animation:chgL .3s cubic-bezier(.3,.1,.5,1) both}
@keyframes chgH{0%{transform:translate(0,0)}100%{transform:translate(calc(var(--bx) * -.4), 3%) scale(.97,1.04)}}
@keyframes chgB{0%{transform:translate(0,0) scale(1,1)}100%{transform:translate(calc(var(--bx) * -.22), 4.5%) scale(1.05,.9)}}
@keyframes chgL{0%{transform:translate(0,0) scale(1,1)}100%{transform:translate(0,1%) scale(1.12,.94)}}

.rig.attack .rig-l{animation:atkL .38s cubic-bezier(.25,.9,.35,1) both}
.rig.attack .rig-b{animation:atkB .42s cubic-bezier(.2,.85,.3,1) .03s both}
.rig.attack .rig-h{animation:atkH .4s cubic-bezier(.3,.9,.4,1) .06s both}
@keyframes atkL{0%{transform:translate(0,0)}35%{transform:translate(calc(var(--bx) * .5), -3%) scale(.92,1.1)}100%{transform:translate(0,0)}}
@keyframes atkB{0%{transform:translate(0,0) scale(1,1)}30%{transform:translate(calc(var(--bx) * .85), -4%) scale(1.1,.94)}62%{transform:translate(calc(var(--bx) * .78), 1%) scale(1.02,1.02)}100%{transform:translate(0,0) scale(1,1)}}
@keyframes atkH{0%{transform:translate(0,0) rotate(0deg)}28%{transform:translate(calc(var(--bx) * 1), -5%) rotate(var(--tilt)) scale(1.06,.96)}64%{transform:translate(calc(var(--bx) * .9), 0) rotate(calc(var(--tilt) * .5))}100%{transform:translate(0,0) rotate(0deg)}}

/* 受击：三层反向甩 + 白闪（用 filter 而非 drop-shadow，避免描出分层接缝） */
.rig.hurt .rig-h{animation:htH .38s ease both, fxFlash .18s ease .04s both}
.rig.hurt .rig-b{animation:htB .38s ease both, fxFlash .18s ease .04s both}
.rig.hurt .rig-l{animation:htL .38s ease both, fxFlash .18s ease .04s both}
@keyframes fxFlash{0%{filter:brightness(1) saturate(1)}35%{filter:brightness(2.6) saturate(.25)}100%{filter:brightness(1) saturate(1)}}
@keyframes htH{0%{transform:translate(0,0)}22%{transform:translate(calc(var(--bx) * .34), -2%) rotate(calc(var(--tilt) * 1.2))}50%{transform:translate(calc(var(--bx) * -.16), 1%) rotate(calc(var(--tilt) * -.4))}76%{transform:translate(calc(var(--bx) * .1), 0) rotate(calc(var(--tilt) * .2))}100%{transform:translate(0,0)}}
@keyframes htB{0%{transform:translate(0,0) scale(1,1)}26%{transform:translate(calc(var(--bx) * .26), 2%) scale(.95,1.06)}58%{transform:translate(calc(var(--bx) * -.12), 0) scale(1.03,.98)}100%{transform:translate(0,0) scale(1,1)}}
@keyframes htL{0%{transform:translate(0,0)}30%{transform:translate(calc(var(--bx) * .3), -2%)}100%{transform:translate(0,0)}}

/* 倒下：三层依次瘫软 */
.rig.down .rig-h{animation:dnH .5s ease both}
.rig.down .rig-b{animation:dnB .5s ease both}
.rig.down .rig-l{animation:dnL .5s ease both}
@keyframes dnH{0%{transform:translate(0,0)}100%{transform:translate(-6%,26%) rotate(-16deg); opacity:.32}}
@keyframes dnB{0%{transform:translate(0,0) scale(1,1)}100%{transform:translate(-2%,16%) scale(1.06,.8); opacity:.32}}
@keyframes dnL{0%{transform:translate(0,0)}100%{transform:translate(4%,8%) scale(.92,1.1); opacity:.32}}

/* 治疗：三层依次上浮 */
.rig.heal .rig-l{animation:hlL .62s ease both}
.rig.heal .rig-b{animation:hlB .62s ease .06s both}
.rig.heal .rig-h{animation:hlH .62s ease .12s both}
@keyframes hlL{0%,100%{transform:translateY(0)}50%{transform:translateY(-3%) scale(1.02,.98)}}
@keyframes hlB{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-7%) scale(1.03,1.05)}}
@keyframes hlH{0%,100%{transform:translateY(0)}50%{transform:translateY(-12%) scale(1.02,1.06)}}

/* 佩戴 prefers-reduced-motion 时，伪骨骼退化为静态立绘（只保留待机呼吸的静止态） */
@media (prefers-reduced-motion: reduce){
  .rig > .rig-h, .rig > .rig-b, .rig > .rig-l{animation:none !important}
}