.card-change-indicator {
  animation: cardChangeIndicator 3s ease-in-out 1;
  will-change: transform, box-shadow, border;
  border-radius: 12px;
}

.card-increase { 
  --indicator-shadow: rgba(239, 83, 80, 0.6);
  --indicator-border: rgba(239, 83, 80, 0.8);
}

.card-decrease { 
  --indicator-shadow: rgba(67, 160, 71, 0.6);
  --indicator-border: rgba(67, 160, 71, 0.8);
}

@keyframes cardChangeIndicator {
  0%   { 
    transform: scale(1);
    box-shadow: 0 0 0 0 var(--indicator-shadow, transparent);
    border: 2px solid transparent;
  }
  15%  { 
    transform: scale(1.03);
    box-shadow: 0 0 32px 12px var(--indicator-shadow, transparent);
    border: 2px solid var(--indicator-border, transparent);
  }
  30%  { 
    transform: scale(1);
    box-shadow: 0 0 16px 6px var(--indicator-shadow, transparent);
    border: 2px solid var(--indicator-border, transparent);
  }
  45%  { 
    transform: scale(1.02);
    box-shadow: 0 0 24px 8px var(--indicator-shadow, transparent);
    border: 2px solid var(--indicator-border, transparent);
  }
  60%  { 
    transform: scale(1);
    box-shadow: 0 0 8px 3px var(--indicator-shadow, transparent);
    border: 2px solid var(--indicator-border, transparent);
  }
  80%  { 
    transform: scale(1);
    box-shadow: 0 0 4px 1px var(--indicator-shadow, transparent);
    border: 1px solid var(--indicator-border, transparent);
  }
  100% { 
    transform: scale(1);
    box-shadow: 0 0 0 0 var(--indicator-shadow, transparent);
    border: 2px solid transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-change-indicator {
    animation: none;
    box-shadow: 0 0 16px 6px var(--indicator-shadow, transparent);
    border: 2px solid var(--indicator-border, transparent);
  }
}

.cell-change-indicator {
  animation: cellChangeIndicator 3s ease-in-out 1;
  will-change: background-color, color;
  border-radius: 4px;
}

.cell-increase { 
  --cell-bg-start: rgba(239, 83, 80, 0.3);
  --cell-bg-mid: rgba(239, 83, 80, 0.15);
  --cell-text: #ef5350;
}

.cell-decrease { 
  --cell-bg-start: rgba(67, 160, 71, 0.3);
  --cell-bg-mid: rgba(67, 160, 71, 0.15);
  --cell-text: #43a047;
}

@keyframes cellChangeIndicator {
  0%   { 
    background-color: transparent;
    color: inherit;
  }
  10%  { 
    background-color: var(--cell-bg-start, transparent);
    color: var(--cell-text, inherit);
  }
  30%  { 
    background-color: var(--cell-bg-mid, transparent);
    color: var(--cell-text, inherit);
  }
  60%  { 
    background-color: var(--cell-bg-mid, transparent);
    color: var(--cell-text, inherit);
  }
  100% { 
    background-color: transparent;
    color: inherit;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cell-change-indicator {
    animation: none;
    background-color: var(--cell-bg-mid, transparent);
    color: var(--cell-text, inherit);
  }
}