/* ── ANIMATIONS ── */
/* All keyframes and transition definitions */

/* ── BAR SWAP PULSE ── */
@keyframes swapPulse {
  0%   { filter: brightness(1); }
  40%  { filter: brightness(1.5); }
  100% { filter: brightness(1); }
}

/* ── COMPARE FLASH ── */
@keyframes compareFlash {
  0%   { opacity: 1; }
  50%  { opacity: 0.6; }
  100% { opacity: 1; }
}

/* ── SORTED BOUNCE ── */
@keyframes sortedBounce {
  0%   { transform: scaleY(1); }
  30%  { transform: scaleY(1.04); }
  60%  { transform: scaleY(0.98); }
  100% { transform: scaleY(1); }
}

/* ── PIVOT PULSE ── */
@keyframes pivotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(231, 76, 60, 0); }
  100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}

/* ── HEADER SCAN LINE ── */
@keyframes scanLine {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* ── APP LOAD ── */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── STATE CLASSES APPLYING ANIMATIONS ── */
.bar.state-swapping {
  animation: swapPulse 300ms ease-in-out;
}

.bar.state-comparing {
  animation: compareFlash 400ms ease-in-out;
}

.bar.state-sorted {
  animation: sortedBounce 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: bottom center;
}

.bar.state-pivot {
  animation: pivotPulse 1200ms infinite;
}

/* ── APP SECTIONS LOAD ── */
.app-wrapper > * {
  animation: fadeSlideUp 400ms ease both;
}

.app-wrapper > *:nth-child(1) { animation-delay: 0ms; }
.app-wrapper > *:nth-child(2) { animation-delay: 60ms; }
.app-wrapper > *:nth-child(3) { animation-delay: 120ms; }
.app-wrapper > *:nth-child(4) { animation-delay: 180ms; }
.app-wrapper > *:nth-child(5) { animation-delay: 240ms; }

/* ── CALLSTACK FRAME ENTRY ── */
@keyframes frameEnter {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.callstack-frame {
  animation: frameEnter 200ms ease both;
}

/* ── STEP COUNTER TICK ── */
@keyframes counterTick {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); color: var(--accent-orange); }
  100% { transform: scale(1); }
}

.step-counter.tick {
  animation: counterTick 200ms ease;
}

/* ── BUTTON PRESS ── */
.btn-primary:active:not(:disabled),
.btn-secondary:active:not(:disabled),
.btn-reset:active:not(:disabled) {
  transform: scale(0.96);
}

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

.custom-input.shake {
  animation: shake 350ms ease;
}