/* Section 5, the two mounts. Loaded after style.css and stages.css, so these
   rules win at equal specificity. Light background, one pinned stage, no
   frames or panels of any kind. */

.mounts {
  height: 420vh;
  background: var(--bg-light);
  color: var(--fg-light);
}

.mounts-pin {
  isolation: isolate;
}

/* The stage fills the pinned viewport; the composition is placed by the camera,
   not by boxes. */
#mounts-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
}

#mounts-stage canvas {
  cursor: default;
}

#mounts-stage.is-part canvas {
  cursor: pointer;
}

/* The two paper sentences lie under their own assemblies: plain text on the
   page, no column rule, no box. mounts.js centres each sentence under the
   assembly it describes and sets its top a little under the shared base line. */
.mounts-copy {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.mounts-copy .copy {
  position: absolute;
  top: 0;
  width: min(380px, 28vw);
  max-width: 380px;
  font-size: 17px;
  line-height: 1.42;
  letter-spacing: -0.008em;
  color: var(--muted-light);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.mounts-copy .copy[data-step="1"] {
  left: 6vw;
}

.mounts-copy .copy[data-step="2"] {
  left: 68vw;
}

.mounts-copy .copy.is-on {
  color: var(--fg-light);
  opacity: 1;
  transform: none;
}

/* Labels: plain text with a fine line, never a box. */
#mounts-stage .part-label {
  color: var(--fg-light);
  /* A long paper part name wraps instead of running under another assembly. */
  white-space: normal;
  width: max-content;
  max-width: 154px;
}

#mounts-stage .part-label__title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.005em;
}

#mounts-stage .part-label__sub {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: #4a4a4f;
  opacity: 1;
}

/* The cyan prompt under a hovered part's name: the human's words for the click,
   a chevron after them, no box, no background. Darker cyan, because this
   section is light. Only the part under the pointer carries it; the name that
   comes down with the module during the story stays a name. */
#mounts-stage .part-prompt {
  display: table;  /* shrink to its text, so the chevron follows the words */
  margin-top: 4px;
  padding-right: 12px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: #0a7f95;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path d='M3 1.4 5.7 4 3 6.6' fill='none' stroke='%230a7f95' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 2px center;
  background-size: 8px 8px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}

#mounts-stage .part-prompt.is-on {
  opacity: 1;
  transform: none;
}

#mounts-stage .part-line {
  background: #a1a1a6;
  opacity: 0;
}

#mounts-stage .part-line.is-on {
  opacity: 0.85;
}

/* The stage must not paint a plate of its own under the models. */
#mounts-stage::before,
#mounts-stage::after {
  content: none;
}

/* Out of this light section and into the dark one: a short dissolve, not a
   viewport of empty gradient. The tone block is the one directly after this
   section; style.css gives every tone 58vh, which read as an empty screen. */
.mounts + .tone--light-to-dark {
  height: 26vh;
}