/* Adapted from UI Vault sections/Content Workspace/model-001: same sticky
   scroll story (380vh, three states that wipe in with blur and a clip mask,
   pointer parallax on the layers) and the same photos, translated to MIRA's
   tokens. Changed on request: no "CONTENT CREATION" label, the question
   headline became the answer, and the step list lost its table look (row
   rules top and bottom) in favour of rounded tiles, the active one lifted as
   a card. Also gone: Manrope and Georgia, the beige greys, 8–12px text,
   square corners, and the 1150 / 850 / 580px breakpoints. */

.mira-content {
  --content-ease: cubic-bezier(.22, 1, .36, 1);

  position: relative;
  height: 380vh;
  overflow-x: clip; /* not hidden: that would break the sticky stage */
  background: var(--ui-bg);
  color: var(--ui-text);
}

.mira-content__sticky {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}

/* Starts below the floating menu, like #how. */
.mira-content__container {
  display: grid;
  grid-template-rows: auto 1fr;
  width: min(1440px, calc(100% - 80px));
  height: min(920px, 100vh);
  margin: 0 auto;
  padding: 136px 0 32px;
}

/* =========================================================
   HEADER
========================================================= */

.mira-content__header {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr);
  gap: 56px;
  align-items: end;
  padding-bottom: 28px;
}

.mira-content__header h2 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(40px, 4.4vw, 76px);
  line-height: .96;
  letter-spacing: -.07em;
}

.mira-content__header h2 span {
  display: block;
  color: var(--ui-muted);
}

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

/* =========================================================
   LAYOUT: visual (left) + steps (right)
========================================================= */

.mira-content__layout {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(0, 1.38fr) minmax(340px, .62fr);
  gap: clamp(48px, 6vw, 100px);
  align-items: center;
  padding-top: 32px;
}

/* =========================================================
   VISUAL SHELL + STATES
========================================================= */

.mira-content__shell {
  position: relative;
  width: 100%;
  height: min(560px, 56vh);
  min-height: 420px;
  overflow: hidden;
  border-radius: 20px;
  background: var(--ui-gray-100);
  perspective: 1300px;
}

.mira-content__state {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  filter: blur(12px);
  clip-path: inset(8% 0 8% 100%);
  transform: scale(.965) translateX(60px);
  transition:
    opacity 550ms ease,
    filter 750ms ease,
    clip-path 850ms var(--content-ease),
    transform 900ms var(--content-ease),
    visibility 550ms;
}

.mira-content__state.is-active {
  opacity: 1;
  visibility: visible;
  filter: blur(0);
  clip-path: inset(0);
  transform: none;
}

.mira-content__state.is-past {
  filter: blur(8px);
  clip-path: inset(0 100% 0 0);
  transform: scale(1.025) translateX(-40px);
}

.mira-content__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.mira-content__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The entry zoom lives on `scale`; content.js drifts the photo with
     `translate`, written per scroll frame and never transitioned, so the
     two no longer fight. 1.04 at rest leaves room for the ±9px drift. */
  scale: 1.1;
  transition: scale 2.4s var(--content-ease);
}

.mira-content__state.is-active .mira-content__media img { scale: 1.04; }

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

/* Shared: small caps labels inside the mock UI. */
.mira-content__caption span,
.mira-content__window-head > div > span,
.mira-content__paper-head,
.mira-content__generate-label,
.mira-content__book-copy span {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Shared: floating mock windows. */
.mira-content__window {
  position: absolute;
  z-index: 8;
  border: 1px solid var(--ui-soft);
  border-radius: 16px;
  background: rgba(var(--ui-surface-rgb), .96);
  box-shadow: 0 28px 80px rgba(var(--ui-shadow-rgb), .16);
  backdrop-filter: blur(18px);
}

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

.mira-content__window-head > div > span {
  display: block;
  margin-bottom: 4px;
  color: var(--ui-muted);
}

.mira-content__window-head strong {
  font-size: var(--fs-ui);
  font-weight: 700;
}

/* ---------- 01 · upload ---------- */

/* Bottom-right: the library window takes the left side of the photo. */
.mira-content__caption {
  position: absolute;
  z-index: 4;
  right: 40px;
  bottom: 34px;
  width: min(360px, 40%);
  color: var(--ui-on-photo);
}

.mira-content__caption span {
  display: block;
  margin-bottom: 10px;
  opacity: .75;
}

.mira-content__caption strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.05em;
}

