/* Eén inhoudelijke scène. Tekst en de complete tekening zijn de basisstand. */
.work-motion { --motion-join: 40px; }
.work-page .motion-story { display: grid; grid-template-columns: .85fr 1.4fr .9fr; align-items: center; gap: var(--motion-join); list-style: none; padding: var(--sp-8) 0; margin: 0; }
.motion-story > li { position: relative; min-width: 0; }
.motion-story p { overflow-wrap: anywhere; }
.motion-label { display: block; color: var(--brand); font-size: var(--fs-14); font-weight: 600; margin-bottom: var(--sp-3); }
.motion-question > svg:not(.motion-link) { display: block; width: 40px; height: 40px; margin-bottom: var(--sp-4); color: var(--accent); }
.work-page .motion-question > p { font-size: var(--fs-19); line-height: var(--lh-body); font-weight: 500; }
.motion-paper { padding: var(--sp-6) var(--sp-5); background: var(--panel-2); border-top: 3px solid var(--brand); }
.work-page .motion-paper h3 { font-size: var(--fs-19); line-height: var(--lh-body); letter-spacing: -.02em; }
.work-page .motion-paper .work-preview-kind { font-size: var(--fs-14); margin-bottom: var(--sp-5); }
.motion-document-lines { list-style: none; padding: 0; margin: 0; }
.motion-document-lines li + li { margin-top: var(--sp-5); }
.motion-word { display: inline; position: relative; font-size: var(--fs-14); font-weight: 600; line-height: var(--lh-body); }
.work-page .motion-document-lines p { font-size: var(--fs-14); color: var(--muted); line-height: var(--lh-body); margin-top: var(--sp-1); }
.motion-selected { position: relative; }
.work-page .motion-selected p { color: var(--brand); }
.motion-underline { display: block; height: 3px; width: 40px; background: var(--brand); margin-top: var(--sp-2); transform-origin: left; }
.motion-followup > svg { width: 32px; height: 32px; display: block; color: var(--brand); margin-bottom: var(--sp-4); }
.work-page .motion-followup > p { font-size: var(--fs-19); font-weight: 500; line-height: var(--lh-body); color: var(--brand); }
.motion-followup .motion-underline { width: 40px; margin-top: var(--sp-2); }
.motion-link { position: absolute; left: calc(100% + 4px); top: calc(50% - 10px); width: 32px; height: 20px; overflow: visible; color: var(--brand); }
.motion-link path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.motion-link .motion-track { color: var(--line); }
.motion-link .motion-trace { stroke-dasharray: 1; stroke-dashoffset: 0; }
.motion-signal { fill: var(--brand); opacity: 0; }
.motion-question > p, .motion-selected > p, .motion-followup > p { border-radius: var(--r-sm); }
.motion-content > summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
.work-page .motion-content { border-block: 1px solid var(--line); font-size: var(--fs-16); }
.motion-content > summary { display: flex; align-items: center; gap: var(--sp-3); justify-content: space-between; list-style: none; cursor: pointer; min-height: 56px; padding-block: var(--sp-3); }
.motion-content > summary > span { position: relative; width: 24px; height: 24px; flex: 0 0 24px; }
.motion-content > summary > span::before, .motion-content > summary > span::after { content: ''; position: absolute; width: 18px; height: 2px; top: 11px; left: 3px; background: var(--brand); }
.motion-content > summary > span::after { transform: rotate(90deg); }
.motion-content[open] > summary > span::after { transform: rotate(0); }
.motion-content > div { padding-block: var(--sp-3) var(--sp-5); }
.work-page .motion-explanation { margin-top: var(--sp-5); color: var(--muted); }
@media (max-width: 719px) {
  .work-page .motion-story { display: block; padding-block: var(--sp-3) var(--sp-5); }
  .motion-story > li + li { margin-top: 44px; }
  .motion-question { max-width: 360px; }
  .work-page .motion-question > p { font-size: var(--fs-16); }
  .motion-question > svg:not(.motion-link), .motion-followup > svg { display: inline-block; vertical-align: middle; width: 24px; height: 24px; margin: 0 var(--sp-2) var(--sp-2) 0; }
  .motion-question .motion-label, .motion-followup .motion-label { display: inline; }
  .motion-paper { width: 100%; max-width: 360px; padding: var(--sp-5); }
  .motion-followup { width: 80%; margin-left: auto; }
  .work-page .motion-followup > p { font-size: var(--fs-16); }
  .motion-link { left: calc(50% - 16px); top: calc(100% + 12px); transform: rotate(90deg); }
  .motion-document-lines li + li { margin-top: var(--sp-4); }
  .work-page .motion-paper h3 { font-size: var(--fs-16); }
  .work-page .motion-paper .work-preview-kind { margin-bottom: var(--sp-4); }
}