/* Three motion systems, scoped to enhanced components. Existing HTML is the fallback. */
.motion-controls { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:2rem; position:relative; }
.motion-caption { font: .75rem/1.5 var(--mn-font-mono); color:var(--mn-text-muted); }
.motion-replay { flex:none; color:var(--mn-link); background:none; border:0; padding:.6rem 0 .6rem .6rem; font:600 .875rem var(--mn-font-body); cursor:pointer; }
.motion-replay:disabled { color:var(--mn-text-muted); cursor:default; }
.document-motion { isolation:isolate; }
.document-motion::before { bottom:4.6rem; }
.document-motion .doc { rotate:0deg; }
.document-motion .doc-chip { animation:none; }
.document-motion .doc-chip--2 { bottom:7.8rem; }
.document-motion .doc-bar { flex-wrap:wrap; overflow-wrap:anywhere; }
.document-motion .doc-body { min-height:24rem; }
.source-stack { position:absolute; inset:0 0 5rem; perspective:1000px; pointer-events:none; z-index:4; visibility:hidden; }
.source-piece { position:absolute; width:85%; left:7.5%; top:calc(8% + var(--piece) * 21%); display:flex; flex-direction:column; gap:1rem; padding:1.35rem; color:var(--mn-ink); background:var(--mn-white); border:1px solid var(--mn-hairline); border-radius:var(--mn-radius-md); box-shadow:var(--mn-shadow-lg); transform:translateX(calc((var(--piece) - 1) * 17px)) rotate(calc((var(--piece) - 1) * 5deg)); }
.source-kicker,.source-detail { font:.75rem/1.6 var(--mn-font-mono); color:var(--mn-warm-grey); }
.source-piece strong { font:700 1.25rem/1.2 var(--mn-font-display); }
.source-piece mark { position:relative; width:fit-content; padding:.15rem .3rem; color:var(--mn-ink); background:transparent; font-size:.875rem; isolation:isolate; }
.source-piece mark::before { content:''; position:absolute; inset:0; z-index:-1; background:color-mix(in srgb,var(--mn-orange) 20%,var(--mn-white)); transform:scaleX(0); transform-origin:left; }
.is-assembling .source-stack { visibility:visible; }
.is-assembling .source-piece { animation:piece-assemble 4.5s var(--mn-ease-out) both; animation-delay:calc(var(--piece) * .08s); }
.is-assembling .source-piece mark::before { animation:piece-mark 4.5s var(--mn-ease-out) both; animation-delay:calc(var(--piece) * .08s); }
.is-assembling .doc { animation:document-assemble 4.5s var(--mn-ease-out) both; }
.is-assembling .doc-body { animation:document-content 4.5s var(--mn-ease-out) both; }
.is-assembling .doc-chip,.is-assembling .doc-status { animation:document-status 4.5s var(--mn-ease-out) both; }
@keyframes piece-assemble {
  0% { opacity:0; translate:0 30px; }
  13%,46% { opacity:1; translate:0 0; }
  66% { opacity:1; translate:0 calc((1 - var(--piece)) * 64px); transform:rotate(0deg) scale(.9); }
  79%,100% { opacity:0; translate:0 calc((1 - var(--piece)) * 64px); transform:rotate(0deg) scale(.84); }
}
@keyframes piece-mark { 0%,24% { transform:scaleX(0); } 38%,100% { transform:scaleX(1); } }
@keyframes document-assemble { 0%,54% { opacity:0; transform:translateY(12px) scale(.93); } 80%,100% { opacity:1; transform:none; } }
@keyframes document-content { 0%,67% { opacity:0; clip-path:inset(0 0 100% 0); } 91%,100% { opacity:1; clip-path:inset(0); } }
@keyframes document-status { 0%,86% { opacity:0; transform:translateY(6px); } 100% { opacity:1; transform:none; } }