.mira-content__upload {
  top: 40px;
  left: 40px;
  width: 380px;
  padding: 22px;
}

.mira-content__window-action {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--ui-soft);
  border-radius: 999px;
  flex: none;
  font-size: 18px;
  line-height: 1;
}

.mira-content__file {
  display: grid;
  grid-template-columns: 40px 1fr 24px;
  gap: 12px;
  align-items: center;
  min-height: 64px;
  border-bottom: 1px solid var(--ui-gray-100);
}

.mira-content__file-icon {
  display: grid;
  width: 40px;
  height: 46px;
  overflow: hidden;
  place-items: center;
  border-radius: 8px;
  background: var(--ui-gray-100);
  color: var(--ui-primary);
  font-size: var(--fs-label);
  font-weight: 700;
}

.mira-content__file-icon img { width: 100%; height: 100%; object-fit: cover; }
.mira-content__file-icon--dark { background: var(--ui-deep); color: var(--ui-bg); }

.mira-content__file-info strong,
.mira-content__file-info span { display: block; }
.mira-content__file-info strong { font-size: var(--fs-small); font-weight: 700; }
.mira-content__file-info span { margin-top: 2px; color: var(--ui-muted); font-size: var(--fs-label); }

.mira-content__check {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: var(--ui-success);   /* semantic: file ready */
  color: var(--ui-on-accent);
  font-size: 12px; /* glyph */
}

.mira-content__window-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  color: var(--ui-muted);
  font-size: var(--fs-label);
}

.mira-content__fake-button {
  padding: 9px 14px;
  border-radius: 10px;
  background: var(--ui-deep);
  color: var(--ui-bg);
  font-size: var(--fs-label);
  font-weight: 700;
}

/* ---------- 02 · scene ---------- */

.mira-content__paper {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 7%;
  width: 54%;
  padding: 26px 30px;
  border-radius: 16px;
  background: rgba(var(--ui-surface-rgb), .96);
  box-shadow: 0 30px 80px rgba(var(--ui-shadow-rgb), .16);
  transform: translateY(-50%);
}

.mira-content__paper-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ui-gray-100);
  color: var(--ui-muted);
}

.mira-content__paper-body {
  position: relative;
  padding: 36px 4px 30px;
}

.mira-content__quote-mark {
  position: absolute;
  top: 6px;
  left: 0;
  color: var(--ui-soft);
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
}

.mira-content__paper-body p {
  margin: 0;
  font-size: clamp(19px, 1.9vw, 27px);
  font-style: italic;
  line-height: 1.42;
  letter-spacing: -.02em;
}

.mira-content__selected {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--ui-gray-100);
}

.mira-content__selected span {
  width: 30px;
  height: 2px;
  border-radius: 999px;
  background: var(--ui-deep);
}

.mira-content__selected strong {
  color: var(--ui-muted);
  font-size: var(--fs-label);
  font-weight: 700;
}

.mira-content__generate {
  position: absolute;
  z-index: 7;
  right: 5%;
  bottom: 7%;
  width: 340px;
  padding: 20px;
  border-radius: 16px;
  background: var(--ui-deep);
  color: var(--ui-bg);
  box-shadow: 0 30px 70px rgba(var(--ui-shadow-rgb), .25);
}

.mira-content__generate-label {
  display: block;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(var(--ui-bg-rgb), .16);
  color: rgba(var(--ui-bg-rgb), .6);
}

.mira-content__generate-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding-top: 14px;
}

.mira-content__generate-grid span {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border-radius: 10px;
  background: rgba(var(--ui-bg-rgb), .08);
  font-size: var(--fs-small);
  font-weight: 700;
}

