/* Adapted from UI Vault sections/Content Workspace/model-004 (Booketeer):
   same four-step scroll story (manuscript → indexing scan → story context →
   scene index) driven by GSAP + ScrollTrigger, laid out like #campaigns:
   one text slot on the left, the workspace on the right.

   Changed on request: the header is only "Meet Booketeer" (the overline,
   headline and intro paragraph are gone) with no rule under it; colour marks
   the story information (selected passage, the four scene attributes and the
   matching tags).

   Kept from the model: square corners everywhere (no border-radius in this
   section), the grey workspace the photo fills, and the scanned page is a
   real printed book page: paper, serif justified text, running head, folio,
   the gutter shadow and the leaves stacked under it. The story context and
   the scene index open out of that page, which stays behind them.

   Progressive enhancement, as in components/flow: the base styles are a
   static list; booketeer.js adds .is-animated at ≥1024px without reduced
   motion, and only then the sticky stage exists. */

.mira-bk {
  --bk-ease: cubic-bezier(.22, 1, .36, 1);
  /* category colours (reuse the flow palette: see DESIGN-SYSTEM §6 undecies) */
  --bk-character: var(--ui-account-1);
  --bk-emotion: var(--ui-account-2);
  --bk-trope: var(--ui-account-3);
  --bk-moment: var(--ui-rating);

  position: relative;
  padding: 110px 0 96px;
  overflow-x: clip;
  background: var(--ui-bg);
  color: var(--ui-text);
}

.mira-bk__container {
  width: min(720px, calc(100% - 48px));
  margin: 0 auto;
}

/* Header: only the name, no rule under it. */
.mira-bk__header h2 {
  margin: 0;
  font-size: clamp(42px, 9vw, 64px);
  line-height: .96;
  letter-spacing: -.07em;
}

/* =========================================================
   STATIC LIST (base): step text, then its visual
========================================================= */

.mira-bk__stage {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 44px;
}

.mira-bk__copy,
.mira-bk__workspace { display: contents; }

.mira-bk__state--manuscript { order: 1; }
.mira-bk__photo { order: 2; }
.mira-bk__state--indexing { order: 3; }
.mira-bk__doc { order: 4; }
.mira-bk__state--context { order: 5; }
.mira-bk__analysis { order: 6; }
.mira-bk__state--ready { order: 7; }
.mira-bk__library { order: 8; }

.mira-bk__state { margin-top: 24px; }
.mira-bk__state--manuscript { margin-top: 0; }

.mira-bk__state-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  color: var(--ui-muted);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mira-bk__state-icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: none;
  place-items: center;
  border: 1px solid var(--ui-soft);
  background: var(--ui-surface);
  color: var(--ui-text);
  font-size: 20px;
  letter-spacing: 0;
}

.mira-bk__state--ready .mira-bk__state-icon {
  border-color: var(--ui-success);
  background: var(--ui-success);
  color: var(--ui-on-accent);
}

.mira-bk__state h3 {
  max-width: 460px;
  margin: 0;
  font-size: clamp(30px, 6vw, 44px);
  line-height: 1;
  letter-spacing: -.06em;
}

.mira-bk__state p {
  max-width: 420px;
  margin: 14px 0 0;
  color: var(--ui-muted);
  font-size: var(--fs-body);
  line-height: 1.6;
}

.mira-bk__scan { display: none; }

/* =========================================================
   PHOTO
========================================================= */

.mira-bk__photo {
  position: relative;
  height: 260px;
  margin: 0;
  overflow: hidden;
  background: var(--ui-gray-100);
}

.mira-bk__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mira-bk__photo-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--ui-shadow-rgb), .02) 40%, rgba(var(--ui-shadow-rgb), .6));
}

.mira-bk__photo figcaption {
  position: absolute;
  right: 24px;
  bottom: 22px;
  left: 24px;
  color: var(--ui-on-photo);
}

.mira-bk__photo figcaption span {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .8;
}

.mira-bk__photo figcaption strong {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: -.05em;
}

