@import url('/typography.css');

/* Available before the application bundle; shared by the initial React states. */
.ob-startup {
  --startup-accent: var(--ob-accent, #6d4ee8);
  --sphere-radius: clamp(52px, min(22vw, 20dvh), 96px);
  --sphere-center-y: max(calc(var(--sphere-radius) + 32px), calc(50dvh - 88px));
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: auto;
  box-sizing: border-box;
  padding: 0 max(24px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  background: radial-gradient(ellipse at 50% 38%, var(--ob-accent-subtle, #f8f6ff), transparent 65%), var(--ob-canvas, #f6f7fa);
  color: var(--ob-ink, #242735);
  font-family: 'DM Sans', system-ui, sans-serif;
  text-align: center;
}
.ob-startup * { box-sizing: border-box; }
.ob-startup-content {
  position: relative;
  z-index: 1;
  width: min(100%, 360px);
  margin: auto;
  padding-top: calc(var(--sphere-center-y) + var(--sphere-radius) + 32px);
  container: startup / inline-size;
  overflow-wrap: anywhere;
}
.ob-startup-scene {
  --orbit-duration: 16s;
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  /* Clip only the artwork, leaving enlarged text and recovery controls scrollable. */
  overflow: hidden;
  /* Keep the rotating, window-wide field in front of the camera on large screens. */
  perspective: max(650px, 100vw);
  perspective-origin: 50% var(--sphere-center-y);
  pointer-events: none;
  isolation: isolate;
}
.ob-startup-scene::before {
  content: '';
  position: absolute;
  left: 50%;
  top: var(--sphere-center-y);
  width: calc(var(--sphere-radius) * 2.6);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--startup-accent) 12%, transparent), transparent 70%);
}
.ob-startup-orbit {
  position: absolute;
  left: 50%;
  top: var(--sphere-center-y);
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  animation: ob-startup-spin var(--orbit-duration) linear infinite;
  /* Rotation and gathering share one clock, including the first frame. */
  animation-delay: calc(0s - var(--startup-elapsed, 0s));
}
.ob-startup-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: translate3d(calc(var(--x) * var(--sphere-radius)), calc(var(--y) * var(--sphere-radius)), calc(var(--z) * var(--sphere-radius)));
  animation: ob-startup-gather 2.1s cubic-bezier(.45, 0, .2, 1) both;
  animation-delay: calc(var(--arrival) - var(--startup-elapsed, 0s));
}
.ob-startup-dot {
  display: block;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2);
  border-radius: 50%;
  background: var(--startup-accent);
  box-shadow: 0 0 5px color-mix(in srgb, var(--startup-accent) 22%, transparent);
  animation: ob-startup-face var(--orbit-duration) linear infinite, ob-startup-depth var(--orbit-duration) linear infinite;
  animation-delay: calc(0s - var(--startup-elapsed, 0s)), calc(var(--depth-phase) - var(--startup-elapsed, 0s));
}
@keyframes ob-startup-gather {
  from { transform: translate3d(calc((var(--sx) - .5) * 100vw), calc(var(--sy) * 100dvh - var(--sphere-center-y)), 0); }
  to { transform: translate3d(calc(var(--x) * var(--sphere-radius)), calc(var(--y) * var(--sphere-radius)), calc(var(--z) * var(--sphere-radius))); }
}
@keyframes ob-startup-spin { to { transform: rotateY(360deg); } }
@keyframes ob-startup-face { to { transform: rotateY(-360deg); } }
@keyframes ob-startup-depth {
  0%, 100% { opacity: 1; }
  50% { opacity: .22; }
}
.ob-startup .ob-startup-brand {
  margin: 0;
  color: inherit;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: var(--ob-text-stat);
  font-weight: 750;
  letter-spacing: -.045em;
  line-height: 1.3;
}
.ob-startup-brand span { color: var(--startup-accent); }
.ob-startup .ob-startup-tagline { margin: 12px 0 0; color: var(--ob-muted, #687083); font-size: var(--ob-text-body); line-height: 1.6; }
.ob-startup-status { margin-top: 24px; }
.ob-startup .ob-startup-message { margin: 0; color: var(--ob-secondary, #4c5569); font-size: var(--ob-text-helper); line-height: 1.7; overflow-wrap: anywhere; }
.ob-startup .ob-startup-recovery { margin-top: 24px; }
.ob-startup-recovery p { margin: 0 0 16px; color: var(--ob-muted, #687083); font-size: var(--ob-text-helper); line-height: 1.7; overflow-wrap: anywhere; }
.ob-startup .ob-startup-retry {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  max-width: 100%;
  padding: 12px 24px;
  border: 1px solid var(--ob-accent-border, #d8cef4);
  border-radius: 10px;
  background: var(--ob-surface, #fff);
  color: var(--startup-accent);
  font-family: inherit;
  font-size: var(--ob-text-control);
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
}
.ob-startup-retry:focus-visible { outline: 2px solid var(--startup-accent); outline-offset: 4px; }
.ob-startup-retry:hover { background: var(--ob-accent-soft, #f0ecff); }
.ob-startup[data-state='error'] :is(.ob-startup-orbit, .ob-startup-particle, .ob-startup-dot) { animation-play-state: paused; }
.ob-startup-recovery[data-visible='false'] { display: none; }
.ob-startup[data-startup-static]:not([data-state='error']) .ob-startup-recovery {
  visibility: hidden;
  height: 0;
  margin-top: 0;
  overflow: hidden;
  animation: ob-startup-recovery 0s 15s forwards;
}
@keyframes ob-startup-recovery { to { visibility: visible; height: auto; margin-top: 24px; } }
@container startup (max-width: 10rem) {
  .ob-startup .ob-startup-brand { font-size: var(--ob-text-brand); }
}
@media (prefers-reduced-motion: reduce) {
  .ob-startup :is(.ob-startup-orbit, .ob-startup-particle, .ob-startup-dot) { animation: none; }
  .ob-startup-dot { opacity: calc(.6 + var(--z) * .4); }
}
@media (prefers-color-scheme: dark) {
  /* The saved console theme takes over once account preferences are available. */
  html:not([data-console-appearance]) .ob-startup:not([data-startup-surface='website']) { --ob-canvas: #151821; --ob-surface: #202430; --ob-ink: #f1f2f6; --ob-muted: #a9b0c2; --ob-secondary: #c4cad8; --ob-accent: #a58cff; --ob-accent-subtle: #201d30; --ob-accent-border: #453861; --ob-accent-soft: #30283f; }
}
html[data-console-motion='reduced'] .ob-startup :is(.ob-startup-orbit, .ob-startup-particle, .ob-startup-dot) { animation: none; }
html[data-console-motion='reduced'] .ob-startup-dot { opacity: calc(.6 + var(--z) * .4); }