.mira-content__generate-grid b { font-weight: 400; opacity: .7; }

/* ---------- 03 · Booketeer ---------- */

.mira-content__book-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--ui-gray-50), var(--ui-gray-100));
}

.mira-content__book {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 7%;
  width: 30%;
  height: 72%;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 30px 60px rgba(var(--ui-shadow-rgb), .2);
  transform: translateY(-50%);
}

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

.mira-content__book-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--ui-shadow-rgb), .05), rgba(var(--ui-shadow-rgb), .65));
}

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

.mira-content__book-copy span {
  display: block;
  margin-bottom: 8px;
  opacity: .75;
}

.mira-content__book-copy strong {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
}

.mira-content__link {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 35%;
  display: flex;
  width: 15%;
  align-items: center;
  transform: translateY(-50%);
}

.mira-content__link > span {
  width: 100%;
  height: 1px;
  background: var(--ui-soft);
}

.mira-content__link > div {
  display: grid;
  width: 36px;
  height: 36px;
  flex: none;
  place-items: center;
  border: 1px solid var(--ui-soft);
  border-radius: 999px;
  background: var(--ui-bg);
  font-size: var(--fs-label);
}

.mira-content__index {
  top: 50%;
  right: 5%;
  width: 49%;
  padding: 24px;
  transform: translateY(-50%);
}

.mira-content__ready {
  display: grid;
  width: 32px;
  height: 32px;
  flex: none;
  place-items: center;
  border-radius: 999px;
  background: var(--ui-success);   /* semantic: book indexed */
  color: var(--ui-on-accent);
  font-size: 13px; /* glyph */
}

.mira-content__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--ui-gray-100);
}

.mira-content__metrics > div { padding: 16px 10px 16px 0; }

.mira-content__metrics strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(24px, 2vw, 32px);
  font-weight: 800;
  letter-spacing: -.05em;
}

.mira-content__metrics span {
  display: block;
  margin-top: 2px;
  color: var(--ui-muted);
  font-size: var(--fs-label);
}

.mira-content__scene-row {
  display: grid;
  grid-template-columns: 30px 1fr 20px;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  border-bottom: 1px solid var(--ui-gray-100);
}

.mira-content__scene-row:last-child { border-bottom: 0; }
.mira-content__scene-index { color: var(--ui-muted); font-size: var(--fs-label); }
.mira-content__scene-row strong,
.mira-content__scene-row div span { display: block; }
.mira-content__scene-row strong { font-size: var(--fs-small); font-weight: 700; }
.mira-content__scene-row div span { margin-top: 2px; color: var(--ui-muted); font-size: var(--fs-label); }
.mira-content__scene-row b { color: var(--ui-muted); font-weight: 400; }

/* =========================================================
   STEPS (right). Rounded tiles instead of the model's ruled
   table: the active one is lifted as a card, the rest sit
   flat on the page and get a soft fill on hover.
========================================================= */

.mira-content__nav {
  display: grid;
  gap: 8px;
  width: 100%;
}

.mira-content__step {
  display: grid;
  width: 100%;
  grid-template-columns: 36px minmax(0, 1fr) 28px;
  gap: 12px;
  align-items: start;
  padding: 20px 22px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: transparent;
  color: var(--ui-text);
  text-align: left;
  cursor: pointer;
  transition:
    background-color .3s ease,
    border-color .3s ease,
    box-shadow .45s var(--content-ease),
    transform .45s var(--content-ease);
}

/* A quiet index on the overline's baseline, not a display numeral. */
.mira-content__step-number {
  padding-top: 1px;
  color: var(--ui-muted);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  transition: color .35s ease;
}

.mira-content__step-body { display: block; }

.mira-content__step-title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(21px, 1.8vw, 28px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.045em;
}

/* Description opens only on the active step (0fr → 1fr). */
.mira-content__step-text {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 550ms var(--content-ease),
    opacity 300ms ease;
}

