/* ==========================================================================
   LMW Travel — Loading Screen
   Full-viewport loader with branded logo, progress bar, and smooth reveal.
   ========================================================================== */

/* ---- Shared backdrop (index): continuous with explore gallery bg ---- */

.page-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      rgba(26, 23, 19, 0.30),
      rgba(26, 23, 19, 0.30)
    ),
    url('../assets/images/background off canvas mnue 2.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---- Loader Shell ---- */

.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

/* ---- Curtain (centers loader UI; bg lives on .page-backdrop so it stays fixed) ---- */

.loader__curtain {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: transparent;
  overflow: hidden;
  pointer-events: auto;
}

/* ---- Centered Content ---- */

.loader__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

/* ---- Logo Title ---- */

.loader__title {
  font-family: var(--font-brand);
  font-weight: 500;
  font-size: 1.8rem;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  text-transform: uppercase;
  color: var(--color-cream);
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(12px);
  animation: loaderFadeUp 0.8s var(--ease-entrance) 0.15s forwards;
}

@media (min-width: 768px) {
  .loader__title {
    font-size: 2rem;
  }
}

@media (min-width: 1024px) {
  .loader__title {
    font-size: 2.2rem;
  }
}

/* ---- Subtitle ---- */

.loader__subtitle {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-indent: 0.25em;
  text-transform: uppercase;
  color: var(--color-cream-75);
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(10px);
  animation: loaderFadeUp 0.8s var(--ease-entrance) 0.3s forwards;
}

@media (min-width: 768px) {
  .loader__subtitle {
    font-size: 0.65rem;
  }
}

@media (min-width: 1024px) {
  .loader__subtitle {
    font-size: 0.72rem;
  }
}

/* ---- Progress Bar Container ---- */

.loader__bar-wrap {
  position: relative;
  width: clamp(140px, 40vw, 220px);
  height: 6px;
  margin-top: 2rem;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: var(--btn-radius);
  overflow: hidden;
  opacity: 0;
  animation: loaderFadeUp 0.6s var(--ease-entrance) 0.15s forwards;
}

@supports (backdrop-filter: blur(1px)) {
  .loader__bar-wrap {
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
  }
}

@media (min-width: 768px) {
  .loader__bar-wrap {
    width: clamp(180px, 28vw, 260px);
    margin-top: 2.4rem;
  }
}

/* ---- Progress Bar Fill ---- */

.loader__bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--color-cream-75);
  border-radius: inherit;
  transition: width 0.3s var(--ease-luxury);
}

/* ---- Loader Exit Animation ---- */

.loader--leaving {
  pointer-events: none;
}

.loader--leaving .loader__content {
  animation: loaderContentLift 0.7s cubic-bezier(0.45, 0, 0.15, 1) forwards;
}

/* ---- Keyframes ---- */

@keyframes loaderFadeUp {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes loaderContentLift {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-30px);
  }
}

/* ---- Reduced Motion ---- */

@media (prefers-reduced-motion: reduce) {
  .loader__title,
  .loader__subtitle,
  .loader__bar-wrap {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .loader--leaving .loader__content {
    animation-duration: 0.01ms !important;
  }

}

/* ---- Hidden state (after removal) ---- */

.loader--done {
  display: none;
}