/* The loading screen, so a link never shows a blank page.
 *
 * Every page here is its own document, and each one has to ask the server who you are before it
 * knows what to paint. That gap is short and it is visible, and an empty white rectangle in the
 * middle of it reads as a broken site. This covers the gap with the lens from the landing page.
 *
 * It is the landing page's own animation, lifted out of the 13 second stage sequence and remapped
 * onto a loop of its own, so the two are the same object moving at the same speed.
 */

.boot {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper, #fafafa);
  transition: opacity 220ms ease;
}
.boot[hidden] { display: none; }
.boot.is-done { opacity: 0; pointer-events: none; }

.boot-brand {
  position: relative;
  font: 800 clamp(28px, 3.6vw, 44px)/1 var(--font, "Inter", ui-sans-serif, system-ui, sans-serif);
  letter-spacing: -0.035em;
  color: var(--ink, #09090b);
}
.boot-brand i { font-style: normal; color: var(--stamp, #2563eb); }

/* A real magnifying glass with the enlarged wordmark inside it. */
.boot-lens {
  position: absolute; top: 50%; left: 0; width: 92px; height: 92px; margin-top: -46px;
  border-radius: 50%; border: 4px solid var(--stamp, #2563eb); overflow: hidden;
  background: var(--card, #fff); pointer-events: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 10px 30px rgba(37,99,235,.35), inset 0 0 22px rgba(96,165,250,.18);
  opacity: 0; will-change: left, opacity;
  animation: bootlens 2.6s cubic-bezier(.4,0,.4,1) infinite;
}
.boot-lens::after {
  content: ""; position: absolute; top: 8px; left: 16px; width: 34px; height: 16px;
  border-radius: 50%; background: rgba(37,99,235,.10); transform: rotate(-18deg);
}
.boot-zoom {
  position: absolute; top: 50%; left: 0; white-space: nowrap;
  font-size: inherit; font-weight: 800; letter-spacing: -0.035em; color: var(--ink, #09090b);
  transform-origin: left center; will-change: transform;
  animation: bootzoom 2.6s cubic-bezier(.4,0,.4,1) infinite;
}
.boot-zoom i { font-style: normal; color: var(--stamp, #2563eb); }

@keyframes bootlens {
  0%    { opacity: 0; left: -100px; }
  13.6% { opacity: 1; left: -60px; }
  72.7% { left: calc(100% - 34px); }
  81.8% { left: calc(100% - 34px); opacity: 1; }
  100%  { left: calc(100% - 34px); opacity: 0; }
}
@keyframes bootzoom {
  0%, 13.6%  { transform: translateY(-50%) scale(2.1) translateX(40px); }
  81.8%, 100%{ transform: translateY(-50%) scale(2.1) translateX(calc(-100% + 26px)); }
}

/* Somebody who has asked for less motion gets the wordmark and no sweep. */
@media (prefers-reduced-motion: reduce) {
  .boot-lens, .boot-zoom { animation: none; }
  .boot-lens { display: none; }
}