/* ============================================================
   INTERACTIVE-FIRST PRESENTATION

   The fallback stays hidden until the visitor explicitly
   chooses the static experience.
   ============================================================ */

/* Hide the fallback immediately, before JavaScript initializes. */
#fallback {
  display: none !important;
}

/* Never show a partially initialized canvas. */
#canvas-host {
  visibility: hidden !important;
  opacity: 0 !important;
  transition: none !important;
}

/* Only show the canvas after app.js confirms successful rendering. */
html[data-book-experience="ready"] #canvas-host {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Disable book click targets until the interactive book is ready. */
html:not([data-book-experience="ready"]) .book-hit-area,
html:not([data-book-experience="ready"]) .book-page-navigation {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Our status message replaces the small original renderer status. */
#render-status {
  display: none !important;
}

/* ============================================================
   LOADING / ERROR MESSAGE
   ============================================================ */

#book-experience-status {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 30px;
  text-align: center;
  pointer-events: none;
}

#book-experience-status[hidden] {
  display: none !important;
}

.experience-status-mark {
  width: 32px;
  height: 32px;
  border: 1px solid #d3ae7280;
  box-shadow:
    inset 0 0 12px #d3ae7210,
    0 0 20px #d3ae720a;
  transform: rotate(45deg);
}

#book-experience-status p {
  max-width: 330px;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: .08em;
  color: var(--muted, #c5ad94);
}

/* ============================================================
   BOTTOM-RIGHT EXPERIENCE CONTROL
   ============================================================ */

#experience-help {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 40;

  max-width: min(340px, calc(100vw - 32px));
  padding: 10px 14px;

  color: var(--muted, #c5ad94);
  background: #211410ed;
  border: 1px solid #d3ae7233;
  border-radius: 4px;
  box-shadow: 0 4px 20px #0003;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  line-height: 1.7;
}

#experience-help a {
  color: var(--gold, #d3ae72);
  text-decoration: underline;
  text-underline-offset: 3px;
}

#experience-help a:focus-visible {
  outline: 2px solid var(--gold, #d3ae72);
  outline-offset: 4px;
}

/* Leave some space below footer content for the fixed link. */
footer {
  padding-bottom: 90px !important;
}

/* ============================================================
   EXPLICIT STATIC EXPERIENCE

   Keep the existing fallback illustration, but remove the
   sticky timeline and show the story as ordinary readable HTML.
   ============================================================ */

html[data-book-experience="static"] #stage {
  height: auto !important;
}

html[data-book-experience="static"] #scene {
  position: relative !important;
  top: auto !important;
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
}

html[data-book-experience="static"] #canvas-host {
  display: none !important;
}

html[data-book-experience="static"] #fallback {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

html[data-book-experience="static"] #book-area {
  position: relative;
  width: min(100%, 620px);
  height: 390px !important;
  min-height: 0 !important;
  margin: 30px auto;
}

html[data-book-experience="static"] .book-hit-area,
html[data-book-experience="static"] .book-page-navigation,
html[data-book-experience="static"] .journey-controls,
html[data-book-experience="static"] #hint,
html[data-book-experience="static"] .progress {
  display: none !important;
}

html[data-book-experience="static"] #stories {
  display: block !important;
  width: min(100%, 680px);
  margin: 0 auto;
}

html[data-book-experience="static"] .story {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;

  margin: 0;
  padding: 36px 10px !important;
  border-bottom: 1px solid #d3ae7226;
  scroll-margin-top: 130px;
}

html[data-book-experience="static"] .story:last-child {
  border-bottom: 0;
}

html[data-book-experience="static"] .story > p:last-child {
  max-width: 580px;
}

/* The static reading experience does not have an active page. */
html[data-book-experience="static"] .site-header nav a {
  border-bottom-color: transparent !important;
}

@media (max-width: 600px) {
  #experience-help {
    font-size: 9px;
    max-width: 280px;
    padding: 8px 11px;
  }

  html[data-book-experience="static"] #book-area {
    height: 320px !important;
  }

  html[data-book-experience="static"] .story {
    padding: 28px 4px !important;
  }
}