/* ==========================================================================
   Animations — keyframes для микроанимаций (ripple, fadeIn, skeleton)
   ========================================================================== */

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

@keyframes mc-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mc-fade-in-down {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mc-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes mc-scale-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes mc-ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

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

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

@keyframes mc-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

@keyframes mc-bounce-subtle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* Utility animation classes */
.anim-fade-in     { animation: mc-fade-in var(--dur-base) var(--ease-out) both; }
.anim-fade-in-up  { animation: mc-fade-in-up var(--dur-slow) var(--ease-out) both; }
.anim-scale-in    { animation: mc-scale-in var(--dur-base) var(--ease-out) both; }
.anim-pulse       { animation: mc-pulse 2s ease-in-out infinite; }