/* ─── ANIMATIONS ──────────────────────────────────────── */

@keyframes billeteEntra {
  0%   { transform: translateY(-60px) rotate(0deg) scale(0.6); opacity: 0; }
  40%  { transform: translateY(10px) rotate(-8deg) scale(1.05); opacity: 1; }
  65%  { transform: translateY(-4px) rotate(3deg) scale(0.97); }
  80%  { transform: translateY(3px) rotate(-1deg) scale(1.01); }
  100% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
}

@keyframes billeteSale {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  30%  { transform: translateY(-20px) scale(1.05); opacity: 0.7; }
  100% { transform: translateY(60px) scale(0.6); opacity: 0; }
}

@keyframes boteRebote {
  0%   { transform: scaleY(1); }
  20%  { transform: scaleY(0.97) scaleX(1.02); }
  50%  { transform: scaleY(1.02) scaleX(0.99); }
  75%  { transform: scaleY(0.99); }
  100% { transform: scaleY(1); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes itemAppear {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes totalPulse {
  0%   { opacity: 1; transform: scale(1); }
  30%  { opacity: 0.6; transform: scale(0.97); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

/* ─── UTILITY CLASSES ─── */

.anim-fade-up       { animation: fadeUp var(--dur-base) var(--ease-out) both; }
.anim-item-appear   { animation: itemAppear var(--dur-base) var(--ease-out) both; }
.total-amount.pulse { animation: totalPulse 0.4s var(--ease-out); }
.bote-rebote        { animation: boteRebote 0.5s var(--ease-spring); }
.shake              { animation: shake 0.35s var(--ease-out); }

.total-amount.celebrando {
  background: linear-gradient(
    90deg,
    var(--text-primary) 0%,
    rgba(255,255,255,0.4) 40%,
    var(--text-primary) 55%,
    var(--text-primary) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 1.5s linear 3;
}

.historial-list .mov-item:nth-child(1)  { animation-delay: 0ms; }
.historial-list .mov-item:nth-child(2)  { animation-delay: 30ms; }
.historial-list .mov-item:nth-child(3)  { animation-delay: 60ms; }
.historial-list .mov-item:nth-child(4)  { animation-delay: 90ms; }
.historial-list .mov-item:nth-child(5)  { animation-delay: 120ms; }
.historial-list .mov-item:nth-child(n+6){ animation-delay: 150ms; }

*, *::before, *::after {
  transition-property: background-color, border-color, color;
  transition-duration: 200ms;
  transition-timing-function: ease;
}

.progress-bar-fill,
.toggle-thumb,
.toggle-btn,
.dist-bill-bar-fill,
canvas {
  transition: none;
}