/* ====== motion graphics (loaded only on pages that use them) ====== */
.motion{margin:0 0 var(--s6);background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s5);box-shadow:var(--shadow-1);max-width:680px}
.motion__head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-bottom:var(--s3)}
.motion__head h3{margin:0;font-size:var(--fs-h3)}
.motion__stage{border-radius:var(--r-m);overflow:hidden;background:var(--mist-50)}
.mo-svg{width:100%;height:auto;display:block}
.motion__bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);margin:var(--s3) 0}
.motion__toggle{min-height:44px;min-width:44px;padding:.4rem 1.1rem;border:2px solid var(--ocean-700);background:#fff;color:var(--ocean-700);border-radius:999px;font:inherit;font-weight:700;cursor:pointer}
.motion__toggle:hover{background:var(--ocean-700);color:#fff}
.mo-ctl{display:flex;flex-direction:column;gap:.15rem;min-width:200px;flex:1 1 200px}
.mo-ctl label{font-weight:700;color:var(--navy-900);font-size:.9375rem}
.mo-ctl input[type=range]{width:100%;height:44px;accent-color:var(--ocean-700);cursor:pointer}
.mo-check{display:flex;align-items:center;gap:.6rem;min-height:44px;font-weight:700;color:var(--navy-900);cursor:pointer}
.mo-check input{width:22px;height:22px;accent-color:var(--ocean-700)}
.mo-read{margin:0;display:flex;flex-wrap:wrap;gap:.25rem 1.2rem;font-size:.9375rem;flex-basis:100%}
.mo-read strong{color:var(--ocean-700)}
.mo-steps{counter-reset:ms;margin:var(--s3) 0 var(--s2);display:grid;gap:.35rem}
.mo-steps li{counter-increment:ms;position:relative;padding:.35rem .8rem .35rem 0;padding-inline-start:2.4rem;border-radius:var(--r-s);font-size:.9375rem}
.mo-steps li::before{content:counter(ms,persian);position:absolute;inset-inline-start:.45rem;top:.35rem;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--navy-900);color:var(--green-500);display:grid;place-items:center;font-size:.8rem;font-weight:700}
.motion figcaption{font-size:.875rem;color:var(--slate-700)}
.motion__note{display:block;margin-top:.25rem;color:var(--amber-700)}
/* svg parts */
.mo-bgp{fill:var(--mist-50)}
.mo-node rect{fill:#fff;stroke:var(--ocean-700);stroke-width:2.5}
.mo-node--aot rect{fill:var(--navy-900);stroke:var(--navy-900)}
.mo-t{fill:var(--navy-900);font-weight:700;font-size:24px;font-family:var(--font)}
.mo-t--aot{fill:#fff;font-size:30px}
.mo-s{fill:var(--slate-700);font-size:19px;font-family:var(--font)}
.mo-s--w{fill:#fff}
.mo-node--aot .mo-s{fill:#9fe0ee}
.mo-num{fill:var(--green-500)}
.mo-numt{fill:var(--navy-900);font-weight:700;font-size:16px;font-family:var(--font)}
.mo-flow{fill:none;stroke:var(--aqua-500);stroke-width:5;stroke-linecap:round;stroke-dasharray:10 8}
.mo-flow--ret,.mo-flow--ret-static{stroke:var(--green-500)}
.mo-flow--ret-static{fill:none;stroke-width:5}
.mo-ah{fill:var(--aqua-500)}.mo-ahg{fill:var(--green-500)}
.mo-drop{fill:var(--aqua-500)}
.mo-unit{fill:var(--navy-900)}
/* M2 */
.mo2-ring{fill:none;stroke:var(--aqua-500);stroke-width:4;opacity:.5}
.mo2-bolt{fill:var(--green-500)}
.mo2-rad,.mo2-rad-l{fill:var(--aqua-500);stroke:#fff;stroke-width:2}
.mo2-blob{fill:var(--red-700);opacity:.9}
.mo2-frag{fill:var(--green-500)}
/* M3 */
.mo3-pipe{fill:#CFEAF3;stroke:var(--ocean-700);stroke-width:3}
.mo3-beam{fill:var(--aqua-500);opacity:calc(.12 + var(--ui,.5) * .45)}
.mo3-p,.mo3-l{fill:var(--red-700);stroke:#fff;stroke-width:2}
.mo3-l.dead-l,.mo3-p.dead{fill:#B7C4CE}
/* M4 */
.mo4-n2 rect{fill:#FBE3E0}.mo4-n3 rect{fill:#FFF1D6}.mo4-n4 rect{fill:#E3F4DC}.mo4-n1 rect,.mo4-n5 rect{fill:#E4EEF5}
.mo4-dot{fill:var(--ocean-700)}.mo4-dot2{fill:var(--red-700)}.mo4-dot3{fill:var(--amber-700)}.mo4-dot4{fill:var(--ok-700)}
/* M5 */
.mo5-z{fill:none;stroke-width:36;stroke-linecap:butt}
.mo5-z--low{stroke:#E8C06A}.mo5-z--ok{stroke:var(--green-500)}.mo5-z--high{stroke:#D9625B}
.mo5-needle{transform-origin:300px 300px;transform:rotate(calc(var(--v,20) * -1.8deg));transition:transform .35s ease}
.mo5-needle line{stroke:var(--navy-900);stroke-width:8;stroke-linecap:round}
.mo5-needle circle{fill:var(--navy-900)}
.mo5-fish{fill:var(--ocean-700)}
.motion--m5[data-zone=high] .mo5-fish{fill:var(--red-700)}
.motion--m5[data-zone=low] .mo5-fish{fill:var(--ocean-700);opacity:.75}
/* ====== animations (only transform/opacity/stroke-dashoffset) ====== */
@keyframes mo-dash{to{stroke-dashoffset:-36}}
@keyframes mo-hl{0%{stroke-width:2.5}3%,13%{stroke-width:8;stroke:var(--aqua-500)}16%,100%{stroke-width:2.5}}
@keyframes mo-step{0%{background:var(--mist-50);box-shadow:inset 3px 0 0 var(--green-500)}22%{background:var(--mist-50);box-shadow:inset 3px 0 0 var(--green-500)}28%,100%{background:transparent;box-shadow:none}}
.motion:not(.is-paused) .mo-flow{animation:mo-dash 1s linear infinite}
.motion--m1:not(.is-paused) .mo-node rect{animation:mo-hl 8.4s infinite;animation-delay:calc(var(--i) * 1.2s)}
.motion--m4:not(.is-paused) .mo-node rect{animation:mo-hl 6s infinite;animation-delay:calc(var(--i) * 1.2s)}
@keyframes mo2-ring{0%,20%{transform:scale(.6);opacity:.7}40%{transform:scale(1.25);opacity:0}100%{opacity:0}}
@keyframes mo2-rad{0%,20%{opacity:0;transform:translateX(0) scale(.3)}30%{opacity:1;transform:translateX(0) scale(1)}70%{opacity:1;transform:translateX(-330px) scale(1)}74%,100%{opacity:0;transform:translateX(-340px) scale(.2)}}
@keyframes mo2-poll{0%,70%{transform:scale(1);opacity:.9}86%{transform:scale(.25);opacity:.9}87%,100%{transform:scale(.25);opacity:0}}
@keyframes mo2-frag{0%,84%{opacity:0;transform:translateY(0) scale(.3)}90%{opacity:1;transform:translateY(-10px) scale(1)}100%{opacity:1;transform:translateY(-70px) scale(1)}}
.motion--m2:not(.is-paused) .mo2-ring{transform-origin:520px 240px;animation:mo2-ring 10s infinite}
.motion--m2:not(.is-paused) .mo2-rad{animation:mo2-rad 10s infinite;animation-delay:calc(var(--k) * .12s)}
.motion--m2:not(.is-paused) .mo2-poll{transform-origin:126px 232px;animation:mo2-poll 10s infinite}
.motion--m2:not(.is-paused) .mo2-frag{animation:mo2-frag 10s infinite}
.motion--m2:not(.is-paused) .mo-steps li{animation:mo-step 10s infinite;animation-delay:calc(var(--i) * 2.5s)}
@keyframes mo3-run{from{transform:translateX(0)}to{transform:translateX(-580px)}}
@keyframes mo3-dead{0%,46%{fill:var(--red-700)}54%,100%{fill:#B7C4CE}}
.motion--m3 .mo3-p{transform:translateX(var(--x,0))}
.motion--m3:not(.is-paused) .mo3-p{animation:mo3-run var(--dur,10s) linear infinite;animation-delay:calc(var(--d) * var(--dur,10s) / 14)}
.motion--m3:not(.is-paused) .mo3-p.dead{animation:mo3-run var(--dur,10s) linear infinite,mo3-dead var(--dur,10s) linear infinite;animation-delay:calc(var(--d) * var(--dur,10s) / 14),calc(var(--d) * var(--dur,10s) / 14)}
@keyframes mo4-dot{0%{opacity:0;transform:translateY(0)}15%{opacity:1}70%{opacity:1;transform:translateY(var(--y1))}85%,100%{opacity:0;transform:translateY(var(--y1))}}
.motion--m4:not(.is-paused) .mo4-dot{animation:mo4-dot 3.6s ease-in-out infinite;animation-delay:calc(var(--i) * .9s)}
.motion--m4 .mo4-dot{opacity:0}
.motion--m4.is-paused .mo4-dot,.motion--m4[data-static] .mo4-dot{opacity:0}
.motion--m4:not(.is-paused) .mo-steps li{animation:mo-step 6s infinite;animation-delay:calc(var(--i) * 1.5s)}
.motion--m1:not(.is-paused) .mo-steps li{animation:mo-step 8.4s infinite;animation-delay:calc(var(--i) * 1.2s)}
@keyframes mo5-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.motion--m5[data-zone=high] .mo5-fish{animation:mo5-shake .4s linear infinite}
/* pause while off-screen (saves CPU) */
.motion.is-offscreen *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  .motion__toggle{display:none}
  .motion *,.motion *::before{animation:none!important;transition:none!important}
  .motion .mo3-p.dead{fill:#B7C4CE}
}