/* Schematic motion only: these loops do not represent live sensor data. */
.mechanism-art > svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Longhand animation properties preserve the shared paused default. */
.mechanism-motion .motion-part {
  animation-duration: 6.4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  animation-play-state: paused;
}

.mechanism-motion.is-active .motion-part {
  animation-play-state: running;
}

.mechanism-motion .sensor-wave { animation-name: agrindis-sensor-wave; }
.mechanism-motion .sensor-wave-near { --wave-low: .45; --wave-high: 1; }
.mechanism-motion .sensor-wave-middle {
  --wave-low: .28;
  --wave-high: .85;
  animation-delay: .7s;
}
.mechanism-motion .sensor-wave-far {
  --wave-low: .16;
  --wave-high: .65;
  animation-delay: 1.4s;
}

@keyframes agrindis-sensor-wave {
  0%, 100% { opacity: var(--wave-low); transform: translateX(-1px); }
  44% { opacity: var(--wave-high); transform: translateX(2.5px); }
  72% { opacity: var(--wave-low); transform: translateX(3px); }
}

.mechanism-motion .gateway-packet { animation-timing-function: linear; }
.mechanism-motion .gateway-packet-top { animation-name: agrindis-packet-top; }
.mechanism-motion .gateway-packet-middle {
  animation-name: agrindis-packet-middle;
  animation-delay: -2.1s;
}
.mechanism-motion .gateway-packet-bottom {
  animation-name: agrindis-packet-bottom;
  animation-delay: -4.2s;
}

@keyframes agrindis-packet-top {
  0% { transform: translate(46px, 48px); opacity: 0; }
  12% { opacity: 1; }
  25% { transform: translate(58.9px, 51.4px); }
  50% { transform: translate(68.3px, 59px); }
  75% { transform: translate(77.2px, 66.6px); opacity: 1; }
  100% { transform: translate(89px, 70px); opacity: 0; }
}

@keyframes agrindis-packet-middle {
  0% { transform: translate(37px, 91px); opacity: 0; }
  12% { opacity: 1; }
  75% { opacity: 1; }
  100% { transform: translate(90px, 91px); opacity: 0; }
}

@keyframes agrindis-packet-bottom {
  0% { transform: translate(50px, 132px); opacity: 0; }
  12% { opacity: 1; }
  25% { transform: translate(62.3px, 128.7px); }
  50% { transform: translate(71.1px, 121.5px); }
  75% { transform: translate(79.4px, 114.3px); opacity: 1; }
  100% { transform: translate(90px, 111px); opacity: 0; }
}

.mechanism-motion .screen-trace {
  animation-name: agrindis-screen-trace;
  animation-timing-function: linear;
  stroke-dasharray: 18 100;
}

@keyframes agrindis-screen-trace {
  0% { stroke-dashoffset: 18; opacity: 0; }
  10% { opacity: 1; }
  73% { opacity: 1; }
  88%, 100% { stroke-dashoffset: -100; opacity: 0; }
}

.mechanism-motion .screen-notice { animation-name: agrindis-notice; }

@keyframes agrindis-notice {
  0%, 100% { opacity: .68; }
  45%, 68% { opacity: 1; }
}

.mechanism-motion .inspection-lens {
  animation-name: agrindis-lens;
  transform-box: view-box;
  transform-origin: 130px 88px;
}

@keyframes agrindis-lens {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-7deg); }
  64% { transform: rotate(4deg); }
}

.mechanism-motion .inspection-check {
  animation-name: agrindis-check;
  stroke-dasharray: 1;
}
.mechanism-motion .inspection-check-second { animation-delay: .85s; }

@keyframes agrindis-check {
  0%, 16% { stroke-dashoffset: 1; opacity: 0; }
  22% { opacity: 1; }
  42%, 76% { stroke-dashoffset: 0; opacity: 1; }
  92%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Visible directional flow between the four existing steps. */
.mechanism-motion .connector {
  display: block;
  width: 43px;
  height: 30px;
  right: -36px;
  top: 73px;
  pointer-events: none;
}
.mechanism-motion .connector svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mechanism-motion .flow-track,
.mechanism-motion .flow-stream,
.mechanism-motion .flow-chevron {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mechanism-motion .flow-track { stroke: #759061; stroke-width: 2; }
.mechanism-motion .flow-stream {
  stroke: #ca803e;
  stroke-width: 3;
  stroke-dasharray: 13 43;
  animation-name: agrindis-flow-stream;
  animation-duration: 1.8s;
  animation-timing-function: linear;
  animation-delay: var(--flow-delay);
}
.mechanism-motion .flow-packet {
  fill: #d99557;
  stroke: #f6f7ef;
  stroke-width: 1;
  animation-name: agrindis-flow-packet;
  animation-duration: 1.8s;
  animation-timing-function: linear;
  animation-delay: var(--flow-delay);
}
.mechanism-motion .flow-chevron {
  stroke: #ca803e;
  stroke-width: 2.8;
  animation-name: agrindis-flow-tip;
  animation-duration: 1.8s;
  animation-delay: var(--flow-delay);
}
.mechanism-motion .flow-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 28px;
  margin-left: -8px;
  border-radius: 18px;
  animation-name: agrindis-step-focus;
  animation-duration: 7.2s;
  animation-delay: var(--flow-delay);
}
@keyframes agrindis-flow-stream {
  from { stroke-dashoffset: 56; }
  to { stroke-dashoffset: 0; }
}
@keyframes agrindis-flow-packet {
  0% { transform: translateX(0); opacity: 0; }
  12% { opacity: 1; }
  78% { opacity: 1; }
  100% { transform: translateX(39px); opacity: 0; }
}
@keyframes agrindis-flow-tip {
  0%, 100% { transform: translateX(-2px); opacity: .35; }
  55%, 80% { transform: translateX(3px); opacity: 1; }
}
@keyframes agrindis-step-focus {
  0%, 23% { background-color: #dce8c9; color: #183d30; box-shadow: 0 0 0 3px #dce8c955; }
  30%, 94% { background-color: transparent; color: #71866d; box-shadow: 0 0 0 0 transparent; }
  100% { background-color: #dce8c9; color: #183d30; box-shadow: 0 0 0 3px #dce8c955; }
}
@media (min-width: 851px) and (max-width: 1100px) {
  .mechanism-motion .connector { width: 34px; right: -27px; top: 63px; }
}
@media (min-width: 601px) and (max-width: 850px) {
  .mechanism-motion .connector { top: 75px; }
  .mechanism-motion li:nth-child(2) .connector { display: none; }
}
@media (max-width: 600px) {
  .mechanism-motion li:nth-child(2) .connector { display: block; }
  .mechanism-motion li .connector {
    display: block;
    width: 38px;
    height: 26px;
    top: auto;
    right: auto;
    left: 36px;
    bottom: -25px;
    transform: rotate(90deg);
    background: #edf0e5;
    border-radius: 8px;
  }
  .mechanism-motion .flow-step { width: 30px; height: 22px; margin-left: -6px; }
}

@media (prefers-reduced-motion: reduce) {
  .mechanism-motion .motion-part { animation: none !important; }
  .mechanism-motion .motion-added { display: none; }
  .mechanism-motion .flow-stream,
  .mechanism-motion .flow-chevron { display: none; }
}