/* =========================================================
   THE BOOK PAGE (indexing)
   A verso page: running head, justified serif text with
   indented paragraphs, folio at the foot, the gutter shading
   toward the spine on the right and a few leaves under it.
========================================================= */

.mira-bk__doc { position: relative; }

.mira-bk__page {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 30px 22px 26px;
  background:
    /* gutter: the page curves into the spine */
    linear-gradient(270deg, rgba(var(--ui-shadow-rgb), .13), rgba(var(--ui-shadow-rgb), .04) 5%, transparent 13%),
    /* fore-edge catching the light */
    linear-gradient(90deg, rgba(var(--ui-shadow-rgb), .05), transparent 3%),
    var(--ui-paper);
  color: var(--ui-paper-ink);
  box-shadow:
    -2px 2px 0 var(--ui-paper-edge),
    -3px 3px 0 var(--ui-paper),
    -5px 5px 0 var(--ui-paper-edge),
    -6px 6px 0 var(--ui-paper),
    -7px 7px 0 var(--ui-paper-edge),
    0 30px 70px rgba(var(--ui-shadow-rgb), .16);
}

.mira-bk__runhead {
  margin-bottom: 1.4em;
  color: var(--ui-paper-muted);
  font-family: var(--font-book);
  font-size: var(--fs-label);
  font-variant: small-caps;
  letter-spacing: .16em;
  text-align: center;
  text-transform: lowercase;
}

.mira-bk__text {
  position: relative;
  flex: 1;
  min-height: 0;
}

.mira-bk__para {
  position: relative;
  margin: 0;
  font-family: var(--font-book);
  font-size: var(--fs-label);
  line-height: 1.55;
  text-align: justify;
  text-indent: 1.5em;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* the page opens mid-sentence, carried over from p. 183 */
.mira-bk__para:first-child { text-indent: 0; }

/* Margin mark Booketeer leaves on each paragraph it has read. */
.mira-bk__tick {
  position: absolute;
  top: .3em;
  bottom: .3em;
  left: -14px;
  width: 2px;
  background: var(--bk-character);
  opacity: .55;
}

/* The passage Booketeer picks: a highlighter stroke that runs line by line
   (background-size on an inline span, sliced across its line boxes). */
.mira-bk__passage {
  background-image: linear-gradient(color-mix(in srgb, var(--bk-character) 18%, transparent), color-mix(in srgb, var(--bk-character) 18%, transparent));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-box-decoration-break: slice;
  box-decoration-break: slice;
  color: var(--ui-paper-ink);
}

.mira-bk__folio {
  margin-top: auto;
  padding-top: 1.2em;
  color: var(--ui-paper-muted);
  font-family: var(--font-book);
  font-size: var(--fs-label);
  text-align: center;
}

/* =========================================================
   PANELS (story context, scene index)
========================================================= */

.mira-bk__analysis,
.mira-bk__library {
  position: relative;
  padding: 22px;
  border: 1px solid var(--ui-soft);
  background: var(--ui-surface);
  box-shadow: 0 30px 80px rgba(var(--ui-shadow-rgb), .1);
}

.mira-bk__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--ui-gray-100);
}

.mira-bk__panel-head small,
.mira-bk__panel-head strong { display: block; }

