MOVIMENTO COM INTENÇÃO.

npm install animejs

import { animate } from 'animejs'

const obj = { value: 0 }
animate(obj, {
  value: 847,
  duration: 1400,
  delay: 200,           // delay opcional por item
  easing: 'easeOutExpo',
  onUpdate: () => {
    el.textContent = Math.round(obj.value) + '%'
  },
})

import { animate, stagger } from 'animejs'

// Resetar estado antes do replay
cards.forEach(el => {
  el.style.opacity = '0'
  el.style.transform = 'translateY(24px)'
})

animate('.card', {
  opacity:    [0, 1],
  translateY: [24, 0],
  delay:      stagger(110),   // 110ms entre cada card
  duration:   520,
  easing:     'easeOutExpo',
})

import { animate } from 'animejs'

animate(el, {
  translateX: [0, -4, 5, -3, 4, -2, 3, -1, 0],
  duration: 480,
  easing: 'linear',
})
animate(el, {
  skewX: [0, -2, 2, -1, 1, 0],
  duration: 480,
  easing: 'linear',
})

// Flash de cor sincronizado
const colors = ['var(--gold)', '#ff3030', 'var(--white)', 'var(--gold)']
let i = 0
const interval = setInterval(() => {
  el.style.color = colors[i++ % colors.length]
  if (i >= colors.length) clearInterval(interval)
}, 120)

/* Apenas estas propriedades usam transition */
.card, a, button {
  transition: color          200ms ease,
              border-color   200ms ease,
              background     200ms ease,
              opacity        200ms ease;
}

/* Hover de card */
.card:hover {
  border-top-color: var(--gold);
  background: var(--black-elevated);
}

/* Hover de botão gold */
.btn-gold:hover {
  background: var(--gold-light);
}