/* ═══════════════════════════════════════════════════════════════
   HAMOODLEY PAGE LOADER — Logo + Spinning Ring + Progress Bar
   Matches the mining site's premium loading experience.
   ═══════════════════════════════════════════════════════════════ */

#page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #050606;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  transition: opacity 0.8s ease, visibility 0.8s;
}
#page-loader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Logo mark with spinning ring */
#page-loader .loader-mark {
  position: relative;
  width: clamp(112px, 15vw, 148px);
  height: clamp(112px, 15vw, 148px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: loaderFadeIn 0.9s 0.15s cubic-bezier(0.16,1,0.3,1) both;
}

#page-loader .loader-logo-img {
  position: relative;
  z-index: 2;
  height: clamp(58px, 8.5vw, 84px);
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 14px 34px rgba(200,150,12,0.28));
  opacity: 0.9;
}

/* Spinning ring */
#page-loader .loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(200,150,12,0.16);
  animation: loaderRingSpin 1.6s linear infinite;
}
#page-loader .loader-ring::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(214,174,73,0.85) 95deg, rgba(245,216,122,0.9) 135deg, transparent 205deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  pointer-events: none;
}
#page-loader .loader-ring::after {
  content: '';
  position: absolute;
  top: -2.5px;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: #f5d87a;
  box-shadow: 0 0 14px rgba(214,174,73,0.95);
  pointer-events: none;
}

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

/* Logo text */
#page-loader .loader-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(20px, 3.4vw, 30px);
  font-weight: 700;
  color: #C8960C;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-align: center;
  animation: loaderFadeIn 0.9s 0.32s cubic-bezier(0.16,1,0.3,1) both;
}

/* Progress bar */
#page-loader .loader-bar-wrap {
  width: min(230px, 58vw);
  height: 1px;
  background: rgba(200,150,12,0.16);
  border-radius: 1px;
  margin-top: 20px;
  overflow: hidden;
}
#page-loader .loader-bar {
  height: 100%;
  background: #C8960C;
  width: 0;
  animation: loadBar 2.4s 0.5s cubic-bezier(0.16,1,0.3,1) forwards;
}

@keyframes loadBar { to { width: 100%; } }

/* Subtitle */
#page-loader .loader-sub {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(200,150,12,0.55);
  text-align: center;
  margin-top: 16px;
  animation: loaderFadeIn 0.9s 0.5s cubic-bezier(0.16,1,0.3,1) both;
}

@keyframes loaderFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Force hide */
#page-loader.force-hide {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  display: none !important;
}