@keyframes welcome-modal-logo-animation {
  0% {
    transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
    transform-origin: 50% 0%;
    filter: blur(40px);
    opacity: 0;
  }
  75% {
    transform: translateY(0) scaleY(1) scaleX(1);
    transform-origin: 50% 50%;
    filter: blur(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-100px);
  }
}

@keyframes welcome-modal-name-animation {
  0% {
    opacity: 0;
    width: 0;
    transform-origin: left center;
  }
  75% {
    opacity: 0;
    width: 0;
    transform: translateX(100px);
  }
  100% {
    opacity: 1;
    width: 162px;
    transform: translateX(17px);
  }
}

.welcome-modal {
  &:not(&--visible) {
    transition: none !important;
    opacity: 1 !important;
  }

  user-select: none;
  cursor: default;

  &__logo {
    position: absolute;
    left: calc(50% - 25px);
    top: calc(50% - 25px);
    background-size: 46px;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("images/logo.png");
    width: 50px;
    height: 50px;
    animation: welcome-modal-logo-animation 2s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
  }

  &__name {
    direction: rtl;
    overflow: hidden;
    font-size: 42px;
    font-family: var(--title-font-family);
    font-weight: 800;
    position: absolute;
    white-space: nowrap;
    top: calc(50% - 22px);
    left: calc(50% - 85px);
    animation: welcome-modal-name-animation 2s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
  }
}
