:root{
  --qvi-loader-bg:#04111d;
  --qvi-loader-panel:rgba(4,17,29,.76);
  --qvi-loader-ring:#19e2e8;
  --qvi-loader-ring-soft:rgba(25,226,232,.23);
}

html.qvi-app-starting,
html.qvi-app-busy{
  overflow:hidden!important;
}

html.qvi-app-starting::before,
html.qvi-app-busy::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:2147483646;
  opacity:1;
  visibility:visible;
  pointer-events:all;
  transition:opacity .22s ease,visibility .22s ease;
}

html.qvi-app-starting::before{
  background:
    url("../img/qvi-app-icon.png") center calc(50% - 48px)/112px 112px no-repeat,
    radial-gradient(circle at 50% 44%,rgba(0,218,229,.18),transparent 28%),
    linear-gradient(155deg,#020b14 0%,var(--qvi-loader-bg) 52%,#082635 100%);
}

html.qvi-app-busy::before{
  background:var(--qvi-loader-panel);
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
}

html.qvi-app-starting::after,
html.qvi-app-busy::after{
  content:"";
  position:fixed;
  left:50%;
  z-index:2147483647;
  width:42px;
  height:42px;
  margin-left:-21px;
  border:4px solid var(--qvi-loader-ring-soft);
  border-top-color:var(--qvi-loader-ring);
  border-right-color:#08aeea;
  border-radius:50%;
  box-sizing:border-box;
  animation:qvi-loader-spin .78s linear infinite;
  filter:drop-shadow(0 0 10px rgba(25,226,232,.35));
  pointer-events:none;
}

html.qvi-app-starting::after{top:calc(50% + 36px)}
html.qvi-app-busy::after{top:calc(50% - 21px)}

html:not(.qvi-app-starting):not(.qvi-app-busy)::before,
html:not(.qvi-app-starting):not(.qvi-app-busy)::after{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

@keyframes qvi-loader-spin{
  to{transform:rotate(360deg)}
}

@media (prefers-reduced-motion:reduce){
  html.qvi-app-starting::after,
  html.qvi-app-busy::after{animation-duration:1.6s}
}