/* ============================================================
   ANIMATIONS.CSS — Keyframes & micro-interactions
   ============================================================ */

/* ── Ripple ── */
@keyframes ripple {
  to { transform: scale(3.5); opacity: 0; }
}

/* ── Shake (error state) ── */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15%       { transform: translateX(-7px); }
  30%       { transform: translateX(7px); }
  45%       { transform: translateX(-5px); }
  60%       { transform: translateX(5px); }
  75%       { transform: translateX(-3px); }
  90%       { transform: translateX(3px); }
}
.shake { animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97); }

/* ── Fade in ── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Slide up (result change) ── */
@keyframes slideUp {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.slide-up { animation: slideUp 0.18s cubic-bezier(0.4, 0, 0.2, 1); }

/* ── Slide in right (history items) ── */
@keyframes slideInRight {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ── Pop (for copy success) ── */
@keyframes pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}
.pop { animation: pop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ── Error display highlight ── */
@keyframes errorGlow {
  0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
  40%  { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.35); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.error-flash { animation: errorGlow 0.55s ease; }

/* ── Equal button pulse ── */
@keyframes equalPulse {
  0%   { box-shadow: 0 4px 18px rgba(124, 58, 237, 0.4); }
  50%  { box-shadow: 0 4px 28px rgba(124, 58, 237, 0.7); }
  100% { box-shadow: 0 4px 18px rgba(124, 58, 237, 0.4); }
}

/* ── Fade scale in (shortcuts panel) ── */
@keyframes fadeScaleIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* ── Number flip ── */
@keyframes numFlip {
  from { transform: translateY(-8px) scaleY(0.8); opacity: 0; }
  to   { transform: translateY(0) scaleY(1);      opacity: 1; }
}
.num-flip { animation: numFlip 0.14s cubic-bezier(0.4, 0, 0.2, 1); }

/* ── Scientific panel slide down ── */
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.scientific-section.visible {
  animation: slideDown 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Smooth theme transition ── */
html { transition: background-color var(--t-slow), color var(--t-slow); }

/* ── Mode tab slide ── */
.mode-tab {
  transition: background var(--t-base), color var(--t-base), box-shadow var(--t-base);
}

/* ── Memory flash ── */
@keyframes memFlash {
  0%   { background: var(--bg-memory); }
  40%  { background: rgba(16, 185, 129, 0.45); }
  100% { background: var(--bg-memory); }
}
.mem-flash { animation: memFlash 0.4s ease; }