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

  to {
    opacity: 1;
  }
}

@keyframes fade-zoom-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fade-zoom-out {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.9);
  }
}

@keyframes fade-slide-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(5px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes fade-slide-out {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  to {
    opacity: 0;
    transform: scale(0.95) translateY(5px);
  }
}

@keyframes fade-blur-in {
  from {
    opacity: 0;
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
  }

  to {
    opacity: 1;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}

@keyframes fade-blur-out {
  from {
    opacity: 1;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  to {
    opacity: 0;
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
  }
}

@keyframes sse-dataupdate {
  0% {
    background: #0f0;
  }
  10% {
    background: radial-gradient(at 60% 60%, transparent 0%, transparent 50%, #0f0 70%, #0f0 100%);
  }
  90% {
    background: radial-gradient(at 60% 60%, transparent 0%, transparent 50%, #0f0 70%, #0f0 100%);
    transform: rotate(720deg);
  }
  100% {
    background: #0f0;
    transform: rotate(720deg);
  }
}