/* All rules are confined to the inline motion demonstration. */
.code-diagram .term-visual-svg.motion-visual{display:block;width:100%;height:100%;overflow:visible}
.motion-visual .v-ink{fill:var(--color-text)}
.motion-visual .v-muted{fill:var(--color-muted)}
.motion-visual .v-accent{fill:var(--color-accent)}
.motion-visual .v-soft{fill:var(--color-accent-soft)}
.motion-visual .v-surface{fill:var(--color-bg)}
.motion-visual .v-stroke{stroke:var(--color-border);stroke-width:1}
.motion-visual .v-line{fill:none;stroke:var(--color-border);stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.motion-visual .v-text,.motion-visual .v-small{fill:var(--color-secondary);font-family:var(--font-body,system-ui,sans-serif);font-weight:500;letter-spacing:0}
.motion-visual .v-text{font-size:12px}.motion-visual .v-small{font-size:9px}
.motion-visual .mv-on-accent{fill:var(--color-bg)}
.motion-visual .mv-outline{fill:none;stroke:var(--color-accent);stroke-width:1}
.motion-visual .mv-accent-line{stroke:var(--color-accent);stroke-width:1}
.motion-visual .mv-strong{stroke:var(--color-text);stroke-width:1.25}
.motion-visual .mv-wave-line{stroke:var(--color-accent);stroke-width:1}
.motion-visual .mv-dashed{stroke-dasharray:4 5}.motion-visual .mv-ghost{opacity:.45}

/* A paused animation is a representative mid-cycle frame. The parent owns playback. */
.motion-visual .mv-anim{animation-duration:3.6s;animation-iteration-count:infinite;animation-delay:-1.8s;animation-fill-mode:both;animation-timing-function:ease-in-out;animation-play-state:paused;transform-box:fill-box;transform-origin:center}
.code-diagram[data-motion='true'][data-playing='true'] .motion-visual .mv-anim{animation-play-state:running}
.motion-visual .mv-delay-0{animation-delay:-.3s}.motion-visual .mv-delay-1{animation-delay:-1.5s}.motion-visual .mv-delay-2{animation-delay:-2.7s}
.motion-visual .mv-travel{animation-name:mv-travel;transform:translateX(108px)}
.motion-visual .mv-linear{animation-timing-function:linear}.motion-visual .mv-eased{animation-timing-function:cubic-bezier(.42,0,.58,1)}
.motion-visual .mv-key-state{animation-name:mv-key-state;transform:rotate(45deg)}
.motion-visual .mv-wave-breathe{animation-name:mv-wave-breathe;animation-duration:4s;transform:scaleY(.76)}
.motion-visual .mv-scan{animation-name:mv-scan;animation-duration:4s;animation-timing-function:linear;transform:translateX(121px)}
.motion-visual .mv-note{animation-name:mv-note;animation-duration:3.6s;transform:scaleY(.8)}
.motion-visual .mv-brand{animation-name:mv-brand;animation-duration:3.6s}
.motion-visual .mv-panel-select{animation-name:mv-panel-select;animation-duration:4.5s;animation-timing-function:steps(1,end);transform:translateX(95px)}
.motion-visual .mv-animatic-strip{animation-name:mv-animatic-strip;animation-duration:4s;animation-timing-function:steps(1,end);transform:translateX(-180px)}
.motion-visual .mv-animatic-head{animation-name:mv-animatic-head;animation-duration:4s;animation-timing-function:linear;transform:translateX(90px)}
.motion-visual .mv-shot-row{animation-name:mv-shot-row;animation-duration:4.5s;animation-timing-function:steps(1,end);transform:translateY(34px)}
.motion-visual .mv-comp-object{animation-name:mv-comp-object;animation-duration:4s;animation-timing-function:steps(96,end)}
.motion-visual .mv-comp-head{animation-name:mv-comp-head;animation-duration:4s;animation-timing-function:linear;transform:translateX(100px)}
.motion-visual .mv-drop-fast{animation-name:mv-drop-fast;animation-duration:4.8s;transform:translateY(72px)}
.motion-visual .mv-drop-slow{animation-name:mv-drop-slow;animation-duration:4.8s;transform:translateY(41px)}
.motion-visual .mv-spacing-even,.motion-visual .mv-spacing-change{animation-name:mv-spacing;transform:translateX(110px)}
.motion-visual .mv-spacing-even{animation-timing-function:linear}.motion-visual .mv-spacing-change{animation-timing-function:cubic-bezier(.55,0,.8,.45)}
.motion-visual .mv-fps-low,.motion-visual .mv-fps-high{animation-name:mv-fps;animation-duration:3s;transform:translateX(108px)}
.motion-visual .mv-fps-low{animation-timing-function:steps(18,end)}.motion-visual .mv-fps-high{animation-timing-function:steps(72,end)}
.motion-visual .mv-title-hold{animation-name:mv-title-hold;animation-duration:4.5s;transform:translateY(0)}
.motion-visual .mv-remap{animation-name:mv-remap;animation-duration:4s;animation-timing-function:linear;transform:translate(115px,-49px)}
.motion-visual .mv-blur-move{animation-name:mv-blur-move;animation-duration:4s;animation-timing-function:linear;transform:translateX(173px)}
.motion-visual .mv-blur-ghosts{animation-name:mv-blur-ghosts;animation-duration:4s;animation-timing-function:linear;opacity:0}
.motion-visual .mv-orbit{animation-name:mv-orbit;animation-duration:4s;animation-timing-function:linear}
.motion-visual .mv-linear-dot{animation-name:mv-linear-dot;animation-timing-function:linear;transform:translate(120px,-45px)}
.motion-visual .mv-curve-x{animation-name:mv-curve-x;animation-timing-function:linear;transform:translateX(120px)}
.motion-visual .mv-curve-y{animation-name:mv-curve-y;animation-timing-function:cubic-bezier(.42,0,.58,1);transform:translateY(-45px)}
.motion-visual .mv-hold-step{animation-name:mv-hold-step;animation-timing-function:linear;transform:translate(120px,-36px)}
.motion-visual .mv-path{animation-name:mv-path;animation-duration:4s;animation-timing-function:linear;transform:translate(160px,90px)}
.motion-visual .mv-pivot-corner{animation-name:mv-pivot;transform-origin:0% 0%;transform:rotate(-25deg)}
.motion-visual .mv-pivot-center{animation-name:mv-pivot;transform:rotate(-25deg)}
.motion-visual .mv-parent-transform{animation-name:mv-parent-transform;transform-origin:23% 50%;transform:rotate(-12deg)}
.motion-visual .mv-sine{animation-name:mv-sine;animation-duration:4s}
.motion-visual .mv-speed-object{animation-name:mv-speed-object;animation-duration:4s;animation-timing-function:linear;transform:translateX(118px)}
.motion-visual .mv-speed-head,.motion-visual .mv-speed-x{animation-name:mv-speed-x;animation-duration:4s;animation-timing-function:linear;transform:translateX(118px)}
.motion-visual .mv-speed-y{animation-name:mv-speed-y;animation-duration:4s;animation-timing-function:linear;transform:translateY(-61px)}
.motion-visual .mv-anticipate{animation-name:mv-anticipate;animation-duration:4s;transform:translate(61px,-45px)}
.motion-visual .mv-bounce{animation-name:mv-bounce;animation-duration:3.6s;transform:translateY(68px)}
.motion-visual .mv-squash{animation-name:mv-squash;animation-duration:3.6s;transform:scale(1.35,.74)}
.motion-visual .mv-cart-stop{animation-name:mv-cart-stop;animation-duration:4.5s;transform:translateX(126px)}
.motion-visual .mv-tail-settle{animation-name:mv-tail-settle;animation-duration:4.5s;transform-origin:0% 100%;transform:rotate(12deg)}
.motion-visual .mv-overlap-a,.motion-visual .mv-overlap-b,.motion-visual .mv-overlap-c{animation-name:mv-overlap;animation-duration:4s;transform-origin:50% 0%}
.motion-visual .mv-overlap-a{animation-delay:-1s}.motion-visual .mv-overlap-b{animation-delay:-.65s}.motion-visual .mv-overlap-c{animation-delay:-.25s}
.motion-visual .mv-arc-swing{animation-name:mv-arc-swing;animation-duration:4s;transform-origin:50% 0%;transform:rotate(28deg)}
.motion-visual .mv-precomp-group{animation-name:mv-precomp-group;animation-duration:4s}
.motion-visual .mv-alpha{animation-name:mv-alpha;animation-duration:4s;opacity:.55}
.motion-visual .mv-mask-content{animation-name:mv-mask-content;animation-duration:4s;transform:translateX(20px)}
.motion-visual .mv-matte-shift{animation-name:mv-matte-shift;animation-duration:4s;transform:translateX(14px)}
.motion-visual .mv-roto-pose{animation-name:mv-roto-pose;animation-duration:4s;transform:rotate(7deg)}
.motion-visual .mv-roto-trace{animation-name:mv-roto-trace;animation-duration:4s;stroke-dasharray:5 4}
.motion-visual .mv-track-object{animation-name:mv-track-object;animation-duration:4s;transform:translate(31px,-5px)}
.motion-visual .mv-render-bar{animation-duration:4.8s;transform-origin:0% 50%;transform:scaleX(.65)}
.motion-visual .mv-render-0{animation-name:mv-render-0;transform:scaleX(1)}
.motion-visual .mv-render-1{animation-name:mv-render-1;transform:scaleX(.65)}
.motion-visual .mv-render-2{animation-name:mv-render-2;transform:scaleX(.03)}
.motion-visual .mv-file-select{animation-name:mv-file-select;animation-duration:4s;animation-timing-function:steps(1,end);transform:translateX(76px)}
.motion-visual .mv-codec-packet{animation-name:mv-codec-packet;animation-duration:3.6s;opacity:.7}
.motion-visual .mv-state-0{animation-name:mv-state-idle}.motion-visual .mv-state-1{animation-name:mv-state-walk}.motion-visual .mv-state-2{animation-name:mv-state-jump}
.motion-visual .mv-state-0,.motion-visual .mv-state-1,.motion-visual .mv-state-2{animation-duration:4.8s;animation-timing-function:steps(1,end)}
.motion-visual .mv-state-0,.motion-visual .mv-state-2{opacity:0}
.motion-visual .mv-state-body{animation-name:mv-state-body;animation-duration:4.8s}
.motion-visual .mv-limb{animation-name:mv-limb;animation-duration:3.6s}
.motion-visual .mv-legs{animation-name:mv-legs;animation-duration:3.6s;transform-origin:50% 0%}
.motion-visual .mv-retarget{animation-duration:4s;animation-delay:-1s}
.motion-visual .mv-machine-limb{animation-name:mv-machine-limb;animation-duration:4.8s}
.motion-visual .mv-pose-idle{animation-name:none;transform:none}
.motion-visual .mv-pose-walk{animation-name:mv-walk-pose;animation-duration:4s}
.motion-visual .mv-pose-blend{animation-name:mv-blend-pose;animation-duration:4s;transform:rotate(12deg)}
.motion-visual .mv-blend-weight{animation-name:mv-blend-weight;animation-duration:4s;transform:translateX(65px)}
.motion-visual .mv-full-motion{animation-name:mv-full-motion;animation-duration:4s}
.motion-visual .mv-beat{animation-name:mv-beat;animation-duration:4s;transform-origin:50% 100%}
.motion-visual .mv-beat-0{animation-delay:-.1s}.motion-visual .mv-beat-1{animation-delay:-.7s}.motion-visual .mv-beat-2{animation-delay:-1.3s}.motion-visual .mv-beat-3{animation-delay:-2.5s}
.motion-visual .mv-feedback-press{animation-name:mv-feedback-press;animation-duration:4.8s}
.motion-visual .mv-feedback-wait{animation-name:mv-feedback-wait;animation-duration:4.8s;opacity:0}
.motion-visual .mv-feedback-done{animation-name:mv-feedback-done;animation-duration:4.8s;opacity:1}
.motion-visual .mv-product-lid{animation-name:mv-product-lid;animation-duration:4s;transform-origin:0% 50%;transform:rotate(-35deg)}
.motion-visual .mv-product-press{animation-name:mv-product-press;animation-duration:4s}
.motion-visual .mv-demo-head{animation-name:mv-demo-head;animation-duration:4s;animation-timing-function:linear;transform:translateX(96px)}
.motion-visual .mv-toggle-track{animation-name:mv-toggle-track;animation-duration:4s;opacity:1}
.motion-visual .mv-toggle-thumb{animation-name:mv-toggle-thumb;animation-duration:4s;transform:translateX(100px)}
.motion-visual .mv-layer-reveal{animation-name:mv-layer-reveal;animation-duration:4s;transform-origin:0% 50%;transform:scaleX(.72)}
.motion-visual .mv-clip-layers{animation-name:mv-clip-layers;animation-duration:4s;transform:translateX(18px)}

@keyframes mv-travel{0%,100%{transform:translateX(0)}50%{transform:translateX(216px)}}
@keyframes mv-key-state{0%,100%{transform:scale(.7) rotate(0deg)}50%{transform:scale(1) rotate(90deg)}}
@keyframes mv-wave-breathe{0%,100%{transform:scaleY(.65)}45%,65%{transform:scaleY(1)}}
@keyframes mv-scan{from{transform:translateX(0)}to{transform:translateX(242px)}}
@keyframes mv-note{0%,65%,100%{transform:scaleY(.45)}15%,35%{transform:scaleY(1)}}
@keyframes mv-brand{0%,100%{transform:rotate(0) scale(.8)}30%,65%{transform:rotate(90deg) scale(1)}}
@keyframes mv-panel-select{0%{transform:translateX(0)}33.333%{transform:translateX(95px)}66.666%{transform:translateX(190px)}}
@keyframes mv-animatic-strip{0%{transform:translateX(0)}25%{transform:translateX(-180px)}75%{transform:translateX(-360px)}}
@keyframes mv-animatic-head{from{transform:translateX(0)}to{transform:translateX(180px)}}
@keyframes mv-shot-row{0%{transform:translateY(0)}33.333%{transform:translateY(34px)}66.666%{transform:translateY(68px)}}
@keyframes mv-comp-object{0%,100%{transform:translateX(-65px)}50%{transform:translateX(65px)}}
@keyframes mv-comp-head{from{transform:translateX(0)}to{transform:translateX(200px)}}
@keyframes mv-drop-fast{0%,15%,100%{transform:translateY(0)}36%,68%{transform:translateY(71px)}}
@keyframes mv-drop-slow{0%,15%,100%{transform:translateY(0)}65%,68%{transform:translateY(71px)}}
@keyframes mv-spacing{from{transform:translateX(0)}to{transform:translateX(220px)}}
@keyframes mv-fps{from{transform:translateX(0)}to{transform:translateX(216px)}}
@keyframes mv-title-hold{0%,100%{transform:translateY(24px);opacity:.3}20%,78%{transform:translateY(0);opacity:1}95%{transform:translateY(-20px);opacity:.3}}
@keyframes mv-remap{0%{transform:translate(0,0)}25%{transform:translate(60px,-44px)}75%{transform:translate(170px,-54px)}100%{transform:translate(240px,-96px)}}
@keyframes mv-blur-move{0%,100%{transform:translateX(0)}30%,70%{transform:translateX(196px)}}
@keyframes mv-blur-ghosts{0%,29%{opacity:.55;transform:translateX(0)}30%,70%{opacity:0;transform:translateX(0)}71%,100%{opacity:.55;transform:translateX(63px)}}
@keyframes mv-orbit{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes mv-linear-dot{from{transform:translate(0,0)}to{transform:translate(240px,-90px)}}
@keyframes mv-curve-x{from{transform:translateX(0)}to{transform:translateX(240px)}}
@keyframes mv-curve-y{from{transform:translateY(0)}to{transform:translateY(-90px)}}
@keyframes mv-hold-step{0%{transform:translate(0,0)}32.99%{transform:translate(79.2px,0)}33%{transform:translate(79.2px,-36px)}65.99%{transform:translate(158.4px,-36px)}66%{transform:translate(158.4px,-72px)}100%{transform:translate(240px,-72px)}}
@keyframes mv-path{0%{transform:translate(40px,120px)}10%{transform:translate(64px,86.8px)}20%{transform:translate(88px,67.2px)}30%{transform:translate(112px,61.2px)}40%{transform:translate(136px,68.8px)}50%{transform:translate(160px,90px)}60%{transform:translate(184px,110.8px)}70%{transform:translate(208px,117.2px)}80%{transform:translate(232px,109.2px)}90%{transform:translate(256px,86.8px)}100%{transform:translate(280px,50px)}}
@keyframes mv-pivot{0%,100%{transform:rotate(-35deg)}50%{transform:rotate(35deg)}}
@keyframes mv-parent-transform{0%,100%{transform:translateX(-18px) rotate(-17deg)}50%{transform:translateX(18px) rotate(17deg)}}
@keyframes mv-sine{0%,50%,100%{transform:translateY(0)}25%{transform:translateY(-33px)}75%{transform:translateY(33px)}}
@keyframes mv-speed-object{0%{transform:translateX(0)}10%{transform:translateX(6.608px)}20%{transform:translateX(24.544px)}30%{transform:translateX(50.976px)}40%{transform:translateX(83.072px)}50%{transform:translateX(118px)}60%{transform:translateX(152.928px)}70%{transform:translateX(185.024px)}80%{transform:translateX(211.456px)}90%{transform:translateX(229.392px)}100%{transform:translateX(236px)}}
@keyframes mv-speed-x{from{transform:translateX(0)}to{transform:translateX(236px)}}
@keyframes mv-speed-y{0%,100%{transform:translateY(0)}10%,90%{transform:translateY(-21.96px)}20%,80%{transform:translateY(-39.04px)}30%,70%{transform:translateY(-51.24px)}40%,60%{transform:translateY(-58.56px)}50%{transform:translateY(-61px)}}
@keyframes mv-anticipate{0%,100%{transform:translate(0,0) scale(1)}15%{transform:translate(-18px,4px) scale(1.13,.88)}44%{transform:translate(72px,-55px) scale(.88,1.13)}70%,85%{transform:translate(122px,0) scale(1)}}
@keyframes mv-bounce{0%,100%{transform:translateY(0)}53%,60%{transform:translateY(69px)}78%{transform:translateY(35px)}}
@keyframes mv-squash{0%,100%{transform:scale(1)}30%{transform:scale(.78,1.28)}53%,60%{transform:scale(1.35,.74)}78%{transform:scale(.9,1.11)}}
@keyframes mv-cart-stop{0%,100%{transform:translateX(0)}32%,85%{transform:translateX(126px)}}
@keyframes mv-tail-settle{0%,100%{transform:rotate(0)}28%{transform:rotate(-25deg)}38%{transform:rotate(32deg)}49%{transform:rotate(-18deg)}59%{transform:rotate(10deg)}71%,85%{transform:rotate(0)}}
@keyframes mv-overlap{0%,100%{transform:rotate(-23deg)}50%{transform:rotate(23deg)}}
@keyframes mv-arc-swing{0%,100%{transform:rotate(-55deg)}50%{transform:rotate(55deg)}}
@keyframes mv-precomp-group{0%,100%{transform:scale(.78);opacity:.65}50%{transform:scale(1.1);opacity:1}}
@keyframes mv-alpha{0%,100%{opacity:.18}50%{opacity:1}}
@keyframes mv-mask-content{0%,100%{transform:translateX(-24px)}50%{transform:translateX(24px)}}
@keyframes mv-matte-shift{0%,100%{transform:translateX(-15px)}50%{transform:translateX(15px)}}
@keyframes mv-roto-pose{0%,100%{transform:rotate(-9deg) translateX(-19px)}50%{transform:rotate(9deg) translateX(19px)}}
@keyframes mv-roto-trace{from{stroke-dashoffset:0}to{stroke-dashoffset:36}}
@keyframes mv-track-object{0%,100%{transform:translate(-30px,13px)}50%{transform:translate(33px,-8px)}}
@keyframes mv-render-0{0%,10%{transform:scaleX(.03)}35%,100%{transform:scaleX(1)}}
@keyframes mv-render-1{0%,35%{transform:scaleX(.03)}65%,100%{transform:scaleX(1)}}
@keyframes mv-render-2{0%,65%{transform:scaleX(.03)}95%,100%{transform:scaleX(1)}}
@keyframes mv-file-select{0%{transform:translateX(0)}25%{transform:translateX(76px)}50%{transform:translateX(152px)}75%{transform:translateX(228px)}}
@keyframes mv-codec-packet{0%,100%{transform:scale(.6);opacity:.4}50%{transform:scale(1);opacity:1}}
@keyframes mv-state-idle{0%{opacity:1}33.333%{opacity:0}100%{opacity:0}}
@keyframes mv-state-walk{0%{opacity:0}33.333%{opacity:1}66.666%{opacity:0}100%{opacity:0}}
@keyframes mv-state-jump{0%{opacity:0}66.666%{opacity:1}100%{opacity:1}}
@keyframes mv-state-body{0%,33%,66%,100%{transform:translateY(0)}82%{transform:translateY(-24px)}}
@keyframes mv-limb{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
@keyframes mv-legs{0%,100%{transform:skewX(-13deg)}50%{transform:skewX(13deg)}}
@keyframes mv-machine-limb{0%,33%,66%,100%{transform:rotate(0)}40%,56%{transform:rotate(-17deg)}48%{transform:rotate(17deg)}82%{transform:rotate(-12deg)}}
@keyframes mv-walk-pose{0%,100%{transform:rotate(-22deg)}25%,75%{transform:rotate(0)}50%{transform:rotate(22deg)}}
@keyframes mv-blend-pose{0%,25%,75%,100%{transform:rotate(0)}12.5%,87.5%{transform:rotate(-2.75deg)}37.5%,62.5%{transform:rotate(8.25deg)}50%{transform:rotate(22deg)}}
@keyframes mv-blend-weight{0%,100%{transform:translateX(0)}50%{transform:translateX(129px)}}
@keyframes mv-full-motion{0%,100%{transform:translateX(-12px);opacity:.65}35%,78%{transform:translateX(0);opacity:1}}
@keyframes mv-beat{0%,45%,100%{transform:scaleY(.52)}15%,25%{transform:scaleY(1)}}
@keyframes mv-feedback-press{0%,100%{transform:scale(1)}12%{transform:scale(.93)}24%,90%{transform:scale(1)}}
@keyframes mv-feedback-wait{0%,20%,80%,100%{opacity:0;transform:translateY(0)}28%,63%{opacity:1;transform:translateY(-3px)}}
@keyframes mv-feedback-done{0%,67%,100%{opacity:0}75%,92%{opacity:1}}
@keyframes mv-product-lid{0%,100%{transform:rotate(0)}30%,70%{transform:rotate(-44deg)}}
@keyframes mv-product-press{0%,100%{transform:scale(1)}15%{transform:scale(.7)}30%,75%{transform:scale(1)}}
@keyframes mv-demo-head{from{transform:translateX(0)}to{transform:translateX(192px)}}
@keyframes mv-toggle-track{0%,15%,100%{opacity:0}40%,80%{opacity:1}}
@keyframes mv-toggle-thumb{0%,15%,100%{transform:translateX(0)}40%,80%{transform:translateX(100px)}}
@keyframes mv-layer-reveal{0%,100%{transform:scaleX(.28)}50%{transform:scaleX(1)}}
@keyframes mv-clip-layers{0%,100%{transform:translateX(-22px)}50%{transform:translateX(22px)}}

/* Removing animations exposes the explicit base transforms/opacity above.
   Tracks, key states, masks, labels and the outcome remain visible. */
@media(prefers-reduced-motion:reduce){
  .motion-visual .mv-anim,
  .code-diagram[data-motion='true'][data-playing='true'] .motion-visual .mv-anim{animation:none!important}
  .motion-visual .mv-overlap-a{transform:rotate(-16deg)}
  .motion-visual .mv-overlap-b{transform:rotate(22deg)}
  .motion-visual .mv-overlap-c{transform:rotate(-12deg)}
  .motion-visual .mv-state-0,.motion-visual .mv-state-2{opacity:0}
  .motion-visual .mv-state-1{opacity:1}
  .motion-visual .mv-feedback-wait{opacity:0}
  .motion-visual .mv-feedback-done{opacity:1}
  .motion-visual .mv-blur-move{transform:translateX(108px)}
  .motion-visual .mv-blur-ghosts{opacity:.45;transform:none}
}