/* ==========================================================================
   animations.css — keyframes only. Components reference these by name.
   ========================================================================== */

@keyframes fade-slide-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(0.94) translateY(4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 3px var(--color-success-soft); }
  50%      { box-shadow: 0 0 0 6px transparent; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(24px) scale(0.98); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateX(0) scale(1); max-height: 100px; margin-top: 0; }
  to   { opacity: 0; transform: translateX(24px) scale(0.96); max-height: 0; margin-top: -12px; }
}

@keyframes float-blob-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, 60px) scale(1.08); }
  66%      { transform: translate(-20px, 30px) scale(0.95); }
}

@keyframes float-blob-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(-50px, 40px) scale(1.05); }
  70%      { transform: translate(20px, -30px) scale(0.98); }
}

@keyframes float-blob-c {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(30px, -50px) scale(1.1); }
}

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

@keyframes stat-count-flash {
  0%   { color: var(--accent-cyan); }
  100% { color: var(--text-primary); }
}
.stat-value.is-updated { animation: stat-count-flash 600ms var(--ease-out); }

@keyframes highlight-row {
  0%   { background: var(--accent-cyan-soft); }
  100% { background: transparent; }
}
.editor-textarea.is-converted { animation: none; }

/* Ripple effect utility — spans are injected by ui.js on click */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transform: scale(0);
  animation: ripple-out 600ms var(--ease-out);
  pointer-events: none;
}
@keyframes ripple-out {
  to { transform: scale(2.6); opacity: 0; }
}

/* Page entrance stagger applied via inline animation-delay in style.css */