#preloader {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, #120018, #0a0a12);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s ease;
  z-index: 999999;
}

/* container */
.moon-loader {
  text-align: center;
  color: #F7E7A1;
  font-family: 'Playfair Display', serif;
}

/* spinning moon */
.moon-spin {
  font-size: 55px;
  color: #b5b5b5;

  text-shadow: 
    0 0 10px #cfcfcf,
    0 0 25px rgba(212,175,55,0.4);

  animation: moonSpin 1.6s linear infinite, glow 2s ease-in-out infinite;
}

/* brand text */
.moon-loader p {
  margin-top: 12px;
  letter-spacing: 4px;
  font-size: 22px;
}

.moon-loader span {
  font-size: 12px;
  opacity: 0.7;
}

/* rotation */
@keyframes moonSpin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* soft luxury glow pulse */
@keyframes glow {
  0%, 100% {
    text-shadow: 
      0 0 8px #cfcfcf,
      0 0 20px rgba(212,175,55,0.2);
  }
  50% {
    text-shadow: 
      0 0 15px #ffffff,
      0 0 35px rgba(212,175,55,0.5);
  }
}

#sparkles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* each sparkle */
.sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, rgba(255,215,0,1), rgba(255,255,255,0.2));
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255,215,0,0.8),
              0 0 20px rgba(255,215,0,0.4);
  opacity: 0.8;
  animation: floatUp linear infinite;
}

@keyframes floatUp {
  0% {
    transform: translateY(0) scale(0.8);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translateY(-120vh) scale(1.2);
    opacity: 0;
  }
}




#header-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.header-sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, gold, transparent);
  border-radius: 50%;
  opacity: 0.6;
  animation: headerFloat 6s linear infinite;
  box-shadow: 0 0 8px gold;
}

@keyframes headerFloat {
  0% {
    transform: translateY(0px);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateY(-80px);
    opacity: 0;
  }
}