/* ********************************* LOADER *********************************** */
/* Preloader base */
.container-preloader {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9999;
}
.container-preloader .animation-preloader { position: absolute; z-index: 100; }
/* Spinner Loading */
.container-preloader .animation-preloader .spinner {
  animation: spinner 1s infinite linear;
  border-radius: 50%;
  border: 10px solid rgba(255, 255, 255, 0.15);
  border-top-color: #d7b981; /* keep explicit */
  height: 9em;
  margin: 0 auto 3.5em auto;
  width: 9em;
}
/* Loading text */
.container-preloader .animation-preloader .txt-loading {
  font-family: 'Playfair Display', serif;
  text-align: center;
  user-select: none;
  font-size: 68px;
  color: #d7b981;
}
.container-preloader .animation-preloader .txt-loading .characters:before {
  animation: characters 4s infinite;
  color: #d7b981;
  content: attr(preloader-text);
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transform: rotateY(-90deg);
}
.container-preloader .animation-preloader .txt-loading .characters {
  color: rgba(255, 255, 255, 0.2);
  position: relative;
}
.container-preloader .animation-preloader .txt-loading .characters:nth-child(2):before { animation-delay: 0.2s; }
.container-preloader .animation-preloader .txt-loading .characters:nth-child(3):before { animation-delay: 0.4s; }
.container-preloader .animation-preloader .txt-loading .characters:nth-child(4):before { animation-delay: 0.6s; }
.container-preloader .animation-preloader .txt-loading .characters:nth-child(5):before { animation-delay: 0.8s; }
.container-preloader .animation-preloader .txt-loading .characters:nth-child(6):before { animation-delay: 1s; }
.container-preloader .animation-preloader .txt-loading .characters:nth-child(7):before { animation-delay: 1.2s; }

/* Curtains */
.container-preloader .loader-section {
  background-color: #000;
  height: 100%;
  position: fixed;
  top: 0;
  width: calc(50% + 1px);
}
.container-preloader .loader-section.section-left { left: 0; }
.container-preloader .loader-section.section-right { right: 0; }

/* Fade effect on loading animation */
.loaded .animation-preloader {
  opacity: 0;
  transition: 0.3s ease-out;
}

/* Curtain effect */
.loaded .loader-section.section-left {
  transform: translateX(-101%);
  transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1.000);
}
.loaded .loader-section.section-right {
  transform: translateX(101%);
  transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1.000);
}

/* Keyframes */
@keyframes spinner { to { transform: rotateZ(360deg); } }
@keyframes characters {
  0%, 75%, 100% { opacity: 0; transform: rotateY(-90deg); }
  25%, 50% { opacity: 1; transform: rotateY(0deg); }
}

/* Responsiveness */
@media screen and (max-width: 767px) {
  .container-preloader .animation-preloader .spinner { height: 8em; width: 8em; }
  .container-preloader .animation-preloader .txt-loading {
    font: bold 3.5em 'Playfair Display', serif;
  }
}
@media screen and (max-width: 500px) {
  .container-preloader .animation-preloader .spinner { height: 7em; width: 7em; }
  .container-preloader .animation-preloader .txt-loading {
    font: bold 2em 'Playfair Display', serif;
    font-size: 29px;
  }
}

/* Keep the page from scrolling while the preloader is visible */
body.no-scroll { overflow: hidden; }
/* Ensure the preloader covers the whole viewport */
#preloader {
  position: fixed;
  inset: 0;
  background: #000; /* fallback in case curtains transition */
  z-index: 9998;
}