/* FILE: css/animations.css */

/* 1. fadeIn */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 2. slideInLeft */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 3. slideInRight */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 4. slideInUp */
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 5. pulse (scale, for recording indicator) */
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.08); opacity: 0.85; }
}

/* 6. breathe (for AI thinking) */
@keyframes breathe {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1; }
}

/* 7. shimmer (loading skeleton) */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* 8. glowPulse (for active elements) */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(108, 99, 255, 0.15); }
  50%       { box-shadow: 0 0 24px rgba(108, 99, 255, 0.45); }
}

/* 9. typewriter cursor */
@keyframes typeCursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* 10. waveform bars */
@keyframes waveformBar1 {
  0%, 100% { height: 8px; }
  50%       { height: 28px; }
}
@keyframes waveformBar2 {
  0%, 100% { height: 16px; }
  50%       { height: 10px; }
}
@keyframes waveformBar3 {
  0%, 100% { height: 24px; }
  50%       { height: 6px; }
}
@keyframes waveformBar4 {
  0%, 100% { height: 12px; }
  50%       { height: 30px; }
}
@keyframes waveformBar5 {
  0%, 100% { height: 20px; }
  50%       { height: 8px; }
}

/* 11. ripple */
@keyframes ripple {
  0%   { transform: scale(0); opacity: 0.5; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* 12. spin */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 13. particleFloat */
@keyframes particleFloat {
  0%        { transform: translateY(0) rotate(0deg); opacity: 0.6; }
  33%       { transform: translateY(-12px) rotate(120deg); opacity: 1; }
  66%       { transform: translateY(-6px) rotate(240deg); opacity: 0.8; }
  100%      { transform: translateY(0) rotate(360deg); opacity: 0.6; }
}

/* 14. bounce (for AI thinking dots) */
@keyframes bounce {
  0%, 80%, 100% { transform: translateY(0); }
  40%           { transform: translateY(-8px); }
}

/* Extra: slideDown (for panels/bars) */
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Extra: slideUp (for dismissal) */
@keyframes slideUp {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-10px); }
}

/* Extra: panelSlideIn (right panel slide) */
@keyframes panelSlideIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* Extra: toastSlideIn */
@keyframes toastSlideIn {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* Extra: toastSlideOut */
@keyframes toastSlideOut {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(120%); opacity: 0; }
}

/* Extra: overlayFadeIn */
@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Extra: modalAppear */
@keyframes modalAppear {
  from { opacity: 0; transform: scale(0.92) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Extra: sidebarSlideIn (mobile) */
@keyframes sidebarSlideIn {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

/* Utility animation classes */
.animate-fadeIn     { animation: fadeIn var(--transition-base) ease both; }
.animate-slideInLeft  { animation: slideInLeft var(--transition-base) ease both; }
.animate-slideInRight { animation: slideInRight var(--transition-base) ease both; }
.animate-slideInUp  { animation: slideInUp var(--transition-base) ease both; }
.animate-spin       { animation: spin 1s linear infinite; }
.animate-breathe    { animation: breathe 2s ease-in-out infinite; }
.animate-pulse      { animation: pulse 1.5s ease-in-out infinite; }