/*  loading-screen section start here */

.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(120deg, #0f0f0f, #1a1a1a);
  background-image: repeating-radial-gradient(
      circle at 30% 30%,
      rgba(255, 255, 255, 0.01) 0,
      rgba(255, 255, 255, 0.01) 1px,
      transparent 1px,
      transparent 100%
    ),
    radial-gradient(circle, #1e1e1e 0%, #000000 100%);
  background-size: cover;
  z-index: 9999;
}


.loader {
  font-size: 5em;
  font-weight: 900;
}
.loader > * {
  font-size: clamp(32px, 10vw, 72px);
  background: linear-gradient(135deg, rgb(246, 78, 183), rgb(3, 196, 254));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.loader span {
  display: inline-flex;
}
.loader span:nth-child(2) {
  letter-spacing: -1em;
  overflow: hidden;
  animation: reveal 2000ms cubic-bezier(0.645, 0.045, 0.355, 1) infinite
    alternate;
}
.loading-screen.fade-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s ease;
}
@keyframes reveal {
  0%,
  100% {
    opacity: 0.5;
    letter-spacing: -1em;
  }
  50% {
    opacity: 1;
    letter-spacing: 0em;
  }
}

@media (max-width: 768px) {
  .loader {
    font-size: 3em;
  }

  .loader > * {
    font-size: 36px;
  }
}

@media (max-width: 480px) {
  .loader {
    font-size: 2em;
  }

  .loader > * {
    font-size: 28px;
  }
}

/*  loading-screen section end here */