/* ==========================================================================
   Premium Loading System
   ========================================================================== */

/* ── Initial Page Loader ─────────────────────────────────────────────────── */

#page-loader {
  position: fixed;
  inset: 0;
  z-index: 9900;
  background: #09080b;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    opacity     0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.05s,
    visibility  0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
}

#page-loader.loader-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* star texture layer */
#page-loader::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 20px  30px,  rgba(251,219,180,.40) 0%, transparent 100%),
    radial-gradient(1px   1px   at 85px  60px,  rgba(255,255,255,.20) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 148px 24px,  rgba(251,219,180,.32) 0%, transparent 100%),
    radial-gradient(1px   1px   at 208px 78px,  rgba(255,255,255,.16) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 244px 11px,  rgba(251,219,180,.35) 0%, transparent 100%),
    radial-gradient(1.2px 1.2px at 114px 168px, rgba(251,219,180,.25) 0%, transparent 100%),
    radial-gradient(1px   1px   at 31px  210px, rgba(251,219,180,.28) 0%, transparent 100%),
    radial-gradient(1px   1px   at 200px 182px, rgba(251,219,180,.22) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 66px  240px, rgba(251,219,180,.28) 0%, transparent 100%),
    radial-gradient(1px   1px   at 176px 50px,  rgba(255,255,255,.18) 0%, transparent 100%);
  background-size: 260px 260px;
  pointer-events: none;
}

/* top gold accent line */
#page-loader::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(181,149,47,.5) 25%,
    rgba(245,217,139,.95) 50%,
    rgba(181,149,47,.5) 75%,
    transparent 100%
  );
  animation: loader-topline 2.8s ease-in-out infinite;
}

@keyframes loader-topline {
  0%, 100% { opacity: .35; }
  50%       { opacity: 1;   }
}

/* ── Inner content (slides up on exit) ────────────────────────────────────── */

.loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  position: relative;
  z-index: 1;
  transition:
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    opacity   0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

#page-loader.loader-out .loader-inner {
  transform: translateY(-24px);
  opacity: 0;
}

/* ── Emblem: spinning rings + logo ────────────────────────────────────────── */

.loader-emblem {
  position: relative;
  width: 116px;
  height: 116px;
}

.loader-ring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.loader-arc-outer {
  transform-origin: 50px 50px;
  animation: arc-cw 2.6s linear infinite;
}

.loader-arc-inner {
  transform-origin: 50px 50px;
  animation: arc-ccw 3.4s linear infinite;
}

@keyframes arc-cw  { to { transform: rotate( 360deg); } }
@keyframes arc-ccw { to { transform: rotate(-360deg); } }

.loader-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 22px;
  filter: drop-shadow(0 0 14px rgba(181,149,47,.35))
          drop-shadow(0 0 32px rgba(181,149,47,.12));
}

/* subtle glow orb behind logo */
.loader-emblem::before {
  content: '';
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(181,149,47,.10) 0%, transparent 70%);
  animation: glow-pulse 2.4s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% { opacity: .5; transform: scale(.9); }
  50%       { opacity: 1;  transform: scale(1.1); }
}

/* ── Brand name ───────────────────────────────────────────────────────────── */

.loader-brand {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.05rem, 3vw, 1.35rem);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  background: linear-gradient(
    90deg,
    #6e4f10 0%,
    #b5952f 15%,
    #f5d98b 35%,
    #ffe9a0 50%,
    #f5d98b 65%,
    #b5952f 85%,
    #6e4f10 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer-brand 3.2s linear infinite;
}

@keyframes shimmer-brand {
  to { background-position: 200% center; }
}

.loader-sub {
  margin-top: -.9rem;
  font-size: .6rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: rgba(181,149,47,.45);
}

/* ── Ornament divider ─────────────────────────────────────────────────────── */

.loader-ornament {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 180px;
}

.loader-ornament-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(181,149,47,.35));
}

.loader-ornament-line:last-child {
  background: linear-gradient(90deg, rgba(181,149,47,.35), transparent);
}

.loader-ornament-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(181,149,47,.55);
}

/* ── Equaliser wave ───────────────────────────────────────────────────────── */

.loader-wave {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 22px;
}

.loader-wave span {
  display: block;
  width: 2px;
  border-radius: 2px;
  background: rgba(181,149,47,.55);
  animation: wave-bar 1.25s ease-in-out infinite;
}

.loader-wave span:nth-child(1) { height: 7px;  animation-delay: 0s;    }
.loader-wave span:nth-child(2) { height: 12px; animation-delay: .1s;   background: rgba(181,149,47,.75); }
.loader-wave span:nth-child(3) { height: 18px; animation-delay: .2s;   background: rgba(245,217,139,.95); }
.loader-wave span:nth-child(4) { height: 12px; animation-delay: .1s;   background: rgba(181,149,47,.75); }
.loader-wave span:nth-child(5) { height: 7px;  animation-delay: 0s;    }

@keyframes wave-bar {
  0%, 100% { transform: scaleY(.45); opacity: .4; }
  50%       { transform: scaleY(1);  opacity: 1;  }
}

/* ── Navigation Progress Bar ──────────────────────────────────────────────── */

#nav-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  z-index: 10000;
  background: linear-gradient(
    90deg,
    #7a5c1a 0%,
    #c9a84c 30%,
    #f5d98b 50%,
    #c9a84c 70%,
    #7a5c1a 100%
  );
  background-size: 200% auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

#nav-progress.np-active {
  opacity: 1;
  animation: np-shimmer 1.6s linear infinite;
}

/* leading glow */
#nav-progress::after {
  content: '';
  position: absolute;
  right: -1px;
  top: -2px;
  width: 70px;
  height: 6px;
  background: radial-gradient(ellipse at right, rgba(245,217,139,.85) 0%, transparent 70%);
  filter: blur(3px);
  border-radius: 0 4px 4px 0;
}

@keyframes np-shimmer {
  to { background-position: 200% center; }
}