:root {
  --loading-bg: color-mix(in hsl, canvas, black 10%);
  --ring: #ff4d7d;
  --muted: color-mix(in hsl, canvasText, transparent 50%);
}

body.is-loading { overflow: hidden; }

#app-loading{
  position: fixed;
  inset: 0;
  z-index: 99999999;
  display: grid;
  place-items: center;
  background: var(--loading-bg);
  opacity: 1;
  transition: opacity 420ms ease;
}

#app-loading.is-hiding{
  opacity: 0;
  pointer-events: none;
}

#app-loading .wrap{
  display: grid;
  place-items: center;
  gap: 14px;
}

#app-loading .label{
  font: 600 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--muted);
  user-select: none;
}

#app-loading svg{
  width: min(220px, 55vw);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 12px 24px color-mix(in hsl, black, transparent 75%));
}

#app-loading .outer{ transform-origin: 110px 110px; }

#app-loading.is-done .outer{ animation: spinOnce 700ms ease-in-out 1; }
@keyframes spinOnce{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

#app-loading .progress{ transition: stroke-dashoffset 120ms linear; }
#app-loading .heartFillStop{ transition: offset 120ms linear; }

#app-loading.is-done .heart{ animation: pop 420ms ease 1; }
@keyframes pop{ 0%{transform:scale(1)} 60%{transform:scale(1.06)} 100%{transform:scale(1)} }