/* NOTE - update accordingly: src/primitives/AnimatedRender.res */

@keyframes fadeTranslation {
  0% {
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transform: translate3d(0, -0.75rem, 0);
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeBubbleTranslation {
  0% {
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transform: translate3d(0, -0.5rem, 0) scale3d(0.97, 0.97, 0.97);
  }
  70% {
    transform: scale3d(1.003, 1.004, 1);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes fadeBubbleTranslationFromLeft {
  0% {
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transform: translate3d(-0.35rem, 0, 0) scale3d(0.94, 0.99, 1);
  }
  70% {
    transform: scale3d(1.005, 1.002, 1);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes fadeBubbleTranslationFromRight {
  0% {
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transform: translate3d(0.35rem, 0, 0) scale3d(0.94, 0.99, 1);
  }
  70% {
    transform: scale3d(1.005, 1.002, 1);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes fadeBubbleTranslationFromBottom {
  0% {
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transform: translate3d(0, 0.35rem, 0) scale3d(0.99, 0.94, 1);
  }
  70% {
    transform: scale3d(1.002, 1.005, 1);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes fadePopinTranslation {
  0% {
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transform: translate3d(0, -0.5rem, 0) scale3d(0.97, 0.97, 0.97);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

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

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

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}