/* Infinitésimo · movimento · "Caderno de gênio". Classes utilitárias de animação; o JS só adiciona/remove a classe.
   Tudo usa --dur-* e --ease-* de tokens.css; em prefers-reduced-motion as durações viram 0 e os loops são desligados. */
@property --p{syntax:'<number>';inherits:true;initial-value:0}
.ring,.prog,.strength{transition:--p var(--dur-3) var(--ease-out)}
.ring.slow{transition-duration:600ms}
.strength.slow{transition:--p 600ms var(--ease-out) 300ms}
@keyframes pop{50%{transform:scale(1.15)}}
@keyframes pulse{50%{transform:scale(1.03)}}
@keyframes shake{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
@keyframes rise{from{transform:translateY(100%);opacity:0}}
@keyframes fade{from{opacity:0}}
@keyframes stamp{from{transform:scale(.6) rotate(-8deg);opacity:0}}
@keyframes fall{0%{transform:translateY(-40px) rotate(0);opacity:1}80%{opacity:1}100%{transform:translateY(520px) rotate(420deg);opacity:0}}
@keyframes unlock{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes drop{from{transform:translate(-50%,-8px);opacity:0}}
@keyframes flip{50%{transform:rotateY(90deg)}}
@keyframes glow{0%,100%{box-shadow:var(--hard)}50%{box-shadow:4px 4px 0 var(--xp-fill),0 0 0 6px color-mix(in srgb,var(--xp-fill) 40%,transparent)}}
@keyframes ember{to{transform:translateY(-28px) scale(.6);opacity:0}}
@keyframes slidein{from{transform:translateX(16px);opacity:0}}
.anim-pop{animation:pop var(--dur-2) var(--ease-pop)}
.anim-pulse{animation:pulse var(--dur-2) var(--ease-out)}
.anim-shake{animation:shake 240ms var(--ease-out)}
.anim-rise{animation:rise var(--dur-2) var(--ease-out)}
.anim-fade{animation:fade var(--dur-1) linear}
.anim-stamp{animation:stamp var(--dur-3) var(--ease-pop) both}
.anim-slidein{animation:slidein var(--dur-3) var(--ease-out) both}
.conf.fall i{animation:fall 1.2s linear both}
.conf.fall i:nth-child(2n){animation-delay:.08s}.conf.fall i:nth-child(3n){animation-delay:.16s}.conf.fall i:nth-child(4n){animation-delay:.24s}.conf.fall i:nth-child(5n){animation-duration:1.4s}
.orb.unlock{animation:unlock var(--dur-3) var(--ease-pop)}
.start.drop{animation:drop var(--dur-2) var(--ease-out) both,start-bob 1.6s ease-in-out var(--dur-2) infinite}
.div-tag.flip,.unit.flip{animation:flip var(--dur-3) var(--ease-out)}
.unit.glow,.card.glow{animation:glow 640ms var(--ease-out)}
.combo{transition:background var(--dur-2),color var(--dur-2),border-color var(--dur-2)}
.combo .ember{position:absolute;left:50%;bottom:60%;font-size:12px;animation:ember 600ms var(--ease-out) both;pointer-events:none}
.combo .ember:nth-child(2){left:30%;animation-delay:.08s}.combo .ember:nth-child(3){left:70%;animation-delay:.16s}
.combo.fire{position:relative}
.linha{transition:transform var(--dur-3) var(--ease-out)}
.eps-swap{transition:opacity var(--dur-1)}
.eps .pupil{transition:transform var(--dur-2) var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  .anim-pop,.anim-pulse,.anim-shake,.anim-rise,.anim-stamp,.anim-slidein,.orb.unlock,.div-tag.flip,.unit.flip,.unit.glow,.card.glow,.combo .ember{animation:none}
  .anim-rise,.anim-stamp,.anim-slidein,.anim-fade{animation:fade 120ms linear both}
  .conf.fall i{animation:none}
  .start.drop{animation:none}
  .ring,.prog,.strength,.linha{transition:none}
}