.loading-motion {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--sp-16);
  min-height: calc(var(--control-h-lg) * 8);
  text-align: center;
  visibility: hidden;
  opacity: 0;
  animation: loading-motion-reveal var(--motion-loading-fade) var(--ease-festival) var(--motion-loading-delay) both;
}
.loading-motion-mark {
  display: block;
  width: calc(var(--sp-40) * 4);
  height: calc(var(--sp-40) * 4);
  overflow: visible;
  pointer-events: none;
}
.loading-motion-disc { color: var(--c-bg-lilac); }
.loading-motion-track { color: var(--c-deco-lilac); stroke-width: 1px; }
.loading-motion-orbit {
  stroke-width: 2px;
  stroke-linecap: round;
  transform-box: view-box;
  transform-origin: center;
  animation: loading-motion-orbit calc(var(--motion-loading) * 2) linear infinite;
}
.loading-motion-orbit-pink { color: var(--c-pink); }
.loading-motion-orbit-aqua {
  color: var(--c-aqua-text);
  animation-duration: calc(var(--motion-loading) * 3);
  animation-direction: reverse;
}
.loading-motion-bar {
  color: var(--c-role-collaborator);
  transform-box: fill-box;
  transform-origin: center;
  animation: loading-motion-wave var(--motion-loading) var(--ease-festival) infinite;
}
.loading-motion-bar:nth-child(2), .loading-motion-bar:nth-child(4) { color: var(--c-role-viewer); }
.loading-motion-bar:nth-child(3) { color: var(--c-role-creator); }
.loading-motion-bar:nth-child(2) { animation-delay: calc(var(--motion-loading) * -.16); }
.loading-motion-bar:nth-child(3) { animation-delay: calc(var(--motion-loading) * -.32); }
.loading-motion-bar:nth-child(4) { animation-delay: calc(var(--motion-loading) * -.48); }
.loading-motion-bar:nth-child(5) { animation-delay: calc(var(--motion-loading) * -.64); }
.loading-motion .loading-motion-message {
  margin: 0;
  color: var(--c-text-sub);
  font-size:var(--fs-ui-body);
  font-weight: 700;
  line-height: var(--lh-relaxed);
}
.loading-motion[data-loading-state="error"] { animation: none; visibility: visible; opacity: 1; }
.loading-motion[data-loading-state="error"] .loading-motion-mark * { animation: none; }
@keyframes loading-motion-reveal {
  from { visibility: hidden; opacity: 0; }
  to { visibility: visible; opacity: 1; }
}
@keyframes loading-motion-orbit { to { transform: rotate(360deg); } }
@keyframes loading-motion-wave {
  0%, 100% { transform: scaleY(.45); }
  45% { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .loading-motion { animation-duration: 0s; }
  .loading-motion-mark * { animation: none; }
}