export function tickNumber(el, from, to, duration = 600) {
  const start = performance.now();
  const diff = to - from;

  function frame(now) {
    const t = Math.min((now - start) / duration, 1);
    const eased = 1 - Math.pow(1 - t, 3);
    el.textContent = Math.round(from + diff * eased).toLocaleString();
    if (t < 1) requestAnimationFrame(frame);
  }
  requestAnimationFrame(frame);
}

export function flyTo(el, targetEl, duration = 500) {
  const from = el.getBoundingClientRect();
  const to = targetEl.getBoundingClientRect();
  const dx = to.left - from.left + to.width / 2 - from.width / 2;
  const dy = to.top - from.top + to.height / 2 - from.height / 2;

  return el.animate([
    { transform: 'translate(0, 0) scale(1)', opacity: 1 },
    { transform: `translate(${dx}px, ${dy}px) scale(0.2)`, opacity: 0 }
  ], { duration, easing: 'cubic-bezier(0.4, 0, 0.2, 1)', fill: 'forwards' }).finished;
}

export function pop(el) {
  el.animate([
    { transform: 'scale(0.8)', opacity: 0 },
    { transform: 'scale(1.05)', opacity: 1 },
    { transform: 'scale(1)' }
  ], { duration: 300, easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)' });
}

export function shake(el) {
  el.animate([
    { transform: 'translateX(0)' },
    { transform: 'translateX(-4px)' },
    { transform: 'translateX(4px)' },
    { transform: 'translateX(-2px)' },
    { transform: 'translateX(2px)' },
    { transform: 'translateX(0)' }
  ], { duration: 300, easing: 'ease-out' });
}

export function fadeIn(el, duration = 250) {
  el.animate([
    { opacity: 0, transform: 'translateY(8px)' },
    { opacity: 1, transform: 'translateY(0)' }
  ], { duration, easing: 'cubic-bezier(0.2, 0, 0, 1)', fill: 'forwards' });
}

export function scaleIn(el, duration = 300) {
  el.animate([
    { transform: 'scale(0.85)', opacity: 0 },
    { transform: 'scale(1)', opacity: 1 }
  ], { duration, easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)', fill: 'forwards' });
}
