#loader{position:fixed;inset:0;z-index:100;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .7s ease,visibility .7s ease}
#loader.hidden{opacity:0;visibility:hidden}
.loader-inner{display:flex;flex-direction:column;align-items:center;gap:18px}
.loader-logo{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,7vw,56px);
  letter-spacing:4px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.loader-count{font-family:var(--font-display);font-weight:500;font-size:14px;letter-spacing:3px;
  color:var(--muted);font-variant-numeric:tabular-nums}
.loader-count::after{content:"%"}
/* progress bar under logo */
.loader-inner{position:relative}
.loader-inner::after{content:"";position:absolute;bottom:-14px;left:0;height:1px;width:var(--p,0%);
  background:var(--grad);transition:width .2s linear;max-width:160px}
@media(prefers-reduced-motion:reduce){
  #loader{transition:opacity .3s ease,visibility .3s ease}
}