/* From Uiverse.io by JkHuger */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #121a1b;
  /* Sleek dark theme */
  z-index: 9999999 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease-out;
}

#preloader.hide {
  opacity: 0;
  pointer-events: none;
}

.loader-wrap {
  position: relative;
  width: 200px;
  height: 200px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  background-clip: padding-box;
  width: 200px;
  height: 200px;
  border-radius: 100px;
  border: 4px solid rgba(255, 255, 255, 0.05);
  -webkit-mask: linear-gradient(rgba(0, 0, 0, 0.1), #000000 90%);
  transform-origin: 50% 60%;
  transform: perspective(200px) rotateX(66deg);
  animation: spinner-wiggle 1.2s infinite;
}

.loader-logo {
  position: absolute;
  width: 80px;
  height: 80px;
  object-fit: contain;
  /* Stands completely vertical and upright facing the viewer (neutralizing 3D rotation) */
  transform: none;
  animation: logo-pulse 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 15px rgba(42, 211, 216, 0.4));
  z-index: 10;
}

.loader:before,
.loader:after {
  content: "";
  position: absolute;
  margin: -4px;
  box-sizing: inherit;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  opacity: .05;
  border: inherit;
  border-color: transparent;
  animation: spinner-spin 1.2s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, spinner-fade 1.2s linear infinite;
}

.loader:before {
  border-top-color: #2ad3d8;
  /* Phoenix primary color */
}

.loader:after {
  border-top-color: #d96c29;
  /* Phoenix secondary/accent color */
  animation-delay: 0.3s;
}

@keyframes spinner-spin {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes spinner-fade {
  20% {
    opacity: .15;
  }

  40% {
    opacity: 1;
  }

  60% {
    opacity: .15;
  }
}

@keyframes spinner-wiggle {
  30% {
    transform: perspective(200px) rotateX(66deg);
  }

  40% {
    transform: perspective(200px) rotateX(65deg);
  }

  50% {
    transform: perspective(200px) rotateX(68deg);
  }

  60% {
    transform: perspective(200px) rotateX(64deg);
  }
}

@keyframes logo-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.85;
  }

  50% {
    transform: scale(1.15);
    opacity: 1;
    filter: drop-shadow(0 0 25px rgba(42, 211, 216, 0.7));
  }
}

.loading-text {
  font-family: "Cairo", sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: 4px;
  direction: ltr;
  color: #2ad3d8;
  margin-top: 30px;
  text-shadow: 0 0 10px rgba(42, 211, 216, 0.3);
  animation: text-blink 1.5s ease-in-out infinite;
}

@keyframes text-blink {

  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}