.mira-bk__panel-head small,
.mira-bk__quote small {
  margin-bottom: 4px;
  color: var(--ui-muted);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mira-bk__panel-head strong {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.04em;
}

/* ---------- story context ---------- */

.mira-bk__analysis-body {
  display: grid;
  gap: 18px;
}

/* The quote keeps the book's serif: it is the page's own sentence. */
.mira-bk__quote blockquote {
  margin: 6px 0 0;
  font-family: var(--font-book);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.18;
  letter-spacing: -.02em;
}

.mira-bk__attrs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mira-bk__attr {
  --c: var(--ui-soft);
  padding: 14px 16px;
  border-left: 3px solid var(--c);
  background: color-mix(in srgb, var(--c) 10%, var(--ui-surface));
}

.mira-bk__attr--character { --c: var(--bk-character); }
.mira-bk__attr--emotion { --c: var(--bk-emotion); }
.mira-bk__attr--trope { --c: var(--bk-trope); }
.mira-bk__attr--moment { --c: var(--bk-moment); }

.mira-bk__attr span,
.mira-bk__attr strong { display: block; }

.mira-bk__attr span {
  color: var(--ui-muted);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mira-bk__attr strong {
  margin-top: 2px;
  font-size: var(--fs-body);
}

/* ---------- scene index ---------- */

.mira-bk__count {
  color: var(--ui-muted);
  font-size: var(--fs-small);
}

.mira-bk__count strong {
  display: inline;
  margin-right: 4px;
  color: var(--ui-text);
  font-size: 28px;
}

.mira-bk__scenes {
  display: grid;
  gap: 6px;
}

.mira-bk__scene {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto 28px;
  gap: 14px;
  align-items: center;
  padding: 10px 12px;
  background: var(--ui-gray-50);
}

.mira-bk__scene.is-active {
  background: color-mix(in srgb, var(--bk-character) 10%, var(--ui-surface));
  box-shadow: inset 3px 0 0 var(--bk-character);
}

.mira-bk__scene-no {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  background: var(--ui-surface);
  color: var(--ui-muted);
  font-size: var(--fs-label);
  font-weight: 700;
}

.mira-bk__scene.is-active .mira-bk__scene-no {
  background: var(--bk-character);
  color: var(--ui-on-accent);
}

.mira-bk__scene-main small,
.mira-bk__scene-main strong { display: block; }

.mira-bk__scene-main small {
  color: var(--ui-muted);
  font-size: var(--fs-label);
}

.mira-bk__scene-main strong { font-size: var(--fs-small); }

.mira-bk__scene-tags {
  display: flex;
  gap: 6px;
}

.mira-bk__tag {
  --c: var(--ui-soft);
  padding: 3px 10px;
  background: color-mix(in srgb, var(--c) 14%, var(--ui-surface));
  color: var(--ui-text);
  font-size: var(--fs-label);
  white-space: nowrap;
}

.mira-bk__tag--emotion { --c: var(--bk-emotion); }
.mira-bk__tag--trope { --c: var(--bk-trope); }

.mira-bk__scene-go {
  color: var(--ui-muted);
  font-size: 18px;
  transition: transform .35s var(--bk-ease), color .25s ease;
}

.mira-bk__scene.is-active .mira-bk__scene-go {
  color: var(--bk-character);
  transform: translateX(3px);
}

.mira-bk__library-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ui-gray-100);
  color: var(--ui-muted);
  font-size: var(--fs-small);
}

.mira-bk__library-foot strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ui-success);
}

.mira-bk__library-foot iconify-icon { font-size: 18px; }

/* =========================================================
   ANIMATED STAGE (≥1024px, set by booketeer.js)
========================================================= */

.mira-bk.is-animated {
  height: 460vh;
  padding: 0;
}

.mira-bk.is-animated .mira-bk__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.mira-bk.is-animated .mira-bk__container {
  display: grid;
  grid-template-rows: auto 1fr;
  width: min(1440px, calc(100% - 80px));
  height: 100vh;
  padding: 136px 0 28px;
}

.mira-bk.is-animated .mira-bk__header h2 { font-size: clamp(40px, 4.4vw, 76px); }

.mira-bk.is-animated .mira-bk__stage {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(300px, .34fr) minmax(0, .66fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 20px 56px;
  margin-top: 28px;
}

.mira-bk.is-animated .mira-bk__copy {
  position: relative;
  display: block;
  grid-row: 1;
  grid-column: 1;
}

.mira-bk.is-animated .mira-bk__state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  opacity: 0;
  visibility: hidden;
}

.mira-bk.is-animated .mira-bk__state h3 { font-size: clamp(34px, 3.3vw, 56px); }

/* The model's grey table: the photo fills it, the page lies on it. */
.mira-bk.is-animated .mira-bk__workspace {
  position: relative;
  display: block;
  grid-row: 1;
  grid-column: 2;
  min-height: 0;
  overflow: hidden;
  background: var(--ui-gray-100);
}

.mira-bk.is-animated .mira-bk__photo {
  position: absolute;
  inset: 0;
  height: auto;
}

