#site-loader-overlay{
  position: fixed;
  inset: 0; 
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background);
  z-index: 99999;
}

#site-loader-overlay{
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 18px 20px;
}

#animation{ display:flex; align-items:center; justify-content:center; margin-bottom:4px; }

.spinner{ animation:rot 1.6s linear infinite; }
.spinner .path{ stroke: var(--accent); stroke-linecap:round; stroke-dasharray:90; stroke-dashoffset:60; animation:dash 1.2s ease-in-out infinite; }

@keyframes rot{ 100%{ transform:rotate(360deg); } }
@keyframes dash{
  0%{ stroke-dashoffset:90; }
  50%{ stroke-dashoffset:45; transform:rotate(20deg); }
  100%{ stroke-dashoffset:90; transform:rotate(0deg); }
}


#loading-text{ font-size:15px; opacity:.95; margin-bottom:2px; color: var(--text-main); }

#progress{ background:rgba(0,0,0,0.05); border-radius:6px; overflow:hidden; width: clamp(280px, 56vw, 720px); height:6px; }
#progress .bar{ width:6%; height:100%; background: var(--accent); transform: translateX(-6%); }

.loader-svg-wrap {
  width: 380px;
  height: 380px;
  max-width: 48vw;
  display: inline-block;
}
.loader-svg-wrap svg {
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 480px) {
  .loader-svg-wrap {
    width: 220px;
    height: 220px;
    max-width: 60vw;
  }
  #progress{ width: calc(100% - 40px); }
}

@keyframes progress{ 0%{ transform:translateX(-6%); } 100%{ transform:translateX(106%); } }

.loader-fadeout{ animation:loaderout .5s ease forwards; }
@keyframes loaderout{
  0%{ opacity:1; transform:translateY(0); }
  100%{ opacity:0; transform:translateY(-6px); }
}

@media (prefers-reduced-motion: reduce){
  .spinner, .spinner .path, #progress .bar{ animation: none !important; }
}

.loader-quick-hide {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease !important;
}