/* The text scrolls normally. Only the small scene and step selector stick. */
.method-motion { --method-progress:0%; }
.method-motion .mx-rail { z-index:6; padding:1.5rem 0; margin-bottom:2rem; background:var(--mn-white); }
.method-motion .mx-rail::before { top:1.5rem; }
.method-motion .mx-tab { padding-top:1.25rem; }
.method-motion .mx-tab.is-on::before { animation:none; }
.method-motion .mx-rail::after { content:''; position:absolute; left:0; top:1.5rem; height:2px; width:calc(var(--method-progress) * .75); background:var(--mn-orange); transition:width .6s var(--mn-ease-out); }
.method-layout { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:3rem; align-items:start; }
.method-motion .mx-stage { display:block; min-width:0; }
.method-motion .mx-panel,.js .method-motion .mx-panel:not(.is-on) { display:block; position:relative; visibility:visible; opacity:1; transform:none; pointer-events:auto; padding:2rem; margin:0 0 2rem; min-width:0; scroll-margin-top:14rem; transition:none; overflow:visible; }
.method-motion .mx-panel + .mx-panel { margin-top:3rem; }
.method-motion .mx-main > p { font-size:1rem; }
.method-motion .mx-main h3 { font-size:1.75rem; }
.method-motion .mx-side { border-left:0; border-top:1px solid var(--mn-border); padding:1.5rem 0 0; margin-top:1.5rem; }
.method-motion .mx-panel .card-num { font-size:5rem; top:.4rem; right:1rem; }
.method-motion .mx-panel .btn-row { gap:.75rem; }
.method-motion .mx-panel .btn { font-size:.9375rem; }
.method-scene { position:relative; background:var(--mn-ink); color:var(--mn-bone); border-radius:var(--mn-radius-lg); padding:1.6rem; overflow:hidden; box-shadow:var(--mn-shadow-lg); }
.method-scene-top { display:flex; justify-content:space-between; gap:1rem; color:var(--mn-warm-grey-light); font:.75rem/1.5 var(--mn-font-mono); letter-spacing:.08em; }
.method-scene-index { color:var(--mn-orange); }
.method-scene-title { font:700 1.5rem/1.25 var(--mn-font-display); margin:1.5rem 0 0; max-width:17ch; min-height:3.75rem; }
.method-canvas { position:relative; height:310px; margin:1.25rem 0; }
.work-item { display:grid; grid-template-columns:1.7rem 1fr; gap:.25rem .5rem; align-items:center; position:absolute; left:5%; top:30px; width:90%; min-height:70px; padding:.9rem 1rem; border-radius:var(--mn-radius-sm); background:var(--mn-bone); color:var(--mn-ink); box-shadow:0 12px 22px color-mix(in srgb,var(--mn-ink) 24%,transparent); transition:transform .75s var(--mn-ease-out),background .5s, color .5s; }
.work-index { grid-row:span 2; color:var(--mn-orange-deep); font:.75rem var(--mn-font-mono); }
.work-item strong { font:700 .9375rem/1.3 var(--mn-font-display); }
.work-note { color:var(--mn-warm-grey); font:.75rem var(--mn-font-mono); }
.work-item:nth-of-type(1) { transform:translate(-8px,0) rotate(-4deg); }
.work-item:nth-of-type(2) { transform:translate(10px,86px) rotate(3deg); }
.work-item:nth-of-type(3) { transform:translate(-4px,172px) rotate(-2deg); }
[data-step="1"] .work-item:nth-of-type(1) { transform:translate(0,0); }
[data-step="1"] .work-item:nth-of-type(2) { transform:translate(0,86px); background:var(--mn-ink-raised); color:var(--mn-bone); outline:1px solid var(--mn-warm-grey); }
[data-step="1"] .work-item:nth-of-type(2) .work-note { color:var(--mn-warm-grey-light); }
[data-step="1"] .work-item:nth-of-type(2) .work-index { color:var(--mn-orange); }
[data-step="1"] .work-item:nth-of-type(3) { transform:translate(0,172px); }
[data-step="2"] .work-item:nth-of-type(1) { transform:translate(0,-12px) scale(.92); }
[data-step="2"] .work-item:nth-of-type(2) { transform:translate(0,89px) scale(.92); }
[data-step="2"] .work-item:nth-of-type(3) { transform:translate(0,190px) scale(.92); outline:2px solid var(--mn-orange); }
[data-step="3"] .work-item:nth-of-type(1) { transform:translate(0,20px); }
[data-step="3"] .work-item:nth-of-type(2) { transform:translate(0,95px); }
[data-step="3"] .work-item:nth-of-type(3) { transform:translate(0,170px); }
.method-circuit { position:absolute; width:100%; height:100%; opacity:0; transition:opacity .4s; }
.method-circuit path { stroke:var(--mn-orange); stroke-width:2; stroke-dasharray:300; stroke-dashoffset:300; transition:stroke-dashoffset 1.2s var(--mn-ease-out); }
[data-step="2"] .method-circuit { opacity:1; }
[data-step="2"] .method-circuit path { stroke-dashoffset:0; }
.method-scene-foot { font:.8125rem/1.6 var(--mn-font-mono); padding-top:1rem; margin:0; border-top:1px solid var(--mn-warm-grey); color:var(--mn-warm-grey-light); }
.method-scene-mobile { display:none; }
@media (min-width:64rem) and (min-height:48rem) {
  .method-motion .mx-rail { position:sticky; top:3.8rem; }
  .method-layout > .method-scene { position:sticky; top:14rem; }
}
@media (max-width:63.999rem), (max-height:47.999rem) {
  .method-layout { display:block; }
  .method-layout > .method-scene { display:none; }
  .method-scene-mobile { display:block; margin-bottom:2rem; }
  .method-motion .mx-panel { scroll-margin-top:6rem; }
  .method-motion .mx-rail { position:relative; }
}

@media (max-width:40rem) {
  .document-motion .doc-body { font-size:.72rem; padding:1rem; min-height:23rem; }
  .document-motion .doc-chip { font-size:.625rem; max-width:100%; white-space:normal; }
  .document-motion .doc-chip--2 { left:0; }
  .source-piece { gap:.7rem; padding:1rem; }
  .motion-caption { font-size:.6875rem; }
  .method-motion .mx-panel { padding:1.25rem; }
  .method-scene { padding:1.25rem; }
  .method-motion .mx-rail::after { display:none; }
  .method-motion .mx-rail { gap:1.25rem; }
  .method-motion .mx-name { font-size:1.05rem; }
  .method-motion .mx-chip { font-size:.6875rem; }

}
@media (prefers-reduced-motion:reduce) {
  .document-motion *, .document-motion *::before, .method-motion *, .method-motion *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .document-motion .source-stack { display:none; }
  .document-motion .doc,.document-motion .doc-body,.document-motion .doc-chip,.document-motion .doc-status { opacity:1; transform:none; clip-path:none; }
  .motion-replay { display:none; }
  .method-motion .mx-rail,.method-layout > .method-scene { position:relative; top:auto; }
  .method-layout { display:block; }
  .method-layout > .method-scene { display:none; }
  .method-scene-mobile { display:block; margin-bottom:2rem; }
}