/* The page: the text is cut to whole lines by booketeer.js. */
.mira-bk.is-animated .mira-bk__doc {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* One fixed page (3:4), scaled as a whole to fit the workspace: like a real
   sheet seen from further away, it keeps the same lines at every size.
   booketeer.js sets --bk-fit. No status pill above it (no "AI status" chips, DESIGN-SYSTEM §4). */
.mira-bk.is-animated .mira-bk__page {
  flex: none;
  width: 440px;
  height: 586px;
  padding: 38px 30px 26px 28px;
  transform: scale(var(--bk-fit, 1));
}

/* Cut at the page's last line; the padding keeps the margin marks visible. */
.mira-bk.is-animated .mira-bk__text {
  margin-left: -18px;
  padding-left: 18px;
  overflow: hidden;
}

/* Panels open over the page, centred on the workspace. */
.mira-bk.is-animated .mira-bk__analysis,
.mira-bk.is-animated .mira-bk__library {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: min(660px, 90%);
  height: fit-content;
  max-height: 92%;
  margin: auto;
}

.mira-bk.is-animated .mira-bk__attrs { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Scanner: a hard line with the light it leaves behind, sweeping the page
   from the running head to the folio. */
.mira-bk.is-animated .mira-bk__scan {
  position: absolute;
  z-index: 3;
  top: 0;
  right: -4px;
  left: -4px;
  display: block;
  height: 2px;
  background: var(--bk-character);
  box-shadow: 0 0 16px 1px color-mix(in srgb, var(--bk-character) 55%, transparent);
  pointer-events: none;
}

.mira-bk.is-animated .mira-bk__scan::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 72px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bk-character) 12%, transparent));
}

/* =========================================================
   ICON MOTION (UI Vault assets/icons, semantic motion)
========================================================= */

.mira-bk [data-motion="lift"].is-active .mira-bk__state-icon iconify-icon { display: inline-block; animation: mira-bk-lift .55s var(--bk-ease) .15s; }
.mira-bk [data-motion="scan"].is-active .mira-bk__state-icon iconify-icon { display: inline-block; animation: mira-bk-scan .7s ease .15s; }
.mira-bk [data-motion="pop"].is-active .mira-bk__state-icon iconify-icon { display: inline-block; animation: mira-bk-pop .45s var(--bk-ease) .15s; }

@keyframes mira-bk-lift { 50% { transform: translateY(-6px); } }
@keyframes mira-bk-scan { 45% { transform: scale(.92); } 70% { transform: scale(1.08); } }
@keyframes mira-bk-pop { 45% { transform: scale(1.2); } 70% { transform: scale(.96); } }

/* =========================================================
   RESPONSIVE (system breakpoints only)
========================================================= */

@media (max-width: 1279.98px) {
  .mira-bk.is-animated .mira-bk__container { width: min(1200px, calc(100% - 48px)); }
  .mira-bk.is-animated .mira-bk__stage {
    grid-template-columns: minmax(260px, .36fr) minmax(0, .64fr);
    gap: 20px 36px;
  }
  .mira-bk.is-animated .mira-bk__attrs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mira-bk__scene-tags .mira-bk__tag--trope { display: none; }
}

@media (max-width: 767.98px) {
  .mira-bk__scene { grid-template-columns: 36px minmax(0, 1fr) 20px; gap: 10px; }
  .mira-bk__scene-tags { display: none; }
  .mira-bk__page { padding: 24px 22px 18px 24px; }
  .mira-bk__analysis,
  .mira-bk__library { padding: 18px; }

  /* Phone: the four steps are a carousel (scripts/mobile-rail.js), each
     column a step over its visual; replaces the 3,000px list (2026-09-23,
     on request). */
  .mira-bk__stage {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: auto auto;
    grid-auto-columns: calc(100vw - 72px);
    gap: 20px 14px;
    align-items: start;
  }
  .mira-bk__state { grid-row: 1; margin: 0; scroll-snap-align: start; }
  .mira-bk__photo,
  .mira-bk__doc,
  .mira-bk__analysis,
  .mira-bk__library { grid-row: 2; }
  .mira-bk__state--manuscript, .mira-bk__photo { grid-column: 1; }
  .mira-bk__state--indexing, .mira-bk__doc { grid-column: 2; }
  .mira-bk__state--context, .mira-bk__analysis { grid-column: 3; }
  .mira-bk__state--ready, .mira-bk__library { grid-column: 4; }

  /* the printed page is long: its top half, fading into the paper */
  .mira-bk__doc {
    max-height: 420px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent);
    mask-image: linear-gradient(180deg, #000 72%, transparent);
  }
}

