body {
  margin: 0;
  background-color: #0A0304;
  color: #F8F9FA;
}
body:has(.hoh-loader) {
  overflow: hidden;
}
.hoh-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: radial-gradient(circle at 50% 50%, #160609 0%, #0A0304 70%, #040102 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
}

/* Elegant Monogram with Floating Animation */
.hoh-brand-monogram {
  position: relative;
  width: 90px; height: 90px;
  display: flex; align-items: center; justify-content: center;
  animation: hoh-float 4s ease-in-out infinite;
  z-index: 2;
}
.hoh-monogram-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: rgba(212, 168, 67, 0.2);
  border-bottom-color: rgba(212, 168, 67, 0.2);
  animation: hoh-spin-slow 16s linear infinite;
}
.hoh-monogram-circle {
  width: 76px; height: 76px;
  border-radius: 50%;
  border: 1px solid rgba(212, 168, 67, 0.35);
  background: rgba(15, 4, 6, 0.8);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
.hoh-monogram-letter {
  font-family: 'Cinzel', 'Playfair Display', serif;
  font-size: 44px; font-weight: 600;
  background: linear-gradient(135deg, #FFE8A3 0%, #D4A843 50%, #A67924 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.4);
  user-select: none; display: block; line-height: 1; margin-top: -2px;
}

/* Beautiful Animated Silk Thread Wave */
.hoh-thread-wrap {
  margin-top: 18px;
  margin-bottom: 16px;
  height: 20px;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.hoh-thread-path {
  animation: hoh-thread-flow 3s linear infinite;
}

/* Brand Name with Stately Reveal */
.hoh-brand-title {
  font-family: 'Cinzel', 'Playfair Display', serif;
  font-size: 18px; font-weight: 700; color: #D4A843;
  text-transform: uppercase; text-align: center;
  letter-spacing: 0.28em; margin: 0;
  animation: hoh-fade-in-up 0.8s ease both;
  z-index: 2; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Subtitle */
.hoh-brand-tagline {
  font-family: 'Poppins', sans-serif;
  font-size: 8px; font-weight: 500; letter-spacing: 0.45em;
  color: rgba(212, 168, 67, 0.5); text-transform: uppercase; text-align: center;
  margin: 8px 0 24px 0;
  animation: hoh-fade-in-up 0.8s ease 0.2s both;
  z-index: 2;
}

/* Premium Progress Bar */
.hoh-progress-bar-wrap {
  width: 160px; height: 1.5px; background-color: rgba(212, 168, 67, 0.08);
  border-radius: 1px; overflow: hidden;
  animation: hoh-fade-in-up 0.8s ease 0.4s both; z-index: 2;
  position: relative;
}
.hoh-progress-bar-fill {
  height: 100%; background: linear-gradient(90deg, #8B1A2B, #D4A843, #FFEAA8, #D4A843);
  background-size: 300% 100%;
  animation: hoh-bar-fill 4s cubic-bezier(0.1, 0.8, 0.1, 1) 0.5s both;
  position: relative;
}
.hoh-progress-bar-shine {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
  animation: hoh-shimmer-sweep 1.8s ease-in-out infinite;
}

/* Keyframes */
@keyframes hoh-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes hoh-spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes hoh-thread-flow {
  to { stroke-dashoffset: -120; }
}
@keyframes hoh-fade-in-up {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes hoh-bar-fill {
  0% { width: 0%; }
  30% { width: 45%; }
  70% { width: 75%; }
  100% { width: 92%; }
}
@keyframes hoh-shimmer-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}