/* preloader.css - Premium Glassmorphic Page Loader */

#chatxb-preloader {
  position: fixed;
  inset: 0;
  background: #020403; /* Matches the dark background theme color */
  z-index: 100000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  overflow: hidden;
  pointer-events: none !important;
  animation: auto-fadeout-preloader 0.3s ease 0.4s forwards;
}

#chatxb-preloader.fade-out {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@keyframes auto-fadeout-preloader {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* Background Glowing Blurs */
.preloader-glow {
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 242, 254, 0.15) 0%, transparent 70%);
  filter: blur(40px);
  animation: float-glow 6s infinite ease-in-out;
}

.preloader-glow-2 {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 172, 254, 0.1) 0%, transparent 70%);
  filter: blur(50px);
  animation: float-glow 8s infinite ease-in-out reverse;
}

@keyframes float-glow {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(20px, -20px) scale(1.15);
  }
}

/* Spinner Container */
.preloader-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
}

/* Glowing Logo Outer Ring */
.logo-ring {
  position: relative;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Beautiful Modern Neon Spiral Spinner */
.logo-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, #00f2fe, #4facfe, transparent, #00f2fe);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: rotate-ring 1.8s linear infinite;
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.4);
}

@keyframes rotate-ring {
  to {
    transform: rotate(360deg);
  }
}

/* Inner Brand Favicon Bubble Pulsing */
.preloader-logo-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  animation: pulse-logo 2s infinite ease-in-out;
}

@keyframes pulse-logo {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 5px rgba(0, 242, 254, 0.4));
  }
  50% {
    transform: scale(1.08);
    filter: drop-shadow(0 0 15px rgba(0, 242, 254, 0.7));
  }
}

/* Glowing Loading Text */
.preloader-text {
  margin-top: 24px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 2px;
  color: #ffffff;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(0, 242, 254, 0.5);
  animation: text-glow 2s infinite ease-in-out;
}

@keyframes text-glow {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

/* Smooth Progress Bar */
.preloader-bar-wrap {
  margin-top: 16px;
  width: 140px;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.preloader-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #00f2fe, #4facfe);
  box-shadow: 0 0 8px #00f2fe;
  animation: fill-bar 1.5s ease-in-out infinite;
}

@keyframes fill-bar {
  0% {
    width: 0%;
    transform: translateX(-100%);
  }
  50% {
    width: 70%;
    transform: translateX(0);
  }
  100% {
    width: 100%;
    transform: translateX(100%);
  }
}