/* =========================================================
   STEPPED STAGE (<1024px, set by booketeer-mobile.js)
   The desktop story in one column: the stage is sticky, the scroll
   picks the step (data-bk-phase 0–3) and each step plays as a CSS
   transition. Header, the step's text, the workspace (no progress bar,
   see DESIGN-SYSTEM §6 undecies).
   Overrides the phone carousel while it runs.
========================================================= */

.mira-bk.is-stepped {
  height: 420vh;
  height: 420svh;
  padding: 0;
}

.mira-bk.is-stepped .mira-bk__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* 108px clears the floating navbar (it ends at 92px on every width) */
.mira-bk.is-stepped .mira-bk__container {
  display: flex;
  flex-direction: column;
  width: min(720px, calc(100% - 48px));
  height: 100%;
  padding: 108px 0 20px;
}

.mira-bk.is-stepped .mira-bk__header h2 { font-size: clamp(36px, 9vw, 56px); }

.mira-bk.is-stepped .mira-bk__stage {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: stretch; /* the carousel's "start" would shrink the table to 0 */
  min-height: 0;
  gap: 16px;
  margin: 18px 0 0;
  padding: 0;
  overflow: visible;
  scroll-snap-type: none;
}

/* ---------- the step's text: the four states share one cell ---------- */

.mira-bk.is-stepped .mira-bk__copy { display: grid; }

.mira-bk.is-stepped .mira-bk__state {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(22px);
  transition:
    opacity .3s ease,
    transform .45s var(--bk-ease),
    visibility 0s linear .3s;
}

.mira-bk.is-stepped .mira-bk__state.is-past { transform: translateY(-16px); }

.mira-bk.is-stepped .mira-bk__state.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity .45s ease .12s,
    transform .6s var(--bk-ease) .12s,
    visibility 0s;
}

.mira-bk.is-stepped .mira-bk__state-label { margin-bottom: 10px; }
.mira-bk.is-stepped .mira-bk__state-icon { width: 36px; height: 36px; font-size: 18px; }
.mira-bk.is-stepped .mira-bk__state h3 { font-size: clamp(26px, 6.6vw, 40px); }
.mira-bk.is-stepped .mira-bk__state p { margin-top: 8px; }

/* ---------- the workspace: the grey table, layers on top ---------- */

.mira-bk.is-stepped .mira-bk__workspace {
  position: relative;
  display: block;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--ui-gray-100);
}

.mira-bk.is-stepped .mira-bk__photo,
.mira-bk.is-stepped .mira-bk__doc,
.mira-bk.is-stepped .mira-bk__analysis,
.mira-bk.is-stepped .mira-bk__library {
  transition:
    opacity .55s ease,
    transform .7s var(--bk-ease),
    clip-path .75s var(--bk-ease);
}

.mira-bk.is-stepped .mira-bk__photo {
  position: absolute;
  inset: 0;
  height: auto;
}

.mira-bk.is-stepped[data-bk-phase="1"] .mira-bk__photo,
.mira-bk.is-stepped[data-bk-phase="2"] .mira-bk__photo,
.mira-bk.is-stepped[data-bk-phase="3"] .mira-bk__photo {
  opacity: 0;
  transform: scale(1.04);
}

/* The page: one fixed sheet scaled to the table (--bk-fit), as on desktop. */
.mira-bk.is-stepped .mira-bk__doc {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: none;
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
  opacity: 0;
  transform: translateY(26px) scale(.97);
}

.mira-bk.is-stepped[data-bk-phase="1"] .mira-bk__doc {
  opacity: 1;
  transform: none;
  transition-delay: .15s;
}

