:root {
  --boot-surface: oklch(0.985 0.001 286);
  --boot-sidebar: oklch(0.956 0.003 286);
  --boot-ink: oklch(0.145 0 0);
  --boot-ink-muted: oklch(0.556 0 0);
  --boot-border: oklch(0.922 0 0);
}

html.dark {
  --boot-surface: oklch(0.185 0 0);
  --boot-sidebar: oklch(0.145 0 0);
  --boot-ink: oklch(0.985 0 0);
  --boot-ink-muted: oklch(0.708 0 0);
  --boot-border: oklch(1 0 0 / 10%);
}

html[data-theme="pure-light"] {
  --boot-surface: lch(100% 0 142.924);
  --boot-sidebar: lch(100% 0 142.924);
  --boot-ink: lch(10.357% 0 142.924);
  --boot-ink-muted: lch(41.429% 1 142.924);
  --boot-border: lch(93.7% 0 142.924);
}

html[data-theme="magic-blue"] {
  --boot-surface: lch(9.471% 6.568 282.863);
  --boot-sidebar: lch(6.221% 6.568 282.863);
  --boot-ink: lch(100% 0 282.863);
  --boot-ink-muted: lch(63.788% 4.284 282.863);
  --boot-border: lch(19.071% 7.768 282.863);
}

html[data-theme="classic-dark"] {
  --boot-surface: lch(12.236% 2.213 272.695);
  --boot-sidebar: lch(8.986% 2.213 272.695);
  --boot-ink: lch(100% 0 272.695);
  --boot-ink-muted: lch(64.894% 2.106 272.695);
  --boot-border: lch(21.836% 3.413 272.695);
}

#boot-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--boot-sidebar);
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  pointer-events: none;
  transition: opacity 120ms ease-out;
}

#boot-gate::before {
  content: "";
  position: absolute;
  inset: 8px 8px 8px var(--boot-sidebar-width, 236px);
  border-radius: 12px;
  background: var(--boot-surface);
  box-shadow:
    0 1px 3px 0 rgb(0 0 0 / 0.1),
    0 1px 2px -1px rgb(0 0 0 / 0.1);
}

@media (max-width: 1024px) {
  #boot-gate::before {
    inset: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

#boot-gate-content {
  position: absolute;
  top: 50%;
  left: calc(50% + var(--boot-sidebar-width, 236px) / 2);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: min(320px, calc(100vw - 48px));
  text-align: center;
  animation: boot-gate-in 0.3s ease-out 0.6s both;
}

@media (max-width: 1024px) {
  #boot-gate-content {
    left: 50%;
  }
}

#boot-gate-logo {
  width: 24px;
  height: 40px;
  fill: var(--boot-ink);
  animation: boot-gate-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) 0.6s infinite;
}

html.boot-auth #boot-gate {
  background: var(--boot-surface);
}

html.boot-auth #boot-gate::before {
  display: none;
}

html.boot-auth #boot-gate-content {
  left: 50%;
}

#boot-gate-title,
#boot-gate-error,
#boot-gate-retry,
#boot-gate-slow {
  display: none;
}

#boot-gate-slow {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--boot-ink-muted);
  animation: boot-gate-breathe 2s ease-in-out infinite;
}

html.boot-slow #boot-gate-slow {
  display: block;
}

html.boot-error #boot-gate {
  pointer-events: auto;
}

html.boot-error #boot-gate-content {
  animation: none;
  gap: 8px;
}

html.boot-error #boot-gate-title {
  display: block;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--boot-ink);
}

html.boot-error #boot-gate-logo {
  animation: none;
}

html.boot-error #boot-gate-slow {
  display: none;
}

html.boot-error #boot-gate-error {
  display: block;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--boot-ink-muted);
}

html.boot-error #boot-gate-retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  margin-top: 4px;
  padding: 0 12px;
  border: 1px solid var(--boot-border);
  border-radius: 8px;
  background: var(--boot-surface);
  color: var(--boot-ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

html.boot-done #boot-gate {
  opacity: 0;
}

@keyframes boot-gate-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes boot-gate-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes boot-gate-breathe {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  #boot-gate-slow,
  #boot-gate-logo {
    animation: none;
  }
}