/* Large compositions carry the narrative; product facts keep their reading rhythm. */
.story-track {
  position: relative;
}
.scene-meter {
  display: none;
}
.story-enabled .conversation-stage,
.story-enabled .matching-stage {
  --scene-open: 1;
  --scene-travel: 0;
}
.story-enabled .conversation-stage > .scene-art,
.story-enabled .matching-stage > .scene-art {
  clip-path: inset(
    calc((1 - var(--scene-open)) * 48%) calc((1 - var(--scene-open)) * 9%) 0
  );
  transform: translate3d(0, calc(var(--scene-travel) * -32px), 0)
    scale(calc(1.08 - var(--scene-travel) * 0.08));
  transform-origin: 50% 55%;
}
.story-enabled .conversation-copy,
.story-enabled .matching-title {
  transform: translate3d(
    0,
    calc((1 - var(--scene-open)) * 34px - var(--scene-travel) * 16px),
    0
  );
}
.story-enabled .memory-head {
  animation: none;
  transform: translate3d(
      calc(var(--memory-travel, 0) * 18px),
      calc(var(--memory-travel, 0) * 48px),
      0
    )
    scale(calc(1 + var(--memory-travel, 0) * 0.045));
}
.story-enabled .memory-stream-back {
  transform: translate3d(
    calc(var(--memory-travel, 0) * -65px),
    calc(var(--memory-travel, 0) * 24px),
    0
  );
}
.story-enabled .memory-stream-front {
  transform: translate3d(
    calc(var(--memory-travel, 0) * -110px),
    calc(var(--memory-travel, 0) * -32px),
    0
  );
}
.story-enabled .memory-particles {
  transform: translate3d(0, calc(var(--memory-travel, 0) * -70px), 0);
}
.story-enabled .manifesto-ribbon {
  transform: translate3d(calc((1 - var(--manifesto-entry, 1)) * 90px), 0, 0)
    scale(calc(1.15 - var(--manifesto-entry, 1) * 0.15));
  opacity: calc(0.15 + var(--manifesto-entry, 1) * 0.3);
}
.story-enabled .manifesto h1 {
  transform: scale(calc(0.94 + var(--manifesto-entry, 1) * 0.06));
  transform-origin: center bottom;
}
.story-pinned .story-track {
  padding-bottom: 55vh;
}
.story-pinned .conversation-stage,
.story-pinned .matching-stage {
  position: sticky;
  top: 88px;
  min-height: max(740px, calc(100svh - 88px));
}
.story-pinned .scene-meter {
  position: absolute;
  display: block;
  bottom: 24px;
  left: 50%;
  width: 88px;
  height: 2px;
  background: #7499c336;
  transform: translateX(-50%);
}
.scene-meter span {
  display: block;
  width: 100%;
  height: 100%;
  background: #94c8ff;
  transform: scaleX(var(--scene-travel));
  transform-origin: left;
}
.motion-control {
  display: block;
  margin: 0 0 28px auto;
  padding: 10px 16px;
  min-height: 44px;
  border: 1px solid #526e8e;
  border-radius: 7px;
  background: #0c1826;
  color: #d4e8ff;
  font: 14px/1.6 var(--sans);
  cursor: pointer;
}
.motion-control:disabled {
  cursor: default;
  color: #a9b6c6;
}
.motion-paused *,
.motion-paused *::before,
.motion-paused *::after {
  animation: none !important;
  transition: none !important;
}
html.motion-paused {
  scroll-behavior: auto;
}
@media (max-width: 1100px), (max-height: 739px) {
  .story-enabled .conversation-stage > .scene-art,
  .story-enabled .matching-stage > .scene-art {
    clip-path: inset(calc((1 - var(--scene-open)) * 20%) 0 0);
    transform: none;
  }
  .story-enabled .conversation-copy,
  .story-enabled .matching-title,
  .story-enabled .memory-head,
  .story-enabled .memory-stream,
  .story-enabled .memory-particles {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce), print {
  .story-track {
    padding-bottom: 0 !important;
  }
  .story-track > div {
    position: relative !important;
    top: auto !important;
  }
  .scene-meter {
    display: none !important;
  }
}

/* Full-frame choreography, followed by a horizontal chapter. */
.story-pinned .story-track {
  padding-bottom: 120vh;
}
.story-pinned .conversation-stage,
.story-pinned .matching-stage {
  min-height: calc(100svh - 88px);
}
.story-pinned .conversation-stage > .scene-art,
.story-pinned .matching-stage > .scene-art {
  clip-path: inset(
    calc((1 - var(--scene-open)) * 94%) calc((1 - var(--scene-open)) * 18%) 0
  );
  transform: translate3d(
      calc((1 - var(--scene-open)) * -100px),
      calc(var(--scene-travel) * -70px),
      0
    )
    scale(calc(1.5 - var(--scene-travel) * 0.5));
  transform-origin: 42% 50%;
}
.story-pinned .conversation-copy,
.story-pinned .matching-title {
  transform: translate3d(
    calc((1 - var(--scene-open)) * 90px),
    calc((1 - var(--scene-open)) * 110px),
    0
  );
}
.story-pinned .conversation-copy {
  padding-block: 48px 64px;
}
.story-pinned .conversation-copy h2 {
  font-size: clamp(32px, 3.5vw, 52px);
}
.story-pinned .conversation-copy .eyebrow {
  margin-bottom: 20px;
}
.story-pinned .conversation-copy .scene-lead {
  font-size: 18px;
  margin-top: 20px;
}
.story-pinned .conversation-copy > p:not(.eyebrow):not(.scene-lead) {
  margin-top: 18px;
}
.story-pinned .conversation-tags {
  margin-top: 20px;
  padding-top: 14px;
}
.story-pinned .matching-stage {
  height: calc(100svh - 88px);
  min-height: 0;
}
.story-pinned .matching-title {
  padding-top: 24px;
}
.story-pinned .matching-title .eyebrow {
  margin-bottom: 12px;
}
.story-pinned .matching-title h2 {
  font-size: clamp(38px, 4.7vw, 66px);
  line-height: 1.35;
}
.story-pinned .matching-title .scene-lead {
  font-size: 16px;
  margin-top: 12px;
}
.story-pinned .matching-stage .scene-art {
  top: 50px;
}
.story-pinned .matching-stage .scene-art img {
  object-fit: cover;
}
.story-pinned .connection-caption {
  bottom: 45px;
  gap: 28px;
  font-size: 14px;
}
.story-pinned .manifesto h1 {
  transform: translateY(calc((1 - var(--manifesto-entry, 1)) * 100px))
    scale(calc(0.72 + var(--manifesto-entry, 1) * 0.28));
}
.story-pinned .manifesto-ribbon {
  opacity: 0.55;
  transform: translateX(calc((1 - var(--manifesto-entry, 1)) * 280px))
    scale(calc(1.5 - var(--manifesto-entry, 1) * 0.5));
}
.principle-nav {
  display: none;
}
.story-pinned .principle-runway {
  position: relative;
  width: var(--story-width, 100%);
  margin-left: calc(50% - var(--story-width, 100%) / 2);
  height: calc(100svh - 88px + 180vw);
}
.story-pinned .principle-viewport {
  position: sticky;
  top: 88px;
  height: calc(100svh - 88px);
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: #02070d;
}
/* Reserve a real row for navigation: tall diagrams must not push it below
   the sticky viewport and leave it clipped against the following section. */
.story-pinned .principle-viewport > .principles {
  min-height: 0;
  height: 100%;
}
.story-pinned .principle-viewport > .principles > article {
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior-y: auto;
}
.story-pinned .principle-viewport > .principle-nav:not([hidden]) {
  margin: 16px auto 24px;
  align-self: end;
}
.story-pinned .principle-runway + .numbers {
  margin-top: 64px;
}
.story-pinned .principles {
  display: flex;
  gap: 0;
  width: 100%;
  margin: 0;
  transform: translate3d(var(--panel-x, 0px), 0, 0);
}
.story-pinned .principles article {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  padding: 36px max(8vw, calc((100vw - 1100px) / 2));
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}
.story-pinned .principles article::before {
  content: attr(data-panel-number);
  position: absolute;
  right: 6vw;
  top: 50%;
  transform: translateY(-50%);
  font: 400 clamp(180px, 31vw, 490px)/1 var(--serif);
  color: #123255;
  opacity: 0.65;
  pointer-events: none;
  z-index: -1;
}
.story-pinned .principles .index {
  margin-bottom: 24px;
  font-size: 14px;
  color: #9fcaff;
}
.story-pinned .principles h3 {
  font-size: clamp(34px, 4.3vw, 64px);
  line-height: 1.5;
  max-width: 100%;
}
.story-pinned .principles p {
  max-width: 660px;
  margin-top: 28px;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 2;
  color: #c9d8eb;
}
.story-pinned .principle-nav:not([hidden]) {
  display: flex;
  gap: 12px;
  margin: 24px auto 20px;
  padding-inline: 24px;
}
.principle-nav button {
  min-height: 44px;
  padding: 12px 20px;
  border: 1px solid #49698e;
  background: #0c1827;
  border-radius: 7px;
  color: #b7cde8;
  font: 14px/1.5 var(--sans);
  cursor: pointer;
}
.principle-nav button[aria-current] {
  background: #205d99;
  color: #fff;
  border-color: #9aceff;
}
.principle-nav button:hover {
  background: #254464;
  color: white;
}
@media (max-width: 900px), (max-height: 599px) {
  .story-enabled .conversation-stage > .scene-art,
  .story-enabled .matching-stage > .scene-art {
    clip-path: inset(
      calc((1 - var(--scene-open)) * 65%) calc((1 - var(--scene-open)) * 8%) 0
    );
    transform: scale(calc(1.18 - var(--scene-open) * 0.18));
  }
}
@media print {
  .principle-runway {
    height: auto !important;
    width: auto !important;
    margin: 0 !important;
  }
  .principle-viewport {
    position: static !important;
    height: auto !important;
    display: block !important;
    overflow: visible !important;
  }
  .principles {
    transform: none !important;
    display: block !important;
  }
  .principle-nav {
    display: none !important;
  }
}

/* Analysis and matching use the same gallery grammar and deliberate reading pauses. */
.analysis-runway {
  position: relative;
}
.story-pinned .analysis-runway {
  height: calc(100svh - 88px + 125vw);
}
.story-pinned .analysis-viewport {
  position: sticky;
  top: 88px;
  height: calc(100svh - 88px);
  overflow: hidden;
  background: #02070d;
  display: flex;
  flex-direction: column;
}
.story-pinned .analysis-strip {
  display: flex;
  flex: 1;
  min-height: 0;
  transform: translate3d(var(--panel-x, 0px), 0, 0);
}
.story-pinned .analysis-strip > * {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  top: auto;
}
.story-pinned .analysis-strip .conversation-stage {
  display: flex;
  align-items: center;
}
.story-pinned .analysis-strip .conversation-copy {
  padding: 20px 0;
  transform: none;
}
.story-pinned .analysis-strip .conversation-copy h2 {
  font-size: clamp(30px, 3.2vw, 48px);
  line-height: 1.5;
}
.story-pinned .analysis-strip .conversation-copy .eyebrow {
  margin-bottom: 12px;
}
.story-pinned .analysis-strip .conversation-copy p {
  font-size: 16px;
  line-height: 1.85;
  margin-top: 14px;
}
.story-pinned .analysis-strip .conversation-tags {
  margin-top: 16px;
  padding-top: 12px;
}
.story-pinned .analysis-strip .conversation-stage > .scene-art {
  transform: none;
  clip-path: none;
  mask-image: linear-gradient(90deg, #000 40%, #0004 75%, transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 40%, #0004 75%, transparent);
}
.story-pinned .analysis-strip .introduction {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-content: center;
  gap: 6vw;
  padding: 28px 7vw;
  background: radial-gradient(ellipse at 0% 100%, #0f396350, transparent 65%), #02070d;
}
.story-pinned .analysis-strip .introduction h3 {
  font-size: clamp(32px, 3.6vw, 54px);
}
.story-pinned .analysis-strip .introduction-copy {
  padding: 0;
}
.story-pinned .analysis-strip .introduction-copy p {
  font-size: 16px;
  line-height: 1.95;
}
.story-pinned .analysis-strip .introduction-copy .note {
  font-size: 13px;
}
.story-pinned .publication-flow {
  border: 1px solid #35567a;
  border-radius: 12px;
  background: linear-gradient(135deg, #16385888, #040b16);
  margin: 24px 0;
}
.story-pinned .publication-flow li {
  padding: 18px 12px;
  text-align: center;
  font-size: 18px;
}
.story-pinned .publication-flow li + li {
  border-left: 1px solid #35567a;
}
.story-pinned .publication-flow li::before {
  display: none;
}
.story-pinned .publication-flow small {
  color: #9ccaff;
  margin-bottom: 8px;
}
.story-pinned .analysis-nav:not([hidden]) {
  flex: 0 0 auto;
  margin: 12px auto 16px;
}
.story-pinned .story-track {
  padding-bottom: 70vh;
}
.story-pinned .principle-runway {
  height: calc(100svh - 88px + 150vw);
}
.story-pinned .principles article {
  background: radial-gradient(ellipse at 90% 50%, #10385e40, transparent 65%);
}
.story-enabled .section-trace {
  height: 2px;
  width: min(1220px, calc(100% - 48px));
  margin: 0 auto 48px;
  background: linear-gradient(90deg, #256bac, #a5d8ff 40%, #18324f);
  transform: scaleX(var(--section-arrival, 1));
  transform-origin: left;
}
.story-enabled :is(#how, #pricing, #information, #faq) h2 {
  transform: translateY(calc((1 - var(--section-arrival, 1)) * 36px));
}
.story-enabled .steps li {
  position: relative;
}
.story-enabled .steps li::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, #81bcff, transparent);
  transform: scaleX(var(--section-arrival, 1));
  transform-origin: left;
}
.cinematic .price-card {
  background-image: radial-gradient(ellipse at 0 0, #164c8033, transparent 65%);
}
.cinematic .price-card.standard {
  box-shadow: inset 0 1px #8bc6ff44;
}
@media (max-height: 740px) and (min-width: 901px) {
  .story-pinned .analysis-strip .conversation-copy p {
    font-size: 16px;
    line-height: 1.65;
    margin-top: 10px;
  }
  .story-pinned .analysis-strip .conversation-copy h2 {
    font-size: 30px;
  }
  .story-pinned .analysis-strip .conversation-tags {
    display: none;
  }
  .story-pinned .analysis-strip .introduction h3 {
    font-size: 32px;
  }
  .story-pinned .analysis-strip .introduction-copy p {
    font-size: 16px;
    line-height: 1.75;
  }
  .story-pinned .analysis-strip .introduction .eyebrow {
    margin-bottom: 16px;
  }
}
@media print {
  .analysis-runway {
    height: auto !important;
  }
  .analysis-viewport {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
  }
  .analysis-strip {
    display: block !important;
    transform: none !important;
  }
  .analysis-strip > * {
    width: auto !important;
  }
  .section-trace {
    display: none !important;
  }
}

/* Product story: discovery, evaluation, and an explainable recommendation. */
.system-detail {
  padding: 24px;
  background: linear-gradient(140deg, #102a4366, #040a12);
  border: 1px solid #355370;
  border-radius: 12px;
}
.cinematic .system-panel .system-note {
  font-size: 15px;
  line-height: 1.9;
  color: #aebfd4;
}
.cinematic .system-panel .detail-label {
  margin: 0 0 20px;
  font: 14px/1.8 var(--sans);
  color: #a8cffa;
}
.semantic-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  text-align: center;
}
.semantic-pair > span {
  padding: 20px 8px;
  border: 1px solid #46698e;
  border-radius: 7px;
  font: 14px/1.9 var(--sans);
  color: #b5c6dc;
}
.semantic-pair strong {
  font: 20px/1.8 var(--serif);
  color: #e3efff;
}
.process-connection {
  height: 32px;
  width: 50%;
  margin: auto;
  border-inline: 1px solid #588ec4;
  border-bottom: 1px solid #588ec4;
}
.cinematic .system-panel .process-result {
  text-align: center;
  margin: 16px 0 0;
  font-size: 23px;
  color: #d9ecff;
}
.cinematic .system-panel .detail-caption {
  font: 14px/1.9 var(--sans);
  color: #b1c4da;
  margin: 14px 0 0;
}
.semantic-flow .detail-caption {
  text-align: center;
}
.relation-types {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
  margin: 0;
}
.relation-types > div {
  padding: 14px 0;
  border-top: 1px solid #304b68;
}
.relation-types dt {
  font-size: 18px;
  color: #e3edfa;
  line-height: 1.6;
}
.relation-types dd {
  margin: 7px 0 0;
  font: 13px/1.8 var(--sans);
  color: #aebfd4;
}
.score-signals {
  padding: 0;
  margin: 0;
  list-style: none;
}
.score-signals li {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 0;
  border-top: 1px solid #304b68;
  font-size: 20px;
}
.score-signals span {
  color: #78b7ff;
  font: 14px var(--sans);
}
.cinematic .system-panel .score-definition {
  font-size: 18px;
  color: #e2eeff;
  margin-top: 22px;
}
.story-pinned .principles .system-panel {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 5vw;
  padding: 24px 7vw;
}
.story-pinned .principles .system-panel h3 {
  font-size: clamp(30px, 3.2vw, 48px);
  line-height: 1.55;
}
.story-pinned .principles .system-copy > p:not(.system-note) {
  font-size: 18px;
  line-height: 1.9;
  margin-top: 22px;
}
.story-pinned .principles .system-panel .index {
  margin-bottom: 20px;
}
.story-pinned .principles .system-note {
  margin-top: 18px;
}
.story-pinned .principles .system-panel::before {
  opacity: 0.25;
}
@media (max-height: 740px) and (min-width: 901px) {
  .story-pinned .principles .system-panel {
    padding-block: 16px;
    gap: 4vw;
  }
  .story-pinned .principles .system-panel h3 {
    font-size: 30px;
    line-height: 1.45;
  }
  .story-pinned .principles .system-copy > p:not(.system-note) {
    font-size: 16px;
    line-height: 1.8;
    margin-top: 16px;
  }
  .story-pinned .principles .system-panel .index {
    margin-bottom: 12px;
  }
  .story-pinned .principles .system-note {
    font-size: 14px;
    line-height: 1.75;
    margin-top: 12px;
  }
  .story-pinned .system-detail {
    padding: 18px;
  }
  .story-pinned .relation-types > div {
    padding: 10px 0;
  }
  .story-pinned .relation-types dt {
    font-size: 16px;
  }
}
html:not(.story-pinned) .principles {
  grid-template-columns: 1fr;
}
html:not(.story-pinned) .system-panel {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 40px;
}
@media (max-width: 768px) {
  html:not(.story-pinned) .system-panel {
    display: block;
  }
  .system-detail {
    margin-top: 24px;
    padding: 18px;
  }
  .relation-types {
    grid-template-columns: 1fr;
  }
  .relation-types > div {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 12px;
    align-items: baseline;
  }
  .relation-types dd {
    margin: 0;
  }
  .relation-types dt {
    font-size: 16px;
  }
  .semantic-pair strong {
    font-size: 18px;
  }
}

/* Lead with the business value, then reveal the machinery behind it. */
.cinematic .value-section {
  padding: 70px 0 110px;
  background: linear-gradient(#000, #030a12 55%, #000);
}
.cinematic .value-lead {
  margin-top: 28px;
  max-width: 800px;
  font-size: 18px;
  color: #c7d5e8;
}
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  margin-top: 56px;
}
.value-grid article {
  border-top: 1px solid #355675;
  padding-top: 24px;
}
.cinematic .value-grid .index {
  color: #9ec8f7;
  font-size: 13px;
}
.cinematic .value-grid h3 {
  font-size: 26px;
  line-height: 1.7;
}
.cinematic .value-grid p {
  margin-top: 20px;
  font-size: 16px;
  line-height: 2;
  color: #afc0d6;
}
.story-enabled #value h2 {
  transform: translateY(calc((1 - var(--section-arrival, 1)) * 36px));
}
@media (max-width: 768px) {
  .cinematic .value-section {
    padding-block: 50px 76px;
  }
  .value-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 36px;
  }
  .cinematic .value-grid h3 {
    font-size: 24px;
  }
  .cinematic .value-lead {
    font-size: 16px;
  }
  .value-lead br {
    display: none;
  }
}

/* Four distinct scenes: depth, opening typography, portrait, and numbered steps. */
.manifesto-line {
  display: block;
}
.story-enabled .memory-art {
  animation: memory-curtain 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes memory-curtain {
  from {
    clip-path: inset(0 0 0 64%);
    opacity: 0.3;
  }
  to {
    clip-path: inset(0);
    opacity: 1;
  }
}
.story-enabled .memory-head {
  transform: translate3d(
      calc(var(--memory-travel, 0) * 65px),
      calc(var(--memory-travel, 0) * 95px),
      0
    )
    scale(calc(1 + var(--memory-travel, 0) * 0.18));
}
.story-enabled .memory-stream-back {
  transform: translate3d(
      calc(var(--memory-travel, 0) * -170px),
      calc(var(--memory-travel, 0) * 75px),
      0
    )
    scale(calc(1 + var(--memory-travel, 0) * 0.12));
}
.story-enabled .memory-stream-front {
  transform: translate3d(
    calc(var(--memory-travel, 0) * -300px),
    calc(var(--memory-travel, 0) * -90px),
    0
  );
}
.story-enabled .memory-particles {
  transform: translate3d(
    calc(var(--memory-travel, 0) * -75px),
    calc(var(--memory-travel, 0) * -180px),
    0
  );
}
.story-enabled .manifesto h1 {
  transform: none;
}
.story-enabled .manifesto-line {
  clip-path: inset(0 0 calc((1 - var(--title-arrival, 1)) * 95%) 0);
  transform: translate3d(calc((1 - var(--title-arrival, 1)) * -100px), 0, 0)
    scale(calc(0.86 + var(--title-arrival, 1) * 0.14));
  transform-origin: center;
}
.story-enabled .manifesto-line + .manifesto-line {
  transform: translate3d(calc((1 - var(--title-arrival, 1)) * 100px), 0, 0)
    scale(calc(1.14 - var(--title-arrival, 1) * 0.14));
}
.story-enabled .analysis-strip .conversation-stage > .scene-art {
  clip-path: inset(0 calc((1 - var(--portrait-arrival, 1)) * 40%) 0 0);
  transform: translate3d(calc((1 - var(--portrait-arrival, 1)) * -90px), 0, 0)
    scale(calc(1.28 - var(--portrait-arrival, 1) * 0.28));
  transform-origin: 20% 45%;
}
.story-enabled .analysis-strip .conversation-copy h2 {
  transform: translateX(calc((1 - var(--portrait-arrival, 1)) * 70px));
}
.story-enabled .steps .index {
  transform: translateY(calc((1 - var(--step-arrival, 1)) * -30px))
    scale(calc(1.5 - var(--step-arrival, 1) * 0.5));
  transform-origin: left bottom;
  color: #669fdf;
}
.story-enabled .steps li > div {
  transform: translateY(calc((1 - var(--step-arrival, 1)) * 36px));
}
.story-enabled .steps li::after {
  transform: scaleX(var(--step-arrival, 1));
  height: 3px;
}
.story-enabled .steps li.step-in-view .index {
  color: #8fc6ff;
  text-shadow: 0 0 36px #1671d74d;
}
.story-enabled .steps li.step-in-view h3 {
  color: #e1efff;
}
@media (max-width: 768px) {
  .story-enabled .memory-head {
    transform: translateY(calc(var(--memory-travel, 0) * 25px))
      scale(calc(1 + var(--memory-travel, 0) * 0.06));
  }
  .story-enabled .memory-stream-front {
    transform: translateX(calc(var(--memory-travel, 0) * -90px));
  }
  .story-enabled .memory-stream-back {
    transform: translateX(calc(var(--memory-travel, 0) * -45px));
  }
  .story-enabled .memory-particles {
    transform: translateY(calc(var(--memory-travel, 0) * -45px));
  }
  .story-enabled .manifesto-line {
    transform: translateX(calc((1 - var(--title-arrival, 1)) * -35px));
  }
  .story-enabled .manifesto-line + .manifesto-line {
    transform: translateX(calc((1 - var(--title-arrival, 1)) * 35px));
  }
  .story-enabled .analysis-strip .conversation-stage > .scene-art {
    transform: scale(calc(1.12 - var(--portrait-arrival, 1) * 0.12));
  }
  .story-enabled .analysis-strip .conversation-copy h2 {
    transform: translateX(calc((1 - var(--portrait-arrival, 1)) * 24px));
  }
}
@media print {
  .memory-art,
  .manifesto-line,
  .analysis-strip .scene-art,
  .conversation-copy h2,
  .steps .index,
  .steps li > div {
    transform: none !important;
    clip-path: none !important;
    animation: none !important;
  }
}

/* Ambient motion lives on the images; their picture parents retain scroll motion. */
.story-enabled .memory-head img {
  transform-origin: 70% 42%;
  animation: portrait-breath 9s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.story-enabled .memory-stream-back img {
  animation: light-drift-back 17s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.story-enabled .memory-stream-front img {
  animation: light-drift-front 12s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.story-enabled .memory-particles img {
  animation: particle-drift 7s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.story-enabled .ambient-visible .memory-art img {
  animation-play-state: running;
}
@keyframes portrait-breath {
  from {
    transform: translate3d(0, 3px, 0) scale(1);
  }
  to {
    transform: translate3d(-6px, -7px, 0) scale(1.025);
  }
}
@keyframes light-drift-back {
  from {
    transform: translate3d(-12px, 8px, 0) scale(1);
    opacity: 0.68;
  }
  to {
    transform: translate3d(18px, -10px, 0) scale(1.035);
    opacity: 1;
  }
}
@keyframes light-drift-front {
  from {
    transform: translate3d(18px, 10px, 0) scale(1.015);
    opacity: 0.76;
  }
  to {
    transform: translate3d(-24px, -12px, 0) scale(1.045);
    opacity: 1;
  }
}
@keyframes particle-drift {
  from {
    transform: translate3d(8px, 9px, 0);
    opacity: 0.55;
  }
  to {
    transform: translate3d(-10px, -15px, 0);
    opacity: 1;
  }
}
.hero-motion-control {
  position: absolute;
  top: 14px;
  right: 24px;
  z-index: 5;
  margin: 0;
  background: #030a14cc;
}
@media (max-width: 768px) {
  .hero-motion-control {
    top: 8px;
    right: 16px;
    min-height: 36px;
    padding: 6px 10px;
    font-size: 12px;
  }
}
@media print {
  .hero-motion-control {
    display: none;
  }
}