/* Motion v2: separate document-flow columns, never overlaid on copy. */
.motion-hero{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);gap:36px;align-items:start}
.motion-copy,.motion-figure{min-width:0}.motion-figure{margin:0;overflow:hidden}.motion-figure>.data-motion{display:block;width:100%;height:auto;fill:none;stroke:#507160;stroke-width:1.5;opacity:.8}
.motion-copy .model-quick{margin-top:26px}.data-motion .motion-trace{stroke:#243d34;stroke-width:2;stroke-dasharray:32 700;stroke-dashoffset:732}
@media(min-width:391px) and (prefers-reduced-motion:no-preference){.motion-ready .motion-sheet{animation:document-settle 75s ease-in-out infinite;animation-delay:calc(var(--step)*-.8s)}.motion-ready .motion-trace{animation:record-link 75s linear infinite}}
@keyframes document-settle{0%,100%{transform:translate(0,0)}50%{transform:translate(3px,-3px)}}@keyframes record-link{to{stroke-dashoffset:0}}
@media(max-width:768px){.motion-hero{grid-template-columns:minmax(0,1fr);gap:24px}.motion-figure{width:100%}}
@media(max-width:390px){.data-motion *{animation:none!important;transform:none!important}.data-motion .motion-trace{stroke-dasharray:none}}
@media(prefers-reduced-motion:reduce){.data-motion *{animation:none!important;transform:none!important}.data-motion .motion-trace{stroke-dasharray:none}}
/* real-sample hero figures: mosaic, terminal roll, pathway */
.sample-mosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mosaic-tile{display:block;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;text-decoration:none;color:var(--ink);transition:transform .2s ease,opacity .2s ease,border-color .2s}
.mosaic-tile pre{margin:0 0 8px;font:11px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;color:#4b4d47;white-space:pre;overflow:hidden;max-height:96px}
.mosaic-tile span{display:block;font-size:12px;color:var(--muted)}
.sample-mosaic:has(.mosaic-tile:hover) .mosaic-tile:not(:hover){opacity:.45}
.mosaic-tile:hover{transform:scale(1.03);border-color:var(--ink)}
.motion-terminal,.motion-path{border-radius:14px;overflow:hidden}
.motion-terminal{background:#1d1d1b;color:#e8e6dc;height:360px;display:flex;flex-direction:column}
.motion-terminal-head{margin:0;padding:10px 14px;font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:#9c998d;border-bottom:1px solid #2c2c29}
.motion-path .motion-terminal-head{color:var(--muted);border-bottom:1px solid var(--line);padding-left:0}
.motion-terminal pre{flex:1;margin:0;padding:12px 14px;overflow:hidden;font:12px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace}
.motion-roll{display:block}.motion-roll span{display:block;white-space:pre-wrap;word-break:break-all}
.motion-path ol{list-style:none;margin:16px 0 0;padding:0 0 0 18px;border-left:1px solid var(--line);display:grid;gap:14px}
.motion-path li{position:relative;margin:0}
.motion-path li::before{content:"";position:absolute;left:-23px;top:7px;width:9px;height:9px;border-radius:50%;background:var(--paper);border:1px solid var(--ink)}
.motion-path strong{display:block;font-size:14px}.motion-path span{font-size:13px;color:var(--muted)}
@media(min-width:391px) and (prefers-reduced-motion:no-preference){
  .motion-ready .mosaic-tile{animation:document-settle 75s ease-in-out infinite;animation-delay:calc(var(--step)*-9s)}
  .motion-ready .motion-roll{animation:terminal-roll 75s linear infinite}
  .motion-ready .motion-path li::before{animation:path-pulse 75s ease-in-out infinite;animation-delay:calc(var(--step)*-12s)}
}
@keyframes terminal-roll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes path-pulse{0%,100%{background:var(--paper)}8%{background:var(--ink)}16%{background:var(--paper)}}
@media(max-width:390px){.sample-mosaic *,.motion-roll,.motion-path *{animation:none!important;transform:none!important}}
@media(prefers-reduced-motion:reduce){.sample-mosaic *,.motion-roll,.motion-path *{animation:none!important;transform:none!important}}