/* ============================================================
   LovelyHair — Page loader (route-transition overlay)
   Full-screen brand overlay + slim top progress bar. Hidden by
   default; shown by initPageLoader() while navigating. Tokens only.
   ============================================================ */

.lh-page-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  /* ~50% translucent page surface so the underlying content stays visible
     while new content loads; a soft blur keeps the brand mark legible. */
  background: color-mix(in srgb, var(--surface-page) 52%, transparent);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  backdrop-filter: blur(6px) saturate(1.05);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-standard),
              visibility var(--duration-base) var(--ease-standard);
}
.lh-page-loader.is-active {
  opacity: 1;
  visibility: visible;
}

.lh-page-loader__inner {
  transform: translateY(6px);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}
.lh-page-loader.is-active .lh-page-loader__inner {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 80ms;
}

/* Slim top progress bar (amber → gold) that creeps while loading */
.lh-page-loader__bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  box-shadow: 0 0 8px rgba(160, 85, 19, 0.4);
  z-index: 1001;
  transition: width 9s cubic-bezier(0.12, 0.78, 0.28, 0.99);
}

@media (prefers-reduced-motion: reduce) {
  .lh-page-loader,
  .lh-page-loader__inner { transition: opacity var(--duration-fast) linear; }
  .lh-page-loader__inner { transform: none; }
  .lh-page-loader__bar { transition: width var(--duration-fast) linear; }
}