/* Loading screen: the Pipsly mark inside a chrome ring, a real percentage, then it flies into the nav logo. */
.ldr { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #0A0A0A; pointer-events: none;
  transition: opacity 650ms cubic-bezier(.22, 1, .36, 1) 80ms; }
.ldr-core { position: relative; width: 132px; height: 132px; display: grid; place-items: center;
  transition: transform 820ms cubic-bezier(.65, 0, .35, 1), opacity 520ms ease 160ms; will-change: transform; }
.ldr-core::before { content: ""; position: absolute; inset: -38px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(201, 204, 209, .20), rgba(201, 204, 209, 0)); opacity: var(--glow, .55);
  animation: ldr-breathe 2.4s cubic-bezier(.65, 0, .35, 1) infinite; }
.ldr svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ldr circle { fill: none; }
.ldr .ldr-track { stroke: rgba(255, 255, 255, .07); stroke-width: 1.5; }
.ldr .ldr-arc { stroke: #C9CCD1; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0));
  filter: drop-shadow(0 0 6px rgba(201, 204, 209, .65)); }
.ldr .ldr-tip { fill: #FFFFFF; filter: drop-shadow(0 0 5px rgba(255, 255, 255, .9)); opacity: calc(var(--p, 0) * 4); }
.ldr img { width: 92px; height: 92px; mix-blend-mode: lighten; opacity: 0; transform: scale(.86);
  -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent 96%); mask-image: radial-gradient(closest-side, #000 58%, transparent 96%);
  animation: ldr-in 900ms cubic-bezier(.22, 1, .36, 1) 60ms forwards; }
.ldr-pct { position: absolute; top: calc(50% + 92px); left: 50%; transform: translateX(-50%); display: flex; align-items: baseline; gap: 2px;
  font: 500 13px/1 ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; letter-spacing: .14em; color: #C9CDD3;
  font-variant-numeric: tabular-nums; opacity: 0; animation: ldr-in-pct 700ms cubic-bezier(.22, 1, .36, 1) 220ms forwards; transition: opacity 260ms; }
.ldr-pct small { font-size: 10px; color: #8E949E; }
.ldr.fold .ldr-core { transform: translate(var(--fx, 0), var(--fy, 0)) scale(.27); opacity: 0; }
.ldr.fold .ldr-pct { opacity: 0 !important; }
.ldr.out { opacity: 0; }
html.intro-done .ldr { display: none; }
@keyframes ldr-in { to { opacity: 1; transform: none; } }
@keyframes ldr-breathe { 50% { transform: scale(1.08); opacity: calc(var(--glow, .55) + .25); } }
@keyframes ldr-in-pct { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ldr-core, .ldr { transition: opacity 200ms !important; }
  .ldr-core::before, .ldr img, .ldr-pct { animation: none; opacity: 1; transform: none; }
  .ldr-pct { transform: translateX(-50%); }
  .ldr.fold .ldr-core { transform: none; }
}