/* What-is-Misoki band between the film and the platform, about half a screen.
   A headline with the fault Prism hears, then the live signal running into the
   prism on the page thread (canvas, cine/intro.js) and Prism's answer card right
   of it. --tx (inner px) and --vy come from site-thread.js. */
.blk--intro { position: relative; background: var(--bg-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.intro__cv { position: absolute; inset: 0; pointer-events: none; }
.intro { position: relative; display: grid; padding-top: 104px; padding-bottom: 64px; }

.intro__title { margin: 14px 0 0; max-width: calc(var(--tx, 900px) - 60px); font-size: clamp(36px, 3.4vw, 64px); line-height: 1.06; letter-spacing: -0.035em; font-weight: 500; }
/* the fault word rolls top to bottom */
.intro__slot { display: inline-grid; vertical-align: bottom; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.intro__slot > span { grid-area: 1 / 1; white-space: nowrap; transition: transform .55s cubic-bezier(.65, 0, .35, 1), opacity .45s ease; }
.intro__slot > .is-in { transform: translateY(-100%); opacity: 0; }
.intro__slot > .is-out { transform: translateY(100%); opacity: 0; }

/* the strip the signal runs along; its centre is the prism's y. It starts at the
   content edge, 48 px into .blk__inner, so the card sits 120 px right of the prism. */
.intro__lead { margin: 22px 0 0; max-width: min(38em, calc(var(--tx, 900px) - 60px)); font-size: clamp(16px, 1.15vw, 20px); line-height: 1.6; color: var(--text-muted); }
.intro__stage { position: relative; height: 220px; margin-top: 28px; }
.intro__ans {
  position: absolute; top: 50%; left: calc(var(--tx, 900px) + 72px); width: 280px; max-width: calc(100vw - var(--tx-abs, 1100px) - 150px); transform: translateY(-50%);
  display: grid; gap: 4px; padding: 14px 18px 16px; border-radius: 16px; background: rgba(255, 255, 255, .94);
  border: 1px solid var(--border-strong); box-shadow: 0 24px 50px -30px rgba(20, 30, 60, .5);
  border-left: 3px solid var(--c, #F2A23A); transition: opacity .2s ease, transform .2s ease, border-color .3s ease;
}
.intro__ans.is-out { opacity: 0; transform: translate(6px, -50%); }
.intro__ans-head { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
.intro__ans-head i { width: 12px; height: 12px; border-radius: 3px; background: linear-gradient(135deg, var(--cyan), var(--violet)); }
.intro__ans-head em { margin-left: auto; font-style: normal; font-weight: 500; }
.intro__ans b { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.intro__ans > span:not([class]) { font-size: 13.5px; color: var(--text-muted); }
.intro__ans-fix { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 14px; font-weight: 600; color: var(--violet-ink); }
.intro__ans-fix::before { content: 'Fix · '; font-weight: 500; color: var(--text-dim); }

.intro__line { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 14.5px; font-weight: 500; color: var(--text-muted); }
.intro__line i { width: 4px; height: 4px; border-radius: 50%; background: var(--violet); }

@media (max-width: 1100px) {
  .intro__cv { display: none; }
  .intro__title, .intro__lead { max-width: none; }
  .intro__stage { height: auto; margin: 24px 0; }
  .intro__ans { position: static; transform: none; width: auto; max-width: 360px; }
}