/* Site shell: the burn scene and the Dust & Space portrait share one page.
   Each module keeps its own DOM, styles and input handling; these rules only
   stack the two as full-viewport layers and place the fire curtain and cursor
   handoff over them. Nothing here reaches inside either module. */

html,
body {
  /* Opaque underlay while the reconstructed opening initializes. */
  background: #050403;
  /* A sideways trackpad swipe must not turn the page back in history. */
  overscroll-behavior-x: none;
}

body {
  background-image: none;
}

.stage {
  position: fixed;
  inset: 0;
  overflow: clip;
  contain: paint;
}

.stage-inscriptions {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  user-select: none;
  overflow: clip;
  contain: paint;
}

/* One full-viewport box per inscription, so each carries its own small lens. */
.stage-inscriptions__mark {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

/* The burn layer carries the Fire.jpg first-paint underlay so its WebGL frame
   and the sheet beneath it are still one picture. */
.stage--burn {
  z-index: 1;
  background: #0d0b09 url("../../Assets/optimized/home-fire.webp") center / cover no-repeat;
}
/* The opaque WebGL frame covers the underlay completely once it is up. */
.stage--burn:has(> #burn-fx.is-ready) { background-image: none; }

/* Appears only if both the delivery asset and its original fallback fail. */
.site-load-retry {
  position: fixed;
  z-index: 10020;
  left: 50%;
  bottom: max(28px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  padding: 12px 18px;
  border: 0;
  background: #050403b3;
  color: #d3caba;
  font: 16px Gabriela, Georgia, serif;
  cursor: pointer !important;
}

/* Sits above the flame cursor and the inscription canvases; the portrait is
   opaque, so once shown it fully replaces the burn scene. */
.stage--portrait {
  z-index: 10002;
  visibility: hidden;
}

.stage.is-hidden { visibility: hidden; }
.stage--portrait.is-shown { visibility: visible; }

.stage--portrait .portrait {
  height: 100%;
  min-height: 0;
}

/* A continuous fire front and cursor handoff over the shared scene reveal. */
#stage-fire {
  position: fixed;
  inset: 0;
  z-index: 10003;
  display: none;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  contain: strict;
}
#stage-fire.is-live { display: block; }

.stage-fire--fallback {
  background: #000;
  opacity: var(--fire-cover, 0);
}

#stage-cursor {
  position: fixed;
  inset: 0;
  z-index: 10004;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  contain: strict;
}

/* The flame cursor belongs to the burn scene. It is already covered by the
   portrait layer; skip compositing it while the portrait is on screen. */
html[data-stage="portrait"] #cursor-fx { visibility: hidden; }
html[data-stage="intro"] #cursor-fx { visibility: hidden; }
html[data-stage="transit"] #cursor-fx { opacity: var(--burn-pointer-opacity, 1); }

/* System cursor. cursor.js hides it for the flame. In Space the portrait's
   black hole is the pointer, so it stays hidden; the liquid in Dust is a
   trail rather than a marker, so the arrow returns there. The scene switch
   always shows a hand. */
@media (hover: hover) and (pointer: fine) {
  html.cursor-ready[data-stage="portrait"] .portrait[data-scene="dust"],
  html.cursor-ready[data-stage="portrait"] .portrait[data-scene="dust"] * {
    cursor: auto !important;
  }
  html.cursor-ready[data-stage="portrait"] .portrait[data-scene] .scene-switch,
  html.cursor-ready[data-stage="portrait"] .portrait[data-scene] .scene-switch *,
  html.cursor-ready[data-stage="transit"] .portrait[data-scene] .scene-switch,
  html.cursor-ready[data-stage="transit"] .portrait[data-scene] .scene-switch *,
  html.cursor-ready[data-stage="portrait"] .portrait[data-scene] .portrait-home,
  html.cursor-ready[data-stage="transit"] .portrait[data-scene] .portrait-home {
    cursor: pointer !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage { will-change: auto; }
}