/* Fullscreen premium loader styles */
:root{
  --bg-dark:#050404;
  --bg-mid:#0c0b0b;
  --gold-1: #b97b28; /* subtle complements if needed */
}

#site-loader{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,var(--bg-dark) 0%, #070606 45%, #0f0e0e 100%);
  z-index:99999;
  flex-direction:column;
  gap:22px;
  transition:opacity .6s ease, visibility .6s ease;
}

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

.loader-frame{width:100%;max-width:1200px;padding:40px 24px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;}

.loader-brand{position:relative;display:inline-block}
.loader-brand img{display:block;max-width:78vw;width:560px;height:auto}

/* thin gold border lines top/bottom */
#site-loader::before,#site-loader::after{content:'';position:absolute;left:12px;right:12px;height:4px;background:linear-gradient(90deg,#b78a38,#f6e3a2,#b78a38);opacity:.28;mix-blend-mode:overlay}
#site-loader::before{top:8px}
#site-loader::after{bottom:8px}

/* animate the thin gold lines to slide in on load */
#site-loader::before,#site-loader::after{transform-origin:center;transform:scaleX(0);animation:lineIn .9s cubic-bezier(.2,.9,.2,1) forwards}
#site-loader::before{animation-delay:.08s}
#site-loader::after{animation-delay:.18s}

@keyframes lineIn{0%{transform:scaleX(0);opacity:0}60%{opacity:.6}100%{transform:scaleX(1);opacity:.28}}

/* soft vignette / texture */
#site-loader::marker{display:none}

.loader-sub{color:rgba(255, 230, 180, 0.92);letter-spacing:6px;font-size:15px;text-transform:uppercase;font-weight:600;margin-top:10px}

/* gentle shimmer across the logo using an overlay gradient */
.loader-brand::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.12) 45%, rgba(255,255,255,0) 70%);
  transform:translateX(-120%);
  pointer-events:none;mix-blend-mode:overlay;
  filter:blur(6px);
  transition:opacity .4s ease;
  animation:shimmer 2.6s ease-in-out infinite;
}

/* subtle glow behind logo */
.logo-glow{position:absolute;inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:86%;height:56%;pointer-events:none;border-radius:18px;background:radial-gradient(40% 30% at 50% 40%, rgba(246,227,162,0.18), rgba(183,138,56,0.06), rgba(0,0,0,0));filter:blur(22px);opacity:.9;mix-blend-mode:screen;animation:glowPulse 3.6s ease-in-out infinite}

@keyframes glowPulse{0%{transform:translate(-50%,-50%) scale(.98);opacity:.85}50%{transform:translate(-50%,-54%) scale(1.02);opacity:1}100%{transform:translate(-50%,-50%) scale(.98);opacity:.85}}

/* slight floating / pulsing for the logo */
.loader-brand img{animation:logoFloat 4.2s ease-in-out infinite;will-change:transform,filter}
@keyframes logoFloat{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-6px) scale(1.004)}70%{transform:translateY(-3px) scale(1.002)}100%{transform:translateY(0) scale(1)}}

@keyframes shimmer{0%{transform:translateX(-120%)}50%{transform:translateX(120%)}100%{transform:translateX(120%)}}

/* responsive tweaks */
@media (max-width:720px){
  .loader-brand img{width:72vw}
  .loader-sub{font-size:12px;letter-spacing:4px}
}

/* subtle fade-out animation when page loaded */
.loader-fadeout{opacity:0;transform:scale(.995);transition:opacity .6s ease, transform .6s ease}

/* floating gold particles */
.loader-effects{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.loader-effects .p{position:absolute;bottom:18%;background:radial-gradient(circle at 30% 30%, #fff7d8, #e4bb63 60%, #b78a38);width:8px;height:8px;border-radius:50%;opacity:.0;filter:blur(.2px);transform:translateY(0) scale(.9)}
.loader-effects .p:nth-child(1){left:12%;width:6px;height:6px;animation:floatUp 4.8s -0.6s infinite}
.loader-effects .p:nth-child(2){left:28%;width:10px;height:10px;animation:floatUp 5.6s -1.2s infinite}
.loader-effects .p:nth-child(3){left:46%;width:7px;height:7px;animation:floatUp 4.4s -0.2s infinite}
.loader-effects .p:nth-child(4){left:62%;width:5px;height:5px;animation:floatUp 5.2s -0.9s infinite}
.loader-effects .p:nth-child(5){left:78%;width:9px;height:9px;animation:floatUp 6s -1.6s infinite}
.loader-effects .p:nth-child(6){left:88%;width:6px;height:6px;animation:floatUp 4.6s -0.4s infinite}

@keyframes floatUp{0%{transform:translateY(0) scale(.85);opacity:0}10%{opacity:.6}50%{transform:translateY(-46vh) scale(1);opacity:.95}90%{opacity:.25}100%{transform:translateY(-54vh) scale(.9);opacity:0}}

/* Progress bar styles */
.loader-progress{width:76%;max-width:760px;margin-top:18px;display:flex;align-items:center;gap:14px}
.progress-bar{flex:1;height:12px;background:rgba(255,255,255,0.04);border-radius:999px;position:relative;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,0.02), 0 3px 18px rgba(0,0,0,0.6)}
.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,#f6e3a2,#b78a38 55%,#f6e3a2);box-shadow:0 6px 18px rgba(183,138,56,0.22);transition:width 260ms cubic-bezier(.2,.9,.2,1);border-radius:999px}
.progress-fill::after{content:'';position:absolute;right:0;top:0;bottom:0;width:28px;background:linear-gradient(90deg, rgba(255,255,255,0.28), rgba(255,255,255,0));mix-blend-mode:overlay;filter:blur(6px);opacity:.8}
.progress-percent{min-width:56px;color:rgba(255,235,200,0.95);font-weight:700;letter-spacing:1px;text-align:right}

/* show a subtle glow as percentage approaches 100 */
.progress-bar.almost-done .progress-fill{box-shadow:0 10px 30px rgba(183,138,56,0.32)}

@media (max-width:720px){
  .loader-progress{width:88%;gap:10px}
  .progress-percent{min-width:42px;font-size:13px}
}