/* Shared loading screen + page-to-page fade. Used by every page. */
@view-transition { navigation: auto; }             /* browsers that support it crossfade between pages; others just load normally */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }

#chLoader{
  position:fixed;inset:0;z-index:2147483000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  background:#000;
  background-image:radial-gradient(700px 420px at 12% -8%,rgba(107,124,255,.16),transparent 60%),radial-gradient(600px 400px at 100% 100%,rgba(255,107,157,.10),transparent 60%);
  opacity:1;visibility:visible;
  transition:opacity .32s ease,visibility 0s 0s;
}
#chLoader.quick{transition-duration:.16s}
#chLoader.done{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .32s ease,visibility 0s .32s}
#chLoader .ld-logo{width:min(190px,48vw);height:auto;fill:#F5F5F3;animation:ldPulse 1.8s ease-in-out infinite}
#chLoader .ld-bar{width:120px;height:2px;border-radius:2px;background:rgba(245,245,243,.12);overflow:hidden}
#chLoader .ld-bar::after{content:"";display:block;height:100%;width:42%;border-radius:2px;background:linear-gradient(90deg,#6B7CFF,#FF6B9D,#FFB86B);animation:ldSlide 1.15s ease-in-out infinite}
#chLoader .ld-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes ldPulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes ldSlide{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}
/* if the script never runs, the screen still goes away by itself after 9 seconds */
#chLoader[data-boot]{animation:ldFail .4s 9s forwards}
@keyframes ldFail{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  #chLoader,#chLoader.quick,#chLoader.done{transition:none}
  #chLoader .ld-logo{animation:none}
  #chLoader .ld-bar::after{animation:none;width:100%;opacity:.55}
}