/* ⏳ SITE LOADER OVERLAY */
#siteLoader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #111; /* Dark screen */
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 2s ease-out;
    pointer-events: all;
}

#siteLoader.is-hidden {
    opacity: 0;
    pointer-events: none;
}

#siteLoader.content-hidden .loader-wrapper {
    opacity: 0;
}

/* ⏳ LOADER WRAPPER (Positioning & Text) */
.loader-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateY(-10%); /* 10% higher up the page */
    transition: opacity 0.5s ease;
}

.loader-text {
    margin-top: 25px;
    color: #fff;
    font-family: sans-serif;
    font-weight: 700;
    letter-spacing: 0.2em;
    font-size: 0.85rem;
    animation: loaderPulse 1.5s ease-in-out infinite;
}

.loader-percent {
    margin-top: 15px;
    color: rgba(255, 255, 255, 0.8);
    font-family: sans-serif;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums; /* Prevents jitter as numbers change */
}

/* ⏳ PRELOADER DEMO 1 (Adapted) */
.preloader1 {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    perspective: 700px;
}

.preloader1 .loader {
  /* ✅ make sure the ring actually has a size */
  width: 140px;
  height: 140px;

  margin: 5px;
  border-radius: 50%;
  position: relative;

  /* ✅ required for gradient border */
  border: 4px solid transparent;

  /* ✅ gradient border + dark inner */
  background-image:
    linear-gradient(#111, #111),
    linear-gradient(135deg,
      #bf953f 0%,
      #fcf6ba 25%,
      #b38728 50%,
      #fcf6ba 75%,
      #aa771c 100%
    );

  /* ✅ tells browser what each layer should cover */
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;

  display: flex;
  justify-content: center;
  align-items: center;

  transform-style: preserve-3d;
}

.preloader1 .loader-inner-1 { animation: change_first_circle 2s ease-in-out infinite; }
.preloader1 .loader-inner-2 { animation: change_second_circle 2s ease-in-out infinite; }
.preloader1 .loader-inner-3 { width: 100px; height: 100px; animation: change_last_circle 3s linear infinite; }

@keyframes loaderPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

@keyframes change_first_circle { 50% { transform: rotateX(360deg) scale(.8); } }
@keyframes change_second_circle { 50% { transform: rotateY(360deg) scale(.8); } }
@keyframes change_last_circle { 50% { transform: rotateX(360deg) scale(.8); } }