@font-face {
  font-family: "Zain";
  src: url("/fonts/Zain-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

#zaina-splash {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #06091a;
  transition: opacity 0.5s ease;
}

#zaina-splash .zs-nebula {
  position: absolute;
  inset: 0;
  background: url("/loading/nebula.webp") center / cover no-repeat, #06091a;
  filter: saturate(1.05) brightness(0.92);
}

#zaina-splash .zs-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 46%, rgba(6, 9, 26, 0.62) 0%, rgba(6, 9, 26, 0.28) 42%, rgba(6, 9, 26, 0) 72%),
    linear-gradient(180deg, rgba(6, 9, 26, 0.35) 0%, rgba(6, 9, 26, 0) 30%, rgba(6, 9, 26, 0) 70%, rgba(6, 9, 26, 0.5) 100%);
}

#zaina-splash .zs-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.75rem, 5vh, 3.25rem);
  text-align: center;
}

#zaina-splash .zs-wordmark {
  font-family: "Zain", system-ui, -apple-system, sans-serif;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #ffffff;
  font-size: clamp(3.2rem, 11vw, 7rem);
  text-shadow: 0 2px 40px rgba(10, 20, 60, 0.55);
}

#zaina-splash .zs-ai {
  background-image: linear-gradient(180deg, #4fbffe 0%, #6e84ec 52%, #7c55d3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #4fbffe;
}

#zaina-splash .zs-spiral {
  width: clamp(72px, 9vw, 104px);
  aspect-ratio: 1;
  background: url("/loading/spiral.webp") center / contain no-repeat;
  mix-blend-mode: screen;
  animation: zaina-splash-spin 1.7s linear infinite;
}

@keyframes zaina-splash-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #zaina-splash {
    transition: none;
  }

  #zaina-splash .zs-spiral {
    animation: none !important;
  }
}