/* Pokémon Arena · efeito de dano nas barras de vida (rastro que escorre + flash + tremor). Ver src/hp-trail.js.
   Remover: apague o <link> deste arquivo (as barras voltam ao comportamento anterior). */
@property --hp{syntax:'<number>';inherits:true;initial-value:100}
@property --hpt{syntax:'<number>';inherits:true;initial-value:100}

/* barra do HUD: o rastro fica atrás do preenchimento e só aparece onde a vida acabou de ser perdida */
html body .battle-health{transition:--hpt .6s cubic-bezier(.45,0,.9,.5) .5s}
html body .battle-health::before{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--hpt)*1%);background:#d62828;z-index:0;pointer-events:none}
html body .battle-health>i{position:relative;z-index:1}
html body .battle-health>span{position:relative;z-index:2}
@media(prefers-reduced-motion:no-preference){
 @keyframes hp-shake{0%{translate:0 0}12%{translate:-7px 2px}28%{translate:6px -2px}44%{translate:-5px 1px}60%{translate:3px 0}78%{translate:-1px 0}100%{translate:0 0}}
 @keyframes hp-punch{0%{scale:1 1}16%{scale:1.05 1.7}40%{scale:.99 .9}100%{scale:1 1}}
 @keyframes hp-flash{0%,35%{filter:brightness(3.2) saturate(0)}100%{filter:none}}
 html body .battle-fighter.hp-hit{animation:hp-shake .44s linear}
 html body .battle-health.hp-hit{animation:hp-punch .42s cubic-bezier(.2,.9,.3,1)}
 html body .battle-health.hp-hit>i{animation:hp-flash .36s steps(3)}
}
html body .battle-health.hp-hit>span{color:#ffe0d6}

/* risco que separa a vida atual do rastro (só aparece enquanto o rastro existe) */
html body .battle-health::after{content:"";position:absolute;top:0;bottom:0;left:calc(var(--hp)*1%);width:5px;margin-left:-3px;background:#04101a;box-shadow:0 0 0 1px #ffffffd0;opacity:clamp(0,calc((var(--hpt) - var(--hp))*1),1);z-index:3;pointer-events:none}