.ai-loading-starshine {
  --ai-loading-top: 0%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  overflow: hidden;
  backdrop-filter: blur(2px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.ai-loading-starshine.has-status {
  --ai-loading-top: -125%;
}

.ai-loading-starshine .shine {
  display: block;
  width: 104px;
  height: 110px;
  overflow: hidden;
  z-index: 2;
  color: transparent;
}

.ai-loading-starshine .shine::after {
  content: '';
  content: url('/img/ai-loading.svg');
  animation: ai-loading-spin 2.5s linear infinite;
  transform-origin: center;
  width: 100%;
  height: 100%;
  display: block;
}

.ai-loading-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(var(--ai-loading-top));
}

.ai-loading-status-text {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.ai-loading-status-text .meta-icon svg {
  display: block;
  width: 24px;
  height: 24px;
}

.ai-loading-status-text .meta-text {
  color: var(--White, #FFF);
  text-align: center;
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 150% */
  white-space: nowrap;
}

@keyframes ai-loading-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.rec-ai-loading {
  animation: pulsate-blur 2s infinite ease-in-out;
}

@keyframes pulsate-blur {
  0%, 100% {
    filter: blur(1px);
  }
  50% {
    filter: blur(4px);
  }
}