/* ==========================================================================
   SaaSHut - Ultra-Premium Preloader System (2026 Next-Gen Edition)
   ========================================================================== */

#saashutPreloader,
.saashut-preloader {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999999 !important;
  background: #070331 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: scale(1);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), 
              visibility 0.65s ease, 
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

#saashutPreloader.loaded,
.saashut-preloader.loaded {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: scale(1.05) !important;
}

#saashutPreloader.loaded .preloader-content,
.saashut-preloader.loaded .preloader-content {
  opacity: 0 !important;
  transform: scale(0.92) !important;
  transition: opacity 0.4s ease, transform 0.4s ease !important;
}

/* Ambient Radial Glow Backdrop */
.preloader-backdrop-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(97, 82, 253, 0.38) 0%, rgba(127, 212, 41, 0.18) 46%, transparent 72%);
  filter: blur(60px);
  animation: preloaderGlowPulse 2.6s infinite alternate ease-in-out;
  pointer-events: none;
}

/* Central Content Stack */
.preloader-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  text-align: center;
}

/* Concentric Dual-Spinning Rings & Center Logo */
.preloader-logo-ring {
  position: relative;
  width: 104px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Clockwise Primary Neon Gradient Spinner */
.preloader-outer-spinner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3.5px solid transparent;
  border-top-color: #6152FD;
  border-right-color: #7FD429;
  border-bottom-color: rgba(97, 82, 253, 0.3);
  border-left-color: transparent;
  animation: preloaderSpin 1.1s linear infinite;
  filter: drop-shadow(0 0 14px rgba(97, 82, 253, 0.65));
}

/* Counter-Clockwise Secondary Dashed Accent Ring */
.preloader-outer-spinner-reverse {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px dashed rgba(127, 212, 41, 0.55);
  animation: preloaderSpinReverse 3s linear infinite;
  filter: drop-shadow(0 0 8px rgba(127, 212, 41, 0.4));
}

/* Outer Soft Glow Pulse */
.preloader-logo-ring::after {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  animation: preloaderRingPulse 2s ease-in-out infinite;
}

/* Frosted Glass Badge with SVG Logo */
.preloader-inner-badge {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.25);
  animation: preloaderBadgePulse 2.2s ease-in-out infinite;
}

.preloader-inner-badge svg {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

/* SaaSHut Typography */
.preloader-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.preloader-brand-name {
  font-size: 24px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.5px;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
  background: linear-gradient(135deg, #FFFFFF 60%, rgba(255, 255, 255, 0.7) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.preloader-brand-tagline {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-family: 'Outfit', -apple-system, sans-serif;
  display: flex;
  align-items: center;
  gap: 6px;
}

.preloader-dots-pulse span {
  animation: preloaderDotBlink 1.4s infinite;
  display: inline-block;
}
.preloader-dots-pulse span:nth-child(2) { animation-delay: 0.2s; }
.preloader-dots-pulse span:nth-child(3) { animation-delay: 0.4s; }

/* Dynamic Progress Bar */
.preloader-bar-wrap {
  width: 160px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
  margin-top: 4px;
}

.preloader-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  border-radius: 99px;
  background: linear-gradient(90deg, #6152FD, #7FD429);
  box-shadow: 0 0 14px rgba(127, 212, 41, 0.85);
  animation: preloaderBarSlide 1.35s ease-in-out infinite;
}

/* Keyframe Animations */
@keyframes preloaderSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes preloaderSpinReverse {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}

@keyframes preloaderBadgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@keyframes preloaderGlowPulse {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.65; }
  100% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

@keyframes preloaderRingPulse {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.1); opacity: 0.7; }
}

@keyframes preloaderBarSlide {
  0% { left: -50%; width: 35%; }
  50% { left: 25%; width: 60%; }
  100% { left: 100%; width: 35%; }
}

@keyframes preloaderDotBlink {
  0%, 20% { opacity: 0.2; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
  80%, 100% { opacity: 0.2; transform: translateY(0); }
}