.mira-content__step-text > span {
  display: block;
  max-width: 320px;
  overflow: hidden;
  color: var(--ui-muted);
  font-size: var(--fs-small);
  line-height: 1.6;
  transition: padding 550ms var(--content-ease);
}

.mira-content__step-arrow {
  padding-top: 6px;
  color: var(--ui-soft);
  font-size: 18px;
  transition: transform .45s var(--content-ease), color .3s ease;
}

.mira-content__step.is-active {
  border-color: var(--ui-soft);
  background: var(--ui-surface);
  box-shadow: 0 18px 50px rgba(var(--ui-shadow-rgb), .08);
}

.mira-content__step.is-active .mira-content__step-number,
.mira-content__step.is-active .mira-content__step-arrow { color: var(--ui-text); }
.mira-content__step.is-active .mira-content__step-arrow { transform: translateX(4px); }
.mira-content__step.is-active .mira-content__step-text { grid-template-rows: 1fr; opacity: 1; }
.mira-content__step.is-active .mira-content__step-text > span { padding-top: 12px; }

@media (hover: hover) and (pointer: fine) {
  .mira-content__step:not(.is-active):hover { background: var(--ui-gray-50); }
  .mira-content__step:hover .mira-content__step-number { color: var(--ui-text); }
  .mira-content__step:hover .mira-content__step-arrow { color: var(--ui-text); transform: translateX(4px); }
}

.mira-content__step:focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: 3px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1279.98px) {
  .mira-content__container { width: min(1200px, calc(100% - 48px)); }
  .mira-content__header { grid-template-columns: 1fr; }
  .mira-content__header > p { display: none; }
  .mira-content__layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .65fr);
    gap: 40px;
  }
  .mira-content__step { grid-template-columns: 32px minmax(0, 1fr) 22px; padding: 18px; }
  .mira-content__upload { width: 340px; }
  .mira-content__generate { width: 300px; }
  .mira-content__paper { width: 60%; }
  /* No room for both the library window and the caption side by side. */
  .mira-content__caption { display: none; }
}

/* Below 1024px no sticky story: the visual sits on top and the tiles under it
   switch it on tap. */
@media (max-width: 1023.98px) {
  .mira-content { height: auto; padding: 110px 0 90px; }

  .mira-content__sticky {
    position: relative;
    display: block;
    height: auto;
    overflow: visible;
  }

  .mira-content__container {
    display: block;
    width: min(720px, calc(100% - 48px));
    height: auto;
    padding: 0;
  }

  .mira-content__header { padding-bottom: 36px; }
  .mira-content__header > p { display: block; }
  .mira-content__header h2 { font-size: clamp(42px, 9vw, 64px); }

  .mira-content__layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    padding-top: 36px;
  }

  .mira-content__shell { height: 540px; min-height: 0; }
  .mira-content__caption { display: block; }
}

@media (max-width: 767.98px) {
  .mira-content__container { width: calc(100% - 48px); }
  .mira-content__shell { height: 520px; }

  .mira-content__upload {
    top: 20px;
    right: 16px;
    left: 16px;
    width: auto;
    padding: 18px;
  }

  .mira-content__caption { right: 22px; bottom: 22px; left: 22px; width: auto; }

  .mira-content__paper {
    top: 20px;
    right: 16px;
    left: 16px;
    width: auto;
    padding: 20px;
    transform: none;
  }

  .mira-content__generate { right: 16px; bottom: 16px; left: 16px; width: auto; }

  .mira-content__book {
    top: 20px;
    left: 20px;
    width: 130px;
    height: 180px;
    transform: none;
  }

  .mira-content__link { display: none; }

  .mira-content__index {
    top: auto;
    right: 16px;
    bottom: 16px;
    left: 16px;
    width: auto;
    padding: 18px;
    transform: none;
  }

  .mira-content__index .mira-content__scene-row:last-child { display: none; }

  .mira-content__step { grid-template-columns: 30px minmax(0, 1fr) 20px; padding: 18px 16px; }
}

/* Reduced motion: site.css cuts every transition to 0.01ms; the parallax is
   never started by content.js. */