/* Boot overlay chrome (canvas, brand, hero). */

#boot-overlay {
  position: fixed;
  inset: 0;
  z-index: 10008;
  isolation: isolate;
  display: block;
  background-color: #000;
  color: #e8e6df;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* A drag across the board must not paint the title as a text selection. */
  user-select: none;
  -webkit-user-select: none;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}
html.booting #boot-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* Out of the render tree once the fade is over. `visibility: hidden` alone leaves the
 * status spinner's infinite animation running and the dead boot canvas laid out for the
 * rest of the session. */
html.booted #boot-overlay {
  display: none;
}
html.booting #loading-indicator,
html.booting #spinner { display: none !important; }
#boot-overlay-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* The board is a cinematic, not a viewport: no pointer target, no grab cursor. */
  pointer-events: none;
  transform: translateZ(0);
}
#boot-overlay-design {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  color: inherit;
  background: radial-gradient(
    ellipse at 48% 40%,
    transparent 26%,
    rgba(0, 0, 0, 0.5) 100%
  );
}
#boot-overlay .boot-brand {
  position: absolute;
  top: 28px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
  color: inherit;
  text-decoration: none;
  transform: translateX(-50%);
}
#boot-overlay .boot-brand-mark {
  width: 200px;
  height: 33px;
  flex-shrink: 0;
  -webkit-mask: url('/static/arena-physica-logo.svg') no-repeat left center / contain;
          mask: url('/static/arena-physica-logo.svg') no-repeat left center / contain;
  background-color: currentColor;
}
#boot-overlay .boot-hero {
  position: absolute;
  left: 56px;
  bottom: 56px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
#boot-overlay .boot-title-row {
  display: flex;
  align-items: flex-start;
}
#boot-overlay .boot-title {
  --boot-title-size: clamp(36px, 4.6vw, 64px);
  margin: 0;
  font: 500 var(--boot-title-size)/1.02 var(--font-sans);
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: inherit;
}
#boot-overlay .boot-title-accent { color: var(--accent); }
/* Superscript on Studio. The raise is a fraction of the title size so a 12px
 * pill tracks the heading; relative offset does not grow the line box. */
#boot-overlay .boot-beta {
  display: inline-block;
  position: relative;
  top: calc(var(--boot-title-size) * -0.52);
  vertical-align: baseline;
  margin-left: 0.28em;
  padding: 3px 9px 2px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font: 400 12px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#boot-overlay .boot-launch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border: 0;
  border-radius: 8px;
  background: #ff523e;
  color: #fff;
  font: 700 11px/0.86 var(--font-mono);
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
}
#boot-overlay .boot-launch:hover { opacity: 0.9; }
#boot-overlay[data-stage="error"] .boot-launch { display: none; }
#boot-overlay-error {
  max-width: 36ch;
  margin: 10px 0 0;
  font: 400 11px/1.4 var(--font-mono);
  color: rgba(232, 230, 223, 0.7);
}

@media (pointer: coarse) and (max-width: 900px) and (orientation: portrait) {
  #boot-overlay .boot-hero {
    right: 16px;
    bottom: max(20px, env(safe-area-inset-bottom));
    left: 16px;
    gap: 12px;
  }
  #boot-overlay .boot-title {
    --boot-title-size: clamp(27px, 8vw, 32px);
    max-width: 100%;
  }
  #boot-overlay .boot-beta {
    top: calc(var(--boot-title-size) * -0.48);
    margin-left: 0.2em;
    padding: 2px 6px;
    font-size: 9px;
  }
  #boot-overlay .boot-launch {
    padding: 13px 18px;
    font-size: 10px;
  }
}