/* ============================================================
   ANIMATIONS.CSS — Keyframe animaties
   ============================================================ */

@keyframes upload {
  0% {
    transform: translate(0, 5px);
  }
  100% {
    transform: translate(0, -5px);
  }
}

@keyframes download {
  0% {
    transform: translate(0, -5px);
  }
  100% {
    transform: translate(0, 5px);
  }
}

@keyframes fadein {
  from {
    top: 0;
    opacity: 0;
  }
  to {
    top: 50px;
    opacity: 1;
  }
}

@keyframes fadeout {
  from {
    top: 50px;
    opacity: 1;
  }
  to {
    top: 0;
    opacity: 0;
  }
}

@keyframes fallin {
  from {
    top: 0;
  }
  to {
    top: 30px;
  }
}

@keyframes fallout {
  from {
    top: 30px;
  }
  to {
    top: 0;
  }
}

@keyframes backgroundColors {
  0% {
    background-color: var(--brand-teal);
  }
  50% {
    background-color: var(--brand-teal-light);
  }
  100% {
    background-color: var(--brand-teal);
  }
}

@keyframes backgroundHighlight {
  from {
    background-color: var(--color-surface);
  }
  to {
    background-color: var(--color-accent-subtle);
  }
}

@keyframes fadeOutIn {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeSlide {
  from {
    background-color: var(--color-accent-subtle);
    opacity: 0;
    transform: translate(30px, 0);
  }
  to {
    background-color: var(--color-surface);
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes lightUp {
  0% {
    background-color: var(--color-bg-muted);
    color: var(--color-accent-fg);
    opacity: 0;
  }
  75% {
    background-color: var(--color-bg-muted);
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes closeFadeIn {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--color-accent);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.33);
  }
  80%,
  100% {
    opacity: 0;
  }
}

@keyframes show {
  0% {
    opacity: 0.5;
    transform: scale(0);
  }
}

@keyframes slideInFromLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}