@keyframes led-loading {
  0%,
  3% {
    opacity: 1;
  }
  7% {
    opacity: 0.78;
  }
  13% {
    opacity: 0.3;
  }
  21%,
  100% {
    opacity: 0;
  }
}

@keyframes appear {
  from {
    opacity: 0;
    transform: scale(0.88);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes background-fall {
  from {
    transform: translate3d(0, -24px, 0);
  }
  to {
    transform: translate3d(0, calc(100svh + 24px), 0);
  }
}

@keyframes background-drift {
  from {
    transform: translate3d(calc(100vw + 24px), 0, 0);
  }
  to {
    transform: translate3d(calc(-100% - 24px), 0, 0);
  }
}

@keyframes heartbeat {
  0%,
  40%,
  100% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.055);
  }
  20% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.035);
  }
}

@keyframes orbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes avatar-open {
  0%,
  6% {
    transform: var(--opening-transform, scale(1));
  }
  23% {
    transform: scale(0.96);
  }
  38% {
    transform: scale(0.93);
  }
  58% {
    transform: scale(1.015);
  }
  80% {
    transform: scale(0.997);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes border-open {
  0%,
  8% {
    inset: var(--opening-inset, 0%);
    opacity: 1;
  }
  25% {
    inset: 0%;
    opacity: 0;
  }
  58% {
    inset: -20%;
    opacity: 0;
  }
  92%,
  100% {
    inset: -50%;
    opacity: 1;
  }
}

@keyframes liquid-envelope {
  0%,
  12% {
    opacity: 0;
    animation-timing-function: ease-in-out;
  }
  32%,
  64% {
    opacity: 1;
    animation-timing-function: ease-in-out;
  }
  90%,
  100% {
    opacity: 0;
  }
}

@keyframes liquid-return-envelope {
  0% {
    opacity: 0;
    animation-timing-function: ease-in-out;
  }
  20%,
  85% {
    opacity: 1;
    animation-timing-function: ease-in-out;
  }
  100% {
    opacity: 0;
  }
}

@keyframes liquid-restoring-envelope {
  0% {
    opacity: 0;
    animation-timing-function: ease-in-out;
  }
  15%,
  80% {
    opacity: 1;
    animation-timing-function: ease-in-out;
  }
  100% {
    opacity: 0;
  }
}

@keyframes satellite-hover-loader {
  to {
    transform: rotate(360deg);
  }
}
