/* ==========================================================================
   Site Preloader Stylesheet
   ========================================================================== */

body.preloader-active {
  overflow: hidden !important;
  height: 100vh !important;
}

#site-preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0b0f12;
  /* Dark background matching theme */
  z-index: 99999;
  /* Higher than header and all overlays */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.6s;
}

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

.preloader-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preloader-logo-wrapper {
  position: relative;
  width: 560px;
  /* Optimized for loader logo aspect ratio (7.56) */
  height: 74px;
  /* Adjusted to match width to prevent scale skewing */
  max-width: 85%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preloader-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Layers: Background Outline vs Front Filled */
.logo-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Outline Layer Style */
.logo-outline .logo-symbol-path {
  fill: none !important;
  stroke: rgba(193, 154, 107, 0.25) !important;
  /* Gold outline transparent */
  stroke-width: 1px;
}

.logo-outline .logo-text-group path {
  fill: none !important;
  stroke: rgba(255, 255, 255, 0.15) !important;
  /* White outline transparent */
  stroke-width: 1px;
}

/* Filled Layer Style (Clipping from bottom to top) */
.logo-filled {
  clip-path: inset(100% 0 0 0);
  /* Start fully clipped (hidden) */
  -webkit-clip-path: inset(100% 0 0 0);
  transition: clip-path 0.05s linear, -webkit-clip-path 0.05s linear;
  /* Smooth progress link */
}

.logo-filled .logo-symbol-path {
  fill: #c19a6b !important;
  /* Theme gold */
}

.logo-filled .logo-text-group path {
  fill: #ffffff !important;
  /* Solid white text */
}

/* Bottom Right Percentage Counter */
.preloader-percentage-wrap {
  position: absolute;
  right: 60px;
  bottom: 40px;
  font-family: 'Inter', sans-serif;
  font-size: 5rem;
  font-weight: 300;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  display: flex;
  align-items: baseline;
}

.preloader-percentage-symbol {
  font-size: 0.55em;
  color: rgba(255, 255, 255, 0.85);
  margin-left: 2px;
}

/* Responsive adjustment for mobile screen dimensions */
@media (max-width: 767.98px) {
  .preloader-logo-wrapper {
    width: 340px;
    /* Increased size for wider logo */
    height: 45px;
    /* Adjusted for aspect ratio */
  }

  .preloader-percentage-wrap {
    right: 30px;
    bottom: 30px;
    font-size: 3.5rem;
  }
}