/* World-intro cinematic (and the town's memory cutscenes, which play through it).
   Self-contained, removable with intro.js. Drawn as the run's book on the desk: the
   Folio primitives (.fo-stage, .fo-book, .fo-spread, .fo-sheet, .fo-plate) carry the
   book's size, scale and leather binding; this file only lays the chapter on it. On a
   computer the chapter's art is the left page's plate with its place in the sequence
   at the foot, the title, text and controls the right page; on a phone one page, the
   art on top. The controls are the tutorial note's: Mute and Skip as words, plain ink
   arrows around the chapter's number. */

.manor-intro {
  position: fixed;
  inset: 0;
  z-index: 3000; /* above splash and every in-game surface */
  height: 100dvh;
  box-sizing: border-box;
  overflow: hidden;
}

/* One row the height of the screen: an auto row would grow to the chapter's length,
   so the page would outgrow the screen, its text would never scroll and the controls
   would sit below the fold with nothing to scroll them into view. */
.manor-intro.fo-stage--locked {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}

.manor-intro.fo-stage--locked .mi-spread {
  height: 100%;
  width: min(100%, 680px);
}

.manor-intro .mi-spread > .fo-sheet { min-height: 0; }

/* The left page: the plate, then the place line at its foot. */
.mi-left {
  gap: 14px;
}

.mi-place {
  flex: none;
  margin: 0;
  color: var(--folio-ink-soft);
  font-family: var(--folio-font-text);
  font-size: var(--folio-fs-m);
  font-style: italic;
  text-align: center;
}

/* The right page: the chapter (it scrolls if it must), then the controls. */
.mi-page {
  gap: 10px;
}

.mi-scroll {
  padding-inline: 0;
}

.mi-scroll.mi-in {
  animation: mi-fade 0.6s ease forwards;
}

@keyframes mi-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.mi-title {
  margin: 0;
  color: var(--folio-ink);
  font-family: var(--folio-font-text);
  font-size: var(--folio-fs-xl);
  font-style: italic;
  font-weight: 500;
  text-align: center;
  text-wrap: balance;
}

.mi-ornament {
  flex: none;
  align-self: center;
  margin-top: -4px;
}

.mi-text {
  color: var(--folio-ink);
  font-size: calc(var(--folio-fs-l) * var(--ui-scale, 1));
  line-height: 1.6;
  white-space: pre-line; /* honor \n in the catalog text as line breaks */
}

/* The art at the top of the page and the place line above the title: a phone only. */
.mi-art-top,
.mi-page .mi-place {
  display: none;
}

.manor-intro.fo-stage--locked .mi-left {
  display: none;
}

.manor-intro.fo-stage--locked .mi-art-top:not([hidden]) {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.manor-intro.fo-stage--locked .mi-page .mi-place {
  display: block;
}

.mi-plate[hidden],
.fo-plate[hidden] {
  display: none;
}

/* The controls: Mute on the left, back, the chapter's number, forward, Skip. */
.mi-footer {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1.5px solid var(--folio-ink);
}

.mi-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mi-progress {
  min-width: 3.4em;
  color: var(--folio-ink);
  font-size: var(--folio-fs-m);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.mi-back,
.mi-next,
.mi-skip,
.mi-mute {
  padding: 4px;
  border: 0;
  background: none;
  color: var(--folio-ink);
  font-family: var(--folio-font-text);
  font-size: var(--folio-fs-m);
  cursor: pointer;
}

.mi-back,
.mi-next {
  display: grid;
  place-items: center;
  width: 44px;
  height: 38px;
  font-size: 26px;
  line-height: 1;
}

.mi-skip,
.mi-mute {
  color: var(--folio-ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Muted reads struck through, so it is plain at a glance. */
.mi-mute[aria-pressed='true'] {
  text-decoration: line-through;
}

.mi-back:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.manor-intro button:focus-visible {
  outline: 2px solid var(--folio-ink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .mi-scroll.mi-in {
    animation: none;
    opacity: 1;
  }
}