/* Korpora public page — the stage beside the steps (site-story.css lays them out): a light studio panel in both themes,
   like the drawings. It shows the still of the step being read (the first one is the page's largest paint) and, after
   the reader's first move, the live scene of landing/story.js over them; the read-out in its corner carries the
   example's real numbers, from the server. */

/* the stage */
.stage {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 54svh;
  padding: 0 var(--gutter) 10px;
  background: var(--paper);
}
@media (min-width: 900px) {
  .stage {
    position: static;
    height: auto;
    padding: 0;
    background: none;
  }
}
.stage-frame {
  position: relative;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: var(--studio);
  box-shadow: inset 0 0 0 1px rgb(52 48 47 / 0.06);
  isolation: isolate;
}
@media (min-width: 900px) {
  .stage-frame {
    position: sticky;
    top: var(--stage-pad);
    height: calc(100svh - 2 * var(--stage-pad));
    margin: var(--stage-pad) 0;
    border-radius: 26px;
  }
}
.still,
.stage-gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.still {
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.55s ease;
}
.stage[data-step='1'] .still[data-still='1'],
.stage[data-step='2'] .still[data-still='2'],
.stage[data-step='3'] .still[data-still='3'],
.stage[data-step='4'] .still[data-still='4'] {
  opacity: 1;
}
/* the live scene: over the stills, faded in once its first frame is drawn */
.stage-gl {
  opacity: 0;
  transition: opacity 0.7s ease;
}
.stage-gl canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.stage.is-live .stage-gl {
  opacity: 1;
}

/* the read-out of the live scene: real numbers of the example, one group per step */
.stage-hud {
  position: absolute;
  left: clamp(10px, 1.6vw, 22px);
  top: clamp(10px, 1.6vw, 22px);
  max-width: calc(100% - 2 * clamp(10px, 1.6vw, 22px));
  padding: 10px 14px;
  border-radius: 12px;
  background: rgb(250 251 247 / 0.86);
  backdrop-filter: blur(8px);
  color: #34302f;
  box-shadow:
    0 1px 0 rgb(52 48 47 / 0.06),
    0 10px 26px -18px rgb(52 48 47 / 0.6);
}
.stage-hud dl {
  display: none;
  margin: 0;
  gap: 4px 22px;
  grid-template-columns: repeat(2, auto);
}
.stage[data-step='1'] [data-hud='1'],
.stage[data-step='2'] [data-hud='2'],
.stage[data-step='3'] [data-hud='3'],
.stage[data-step='4'] [data-hud='4'] {
  display: grid;
}
.stage-hud dt {
  font-size: 0.72rem;
  color: #6f6963;
}
.stage-hud dd {
  margin: 0;
  font: 500 0.95rem/1.3 var(--f-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stage-hud .hud-line {
  grid-column: 1 / -1;
}
@media (max-width: 599px) {
  .stage-hud {
    padding: 7px 10px;
  }
  .stage-hud dl {
    gap: 2px 14px;
  }
  .stage-hud dt {
    font-size: 0.66rem;
  }
  .stage-hud dd {
    font-size: 0.78rem;
  }
}
/* a phone: the two read-outs of a step stack as label-and-value rows, so the real numbers (2 400 × 2 170 × 600 mm, in any
   language) wrap instead of running out of the frame */
@media (max-width: 479px) {
  .stage-hud {
    right: clamp(10px, 1.6vw, 22px);
  }
  .stage-hud dl {
    grid-template-columns: 1fr;
  }
  .stage-hud dl > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }
  .stage-hud dd {
    white-space: normal;
    text-align: right;
  }
}
.stage-hud .hud-line dd {
  font-size: 0.8rem;
  color: #865c04;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
  .still,
  .stage-gl {
    transition: none;
  }
}