/*
  Boot splash. Lives outside #root so React never unmounts it, which keeps one
  uninterrupted animation across chunk loading, authentication, and the first
  workspace read. This same-origin stylesheet is render-blocking and compatible
  with the production style-src 'self' policy. Literal token fallbacks cover the
  interval before the application stylesheet loads.
*/
#boot {
  position: fixed;
  z-index: 100;
  inset: 0;
  box-sizing: border-box;
  display: grid;
  place-content: center;
  place-items: center;
  padding-block-start: max(24px, env(safe-area-inset-top));
  padding-inline-end: max(24px, env(safe-area-inset-right));
  padding-block-end: max(24px, env(safe-area-inset-bottom));
  padding-inline-start: max(24px, env(safe-area-inset-left));
  overflow: hidden;
  background: var(--bg, #f4f5f7);
  color: var(--text, #1c2025);
  opacity: 1;
  transition: opacity 200ms ease-out;
}

#boot::before {
  position: absolute;
  inset: -20%;
  background:
    linear-gradient(
      color-mix(in srgb, var(--accent, #4e6f86) 7%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--accent, #4e6f86) 7%, transparent) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at center,
      color-mix(in srgb, var(--accent, #4e6f86) 12%, transparent),
      transparent 42%
    );
  background-size:
    32px 32px,
    32px 32px,
    auto;
  content: '';
  mask-image: radial-gradient(circle at center, black 0%, transparent 68%);
  opacity: 0.8;
}

#boot[data-state='leaving'] {
  opacity: 0;
}

#boot .boot-console {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: clamp(240px, 46vmin, 288px);
  block-size: clamp(240px, 46vmin, 288px);
}

#boot .boot-console::before,
#boot .boot-console::after {
  position: absolute;
  content: '';
  pointer-events: none;
}

#boot .boot-console::before {
  inset: 19px;
  border: 1px solid color-mix(in srgb, var(--accent, #4e6f86) 17%, transparent);
  border-radius: 50%;
}

#boot .boot-console::after {
  inset: 0;
  background:
    linear-gradient(
      90deg,
      transparent calc(50% - 0.5px),
      color-mix(in srgb, var(--accent, #4e6f86) 14%, transparent) 50%,
      transparent calc(50% + 0.5px)
    ),
    linear-gradient(
      transparent calc(50% - 0.5px),
      color-mix(in srgb, var(--accent, #4e6f86) 14%, transparent) 50%,
      transparent calc(50% + 0.5px)
    );
  mask-image: radial-gradient(circle at center, transparent 0 39%, black 40% 48%, transparent 49%);
}

#boot .boot-station {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  transform: translateY(calc(50% - 44px));
}

#boot .boot-emblem {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 88px;
  block-size: 88px;
  border: 1px solid color-mix(in srgb, var(--accent, #4e6f86) 28%, transparent);
  border-radius: 28px;
  background: color-mix(in srgb, var(--surface, #ffffff) 82%, transparent);
  box-shadow:
    0 20px 50px rgb(17 24 39 / 12%),
    inset 0 0 0 6px color-mix(in srgb, var(--accent, #4e6f86) 5%, transparent);
}

#boot .boot-emblem img {
  display: block;
  inline-size: 64px;
  block-size: 64px;
  border-radius: 20px;
}

#boot .boot-bracket {
  position: absolute;
  inline-size: 18px;
  block-size: 18px;
  border-color: color-mix(in srgb, var(--gold, #d4a72c) 70%, transparent);
  border-style: solid;
}

#boot .boot-bracket[data-corner='north-west'] {
  inset-block-start: -8px;
  inset-inline-start: -8px;
  border-width: 1px 0 0 1px;
}

#boot .boot-bracket[data-corner='north-east'] {
  inset-block-start: -8px;
  inset-inline-end: -8px;
  border-width: 1px 1px 0 0;
}

#boot .boot-bracket[data-corner='south-west'] {
  inset-block-end: -8px;
  inset-inline-start: -8px;
  border-width: 0 0 1px 1px;
}

#boot .boot-bracket[data-corner='south-east'] {
  inset-block-end: -8px;
  inset-inline-end: -8px;
  border-width: 0 1px 1px 0;
}

#boot .boot-wordmark {
  margin-block-start: 24px;
  padding-inline-start: 0.34em;
  color: var(--text, #1c2025);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.34em;
  line-height: 1;
}

#boot .boot-signal {
  position: relative;
  inline-size: 112px;
  block-size: 2px;
  margin-block-start: 16px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #4e6f86) 20%, transparent);
}

#boot .boot-signal-beam {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 34px;
  border-radius: inherit;
  background: var(--gold, #d4a72c);
  box-shadow: 0 0 12px color-mix(in srgb, var(--gold, #d4a72c) 55%, transparent);
  animation: boot-signal 1.25s ease-in-out infinite;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme='light']) #boot {
    --accent: #8fa9bc;
    --gold: #e5bd55;
    --surface: #181c21;
    --text: #edf0f3;
    background: var(--bg, #111418);
    color: var(--text, #edf0f3);
  }

  html:not([data-theme='light']) #boot::before {
    opacity: 1;
  }

  html:not([data-theme='light']) #boot .boot-emblem {
    background: color-mix(in srgb, var(--surface, #181c21) 86%, transparent);
    box-shadow:
      0 24px 60px rgb(0 0 0 / 42%),
      inset 0 0 0 6px color-mix(in srgb, var(--accent, #8fa9bc) 6%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  #boot {
    transition: none;
  }

  #boot .boot-signal-beam {
    inset-inline-start: 39px;
    animation: none;
  }
}

@keyframes boot-signal {
  0%,
  100% {
    transform: translateX(-36px);
  }

  50% {
    transform: translateX(114px);
  }
}