@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes scaleOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}

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

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes dots {
  0%, 33% { content: '.'; }
  34%, 66% { content: '..'; }
  67%, 100% { content: '...'; }
}

@keyframes pulse-subtle {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  80% {
    opacity: 0.85;
    transform: scale(1.03);
  }
}

@keyframes animate-marquee {
  0%, 20%   { transform: translateX(0); }
  80%, 100%  { transform: translateX(var(--marquee-offset)); }
}

@keyframes animate-permanent-marquee {
  0% { transform: translateX(calc(var(--marquee-offset) - 100%)); }
  100% { transform: translateX(-100%); }
}

@keyframes animate-slideX-in {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}

@keyframes animate-slideX-out {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@keyframes animate-slideY-in {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(0); }
}

@keyframes animate-slideY-out {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}