.ur-loading {
  --ur-load-felt-top: oklch(18.6% 0.022 274);
  --ur-load-felt-bottom: oklch(16.4% 0.020 274);
  --ur-load-playmat: oklch(12.4% 0.020 292);
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: var(--step-6) var(--step-4);
  color: var(--ink-1);
  text-align: center;
}
.ur-loading-body {
  display: grid;
  justify-items: center;
  gap: var(--step-3);
  max-width: 34rem;
}


.ur-loading-table {
  min-height: calc(100dvh - var(--shell-h) - var(--footer-h));
  background:
    radial-gradient(ellipse 70% 55% at 50% 48%, var(--ur-load-felt-top), transparent 72%),
    linear-gradient(180deg, var(--ur-load-felt-top), var(--ur-load-felt-bottom) 60%, var(--ur-load-playmat));
}

.joining > .ur-loading-table { flex: 1 1 auto; min-height: 0; }
.ur-loading-page,
.ur-loading-boot {
  min-height: calc(100dvh - var(--shell-h) - var(--footer-h));
  background: var(--surface-ground);
}

.ur-loading-veil {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--veil);
}
.ur-loading-veil .ur-loading-body {
  padding: var(--step-5) var(--step-6);
  border-radius: var(--round-2);
  background: var(--shroud);
  box-shadow: var(--shadow-float);
}


.ur-loading-glyph {
  display: grid;
  justify-items: center;
  gap: var(--step-3);
}
.ur-loading-mark {
  display: block;
  animation: ur-loading-breathe var(--loop-wait) var(--ease-inout) infinite alternate;
}
.ur-loading-seam {
  position: relative;
  display: block;
  width: 160px;
  height: 1px;
  overflow: hidden;
  background: linear-gradient(90deg, transparent, var(--rift-glow), transparent);
  opacity: 0.6;
}
.ur-loading-table .ur-loading-seam { width: min(70vw, 420px); }
.ur-loading-spark {
  position: absolute;
  inset: 0 auto 0 0;
  width: 25%;
  background: linear-gradient(90deg, transparent, var(--rift-light), transparent);
  transform: translateX(-100%);
  animation: ur-loading-run calc(var(--loop-wait) * 2) var(--ease-inout) infinite;
}


.ur-loading-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-lead);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--ink-1);
}
.ur-loading-page .ur-loading-title,
.ur-loading-veil .ur-loading-title { font-size: var(--type-section); }
.ur-loading-title:focus { outline: none; }
.ur-loading-note {
  margin: 0;
  font-size: var(--type-body);
  color: var(--ink-3);
}
.ur-loading-line {
  margin: 0;
  max-width: 30rem;
  font-size: var(--type-read);
  line-height: 1.45;
  color: var(--ink-2);
  animation: ur-loading-in var(--motion-4) var(--ease-standard) both;
}
.ur-loading-ways {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--step-2);
  margin-top: var(--step-2);
  animation: ur-loading-in var(--motion-4) var(--ease-standard) both;
}
.ur-loading-ways[hidden],
.ur-loading-line[hidden] { display: none; }


.ur-loading-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--step-2);
  color: var(--ink-2);
}
.ur-loading-inline .ur-loading-seam { width: 48px; }


.ur-skeleton .ur-row {
  animation: ur-loading-breathe var(--loop-wait) var(--ease-inout) infinite alternate;
}
.ur-skeleton .ur-row:nth-child(3n) { animation-delay: var(--motion-3); }
.ur-skeleton .ur-row:nth-child(3n + 1) { animation-delay: var(--motion-4); }

@keyframes ur-loading-breathe {
  from { opacity: 0.62; }
  to { opacity: 1; }
}
@keyframes ur-loading-run {
  from { transform: translateX(-100%); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  to { transform: translateX(400%); opacity: 0; }
}
@keyframes ur-loading-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}


@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) :is(.ur-loading-mark, .ur-loading-spark, .ur-loading-line, .ur-loading-ways, .ur-loading-veil, .ur-skeleton .ur-row) {
    animation: none;
  }
  :root:not([data-motion="full"]) .ur-loading-spark { transform: translateX(150%); }
}
:root[data-motion="reduce"] :is(.ur-loading-mark, .ur-loading-spark, .ur-loading-line, .ur-loading-ways, .ur-loading-veil, .ur-skeleton .ur-row) {
  animation: none;
}
:root[data-motion="reduce"] .ur-loading-spark { transform: translateX(150%); }