.mira-bk.is-stepped[data-bk-phase="2"] .mira-bk__doc,
.mira-bk.is-stepped[data-bk-phase="3"] .mira-bk__doc {
  opacity: .3;
  transform: scale(.94);
}

.mira-bk.is-stepped .mira-bk__page {
  flex: none;
  width: 440px;
  height: 586px;
  padding: 38px 30px 26px 28px;
  transform: scale(var(--bk-fit, 1));
}

.mira-bk.is-stepped .mira-bk__text {
  margin-left: -18px;
  padding-left: 18px;
  overflow: hidden;
}

/* margin marks and the highlighter follow the scanner (delays from JS);
   leaving the step, they clear at once */
.mira-bk.is-stepped .mira-bk__tick {
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform .25s ease-out;
}

.mira-bk.is-stepped .mira-bk__passage {
  background-size: 0% 100%;
  transition: background-size .2s linear;
}

.mira-bk.is-stepped:not([data-bk-phase="0"]) .mira-bk__tick { transform: none; }
.mira-bk.is-stepped:not([data-bk-phase="0"]) .mira-bk__passage { background-size: 100% 100%; }
.mira-bk.is-stepped[data-bk-phase="1"] .mira-bk__tick { transition-delay: var(--bk-d, 0s); }
.mira-bk.is-stepped[data-bk-phase="1"] .mira-bk__passage {
  transition-duration: var(--bk-dur, .6s);
  transition-delay: var(--bk-d, 0s);
}

.mira-bk.is-stepped .mira-bk__scan {
  position: absolute;
  z-index: 3;
  top: var(--bk-scan-from, 0);
  right: -4px;
  left: -4px;
  display: block;
  height: 2px;
  background: var(--bk-character);
  box-shadow: 0 0 16px 1px color-mix(in srgb, var(--bk-character) 55%, transparent);
  opacity: 0;
  pointer-events: none;
}

.mira-bk.is-stepped .mira-bk__scan::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 72px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bk-character) 12%, transparent));
}

.mira-bk.is-stepped[data-bk-phase="1"] .mira-bk__scan {
  animation: mira-bk-sweep var(--bk-sweep, 1.6s) linear var(--bk-sweep-delay, .55s) both;
}

@keyframes mira-bk-sweep {
  0% { opacity: 0; transform: translateY(0); }
  6%, 94% { opacity: 1; }
  100% { opacity: 0; transform: translateY(var(--bk-scan-dist, 400px)); }
}

/* ---------- the panels open out of the page, scaled to fit ---------- */

.mira-bk.is-stepped .mira-bk__analysis,
.mira-bk.is-stepped .mira-bk__library {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: min(660px, calc(100% - 24px));
  height: fit-content;
  margin: auto;
  opacity: 0;
  clip-path: inset(46% -20% 46% -20%);
  transform: translateY(20px) scale(var(--bk-panel-fit, 1));
}

.mira-bk.is-stepped[data-bk-phase="2"] .mira-bk__analysis,
.mira-bk.is-stepped[data-bk-phase="3"] .mira-bk__library {
  opacity: 1;
  clip-path: inset(-20% -20% -20% -20%);
  transform: scale(var(--bk-panel-fit, 1));
  transition-delay: .15s;
}

/* the context steps up and away as the index opens */
.mira-bk.is-stepped[data-bk-phase="3"] .mira-bk__analysis {
  clip-path: inset(-20% -20% -20% -20%);
  transform: translateY(-16px) scale(var(--bk-panel-fit, 1));
}

.mira-bk.is-stepped .mira-bk__attr,
.mira-bk.is-stepped .mira-bk__scene {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s ease, transform .5s var(--bk-ease);
}

.mira-bk.is-stepped[data-bk-phase="2"] .mira-bk__attr,
.mira-bk.is-stepped[data-bk-phase="3"] .mira-bk__scene {
  opacity: 1;
  transform: none;
  transition-delay: calc(.55s + var(--bk-i, 0) * .1s);
}

.mira-bk.is-stepped .rail-dots { display: none; }