@keyframes syntax-route-in {
  from { transform: translateY(3px); }
  to { transform: translateY(0); }
}

.boot-splash {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: none;
  align-content: center;
  justify-items: center;
  gap: 18px;
  padding: 24px;
  color: #f4f4f6;
  background: #08080a;
  opacity: 1;
  visibility: visible;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
}

html.syntax-auth-checking .boot-splash { display: grid; }
.boot-splash.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-splash-brand { display: flex; align-items: center; gap: 10px; font: 600 17px/1 Geist, Inter, system-ui, sans-serif; letter-spacing: -.04em; }
.boot-splash-brand>b>span { color: #f59e0b; }
.boot-splash-mark { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(245,158,11,.3); border-radius: 5px; color: #f59e0b; background: #0d0e12; }
.boot-splash-mark svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
.boot-splash-status { display: flex; align-items: center; gap: 8px; color: #8e929f; font: 12px/1.5 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.boot-splash-status>i { width: 6px; height: 6px; border-radius: 50%; background: #10b981; box-shadow: 0 0 9px rgba(16,185,129,.38); animation: syntax-boot-signal 1.4s ease-in-out infinite; }
.boot-splash-status code { margin-left: 5px; color: #525665; font: inherit; }
.boot-splash-track { position: relative; width: min(220px,60vw); height: 2px; overflow: hidden; background: rgba(255,255,255,.09); }
.boot-splash-track>i { position: absolute; inset: 0 auto 0 0; width: 32%; background: #f59e0b; transform: translateX(-110%); animation: syntax-boot-progress 1.15s cubic-bezier(.4,0,.2,1) infinite; }

@keyframes syntax-boot-progress { to { transform: translateX(340%); } }
@keyframes syntax-boot-signal { 50% { opacity: .52; } }

@view-transition {
  navigation: auto;
}

:root::view-transition-group(root) {
  animation: none;
}

:root::view-transition-old(root) {
  /* Keep page changes from crossfading two sets of text. */
  display: none;
}

:root::view-transition-new(root) {
  animation: syntax-route-in 170ms cubic-bezier(.2, .75, .25, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .boot-splash, .boot-splash-status>i, .boot-splash-track>i { transition: none !important; animation: none !important; }
  .boot-splash-track>i { width: 100%; transform: none; opacity: .55; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0s !important;
  }
}