.loading__dialog {
  width: 100dvw !important;
  height: 100dvh !important;
  inset: 0 !important;
  z-index: var(--z-loading);
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading__dialog-titlebar {
  display: none;
}

.loading {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 !important;
  overflow: hidden !important;
}

.loading__fade-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation:
    loadingOpacity 450ms cubic-bezier(0, 0.02, 0, 1),
    loadingScale 800ms cubic-bezier(0.22, 0.61, 0.35, 1);
}

.loading__image {
  width: 256px;
  height: 256px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading__text {
  padding: 0;
  margin: 0;
}

.loading__spinner {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(45deg);
}

.loading__airplane {
  width: 164px;
  height: 164px;
  animation: airplaneRotate 2s linear infinite;

  & > img {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -58%);
    z-index: 1;
  }
}

.loading__dot {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%);
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background-image: linear-gradient(
    90deg,
    var(--Brand-Primary-Blue-300) 0%,
    #a6abe1 30%,
    #ddb5e2 60%,
    var(--Brand-Secondary-Pink-200) 100%
  );
  background-size: 256px 256px;
  animation:
    contrailsScale 2s linear infinite,
    contrailsColor 2s linear infinite;
}

@keyframes loadingOpacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes loadingScale {
  from {
    transform: scale(0.8);
  }
  to {
    transform: scale(1);
  }
}

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

@keyframes contrailsScale {
  0% {
    transform: scale(0);
  }
  2% {
    transform: scale(0);
  }
  10% {
    transform: scale(1.5);
  }
  80%,
  100% {
    transform: scale(0%);
  }
}

@keyframes contrailsColor {
  0% {
    background-position-x: 25%;
  }
  12.5% {
    background-position-x: 0;
  }
  62.5% {
    background-position-x: 100%;
  }
  100% {
    background-position-x: 25%;
  }
}