:root{ --signal-bright:#16A34A; --signal-soft:rgba(15,122,69,.13); --r:10px; }

/* ============================================================
   THE MACHINE — contraption scenes (hero loop + method scrub)
   ============================================================ */
.mach{position:relative}
.mach-stage{
  position:relative;border:1px solid var(--rule);border-radius:calc(var(--r) + 3px);
  background:linear-gradient(180deg,#EAF6EF 0%,#DFF1E7 46%,#D6ECE0 100%);
  overflow:hidden;
}
.mach-svg{display:block;width:100%;height:auto}

.m-track{fill:none;stroke:#0A5730;stroke-width:7;stroke-linecap:round;opacity:.9}
.m-track-shadow{fill:none;stroke:#0A5730;stroke-width:12;stroke-linecap:round;opacity:.14;transform:translateY(6px)}
.m-st [data-depth],.m-st{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.m-post{fill:#0A5730}
.m-funnel{fill:#0F7A45}
.m-doc{fill:#FBFBF9;stroke:#0A5730;stroke-width:2}
.m-doc-still{opacity:1}
.m-lab{font-family:var(--mono);font-size:13px;fill:#0A5730;text-anchor:middle;letter-spacing:.04em;text-transform:uppercase;opacity:.72}
.m-lab-dk{fill:#EAF6EF;opacity:.95}
.m-glass{fill:#FBFBF9;opacity:.9}
.m-ring{fill:none;stroke:#0A5730;stroke-width:5}
.m-fig{font-family:var(--mono);font-size:17px;font-weight:700;fill:#17181B;text-anchor:middle;opacity:0}
.m-grader rect{fill:#16A34A}
.m-hammer{transform-origin:584px 40px}
.m-stamp{font-family:var(--display);font-weight:700;font-size:19px;fill:#FBFBF9;text-anchor:middle}
.m-box{fill:#0F7A45}
.m-flap{fill:#0A5730;transform-origin:772px 190px}
.m-flag rect{fill:#9E2B25}
.m-flag{transform-origin:859px 202px;transform:rotate(90deg)}
.m-bar{fill:#FBFBF9;stroke:#0A5730;stroke-width:2.5;transform-origin:center bottom;transform:scaleY(.28)}
.m-bar.b2{fill:#16A34A;stroke:#0A5730}
.m-ball-c{fill:#17181B}
.m-ball-hi{fill:#FBFBF9;opacity:.55}
.m-ball-sh{fill:#0A5730;opacity:.22}
.m-ball{offset-distance:0%}

/* legend */
.mach-legend{
  list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.55rem 1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;color:var(--muted);
  text-transform:uppercase;
}
.mach-legend b{color:var(--signal-ink);margin-right:.4rem}

@media (prefers-reduced-motion:no-preference){
  /* --- hero loop --- */
  .m-live .m-ball{animation:m-roll 9s cubic-bezier(.55,.05,.5,.95) infinite}
  .m-live .m-ball-c{animation:m-spin 1.1s linear infinite}
  .m-live .m-doc.d1{animation:m-drop 9s ease-in infinite}
  .m-live .m-doc.d2{animation:m-drop 9s ease-in infinite .35s}
  .m-live .m-doc.d3{animation:m-drop 9s ease-in infinite .7s}
  .m-live .m-ring{animation:m-lens 9s ease-out infinite}
  .m-live .m-fig{animation:m-fig 9s ease-out infinite}
  .m-live .m-hammer{animation:m-hammer 9s cubic-bezier(.3,1.6,.4,1) infinite}
  .m-live .m-flap{animation:m-flap 9s ease-out infinite}
  .m-live .m-flag{animation:m-flag 9s ease-out infinite}
  .m-live .m-bar.b1{animation:m-bar 9s cubic-bezier(.2,1.5,.4,1) infinite}
  .m-live .m-bar.b2{animation:m-bar 9s cubic-bezier(.2,1.5,.4,1) infinite .12s}
  .m-live .m-bar.b3{animation:m-bar 9s cubic-bezier(.2,1.5,.4,1) infinite .24s}

  /* --- method scrub states --- */
  .m-ball,.m-ring,.m-fig,.m-hammer,.m-flap,.m-flag,.m-bar{transition:all .45s cubic-bezier(.2,.7,.2,1)}
  .m-at-lens .m-ring{stroke:#16A34A;stroke-width:7}
  .m-at-lens .m-fig{opacity:1}
  .m-at-stamp .m-hammer{transform:translateY(56px)}
  .m-at-mail .m-flap{transform:rotate(-104deg)}
  .m-at-mail .m-flag{transform:rotate(0deg)}
  .m-done .m-bar{transform:scaleY(1)}
}
@media (prefers-reduced-motion:reduce){
  .m-fig{opacity:1}
  .m-bar{transform:none}
  .m-ball{offset-distance:62%}
}

@keyframes m-roll{
  0%{offset-distance:0%;opacity:0}
  4%{opacity:1}
  26%{offset-distance:26%}
  32%{offset-distance:30%}
  46%{offset-distance:46%}
  53%{offset-distance:49%}
  68%{offset-distance:69%}
  74%{offset-distance:72%}
  92%{offset-distance:100%;opacity:1}
  97%,100%{offset-distance:100%;opacity:0}
}
@keyframes m-spin{to{transform:rotate(360deg)}}
@keyframes m-drop{0%,2%{transform:translateY(-16px);opacity:0}6%{opacity:1}12%{transform:translateY(46px);opacity:0}13%,100%{transform:translateY(-16px);opacity:0}}
@keyframes m-lens{0%,24%{stroke:#0A5730;stroke-width:5}30%{stroke:#16A34A;stroke-width:9}40%,100%{stroke:#0A5730;stroke-width:5}}
@keyframes m-fig{0%,26%{opacity:0}32%{opacity:1}58%{opacity:1}64%,100%{opacity:0}}
@keyframes m-hammer{0%,44%{transform:translateY(0)}50%{transform:translateY(56px)}58%{transform:translateY(0)}100%{transform:translateY(0)}}
@keyframes m-flap{0%,64%{transform:rotate(0)}70%{transform:rotate(-104deg)}84%{transform:rotate(-104deg)}90%,100%{transform:rotate(0)}}
@keyframes m-flag{0%,66%{transform:rotate(90deg)}74%{transform:rotate(0)}94%,100%{transform:rotate(90deg)}}
@keyframes m-bar{0%,84%{transform:scaleY(.28)}92%{transform:scaleY(1)}98%,100%{transform:scaleY(.28)}}

/* ---------- method: scrubbed rail ---------- */
.mach-method{display:grid;gap:1.6rem}
.mach-rail{display:grid;grid-template-columns:3px 1fr;gap:1.4rem}
.mach-prog{background:var(--rule);border-radius:2px;position:relative;overflow:hidden}
.mach-prog i{position:absolute;inset:0 0 auto 0;height:0;background:var(--signal-bright);display:block;transition:height .12s linear}
.mach-steps{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.mach-steps li{
  display:grid;grid-template-columns:2.6rem 1fr;gap:.9rem;align-items:start;
  opacity:.34;transform:translateY(6px);
  transition:opacity .4s ease,transform .4s cubic-bezier(.2,.7,.2,1);
}
.mach-steps li.on{opacity:1;transform:none}
.mach-steps li b{font-family:var(--mono);font-size:.78rem;color:var(--signal);padding-top:.25rem}
.mach-steps li strong{display:block;font-family:var(--display);font-size:1.02rem;letter-spacing:-.01em}
.mach-steps li span{display:block;color:var(--muted);font-size:.95rem;line-height:1.55}
.mach-steps li.now strong{color:var(--signal-ink)}
@media (min-width:900px){
  .mach-method{grid-template-columns:1.15fr 1fr;gap:2.6rem;align-items:start}
  .mach-method .mach-stage{position:sticky;top:5.5rem}
  .mach-method .mach-steps{gap:2.4rem}
}
@media (prefers-reduced-motion:reduce){
  .mach-steps li{opacity:1;transform:none}
}

/* ---------- section motifs ---------- */
.motif{width:60px;height:60px;flex:0 0 auto}
.mot{width:100%;height:100%;overflow:visible;fill:var(--signal)}
.mot .hole{fill:#EAF6EF}
.sechead .motif{margin-bottom:.7rem}
@media (prefers-reduced-motion:no-preference){
  .mot-gears .g1{transform-origin:22px 30px;animation:m-spin 7s linear infinite}
  .mot-gears .g2{transform-origin:45px 18px;animation:m-spin 4.5s linear reverse infinite}
  .mot-scale .beam{transform-origin:30px 18px;animation:m-tip 4.4s ease-in-out infinite}
  .mot-pipe .tube{fill:none;stroke:var(--signal);stroke-width:5;stroke-linecap:round;
    stroke-dasharray:190;stroke-dashoffset:190;animation:m-draw 4.5s ease-in-out infinite}
  .mot-pipe .pea{fill:var(--ink);animation:m-pea 4.5s ease-in-out infinite}
  .mot-stack rect{transform-origin:left center}
  .mot-stack .s3{animation:m-slide 3.6s ease-in-out infinite}
  .mot-stack .s2{animation:m-slide 3.6s ease-in-out infinite .18s}
  .mot-stack .s1{animation:m-slide 3.6s ease-in-out infinite .36s}