/* Directional transport adapted from the user-owned TABCOTE technical page. */
.mechanism-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
.mechanism-heading h3{margin:0}
.release-flow-figure{position:relative;overflow:hidden;isolation:isolate;container-type:inline-size;margin:0;border-radius:12px;width:100%}
.release-flow-figure img{display:block;position:relative;z-index:0}
.mechanism-pause{flex:none;min-height:44px;padding:10px 18px;border:1px solid var(--muted);border-radius:999px;background:transparent;color:var(--forest,#102b23);font:400 14px/1.5 var(--sans);cursor:pointer}
.mechanism-pause[hidden]{display:none}
.mechanism-pause:hover{background:#102b230a}
.mechanism-pause:focus-visible{outline:2px solid #102b23;outline-offset:4px}
.cx-mechanism-flow { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.cx-flow-flight { position:absolute; inset:0; opacity:.9; transform:translate(calc(var(--flow-x) * .58),calc(var(--flow-y) * .58)); }
.cx-flow-bubble {
  position:absolute;
  left:var(--origin-x);
  top:var(--origin-y);
  transform:translate(-50%,-50%);
  width:clamp(20px,5.6cqi,36px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:radial-gradient(circle at 30% 25%,#ffffffee,var(--flow-colour) 67%);
  color:var(--flow-ink);
  box-shadow:0 3px 7px #173b3e33;
  font:700 clamp(9px,1.9cqi,12px)/1 var(--sans);
  letter-spacing:0;
}
.cx-flow-water .cx-flow-bubble { width:clamp(23px,6cqi,39px); }
.technology-mechanism.motion-ready .cx-flow-flight {
  animation:cx-coating-transport 5.6s linear infinite;
  animation-delay:var(--flow-delay);
  animation-play-state:paused;
}
.technology-mechanism.is-running .cx-flow-flight { animation-play-state:running; will-change:transform,opacity; }
@keyframes cx-coating-transport {
  0% { transform:translate(0,0); opacity:0; }
  12% { opacity:1; }
  82% { opacity:1; }
  100% { transform:translate(var(--flow-x),var(--flow-y)); opacity:0; }
}
@media(prefers-reduced-motion:reduce) {
  .technology-mechanism.motion-ready .cx-flow-flight,
  .technology-mechanism .cx-flow-flight {
    animation:none!important;
    transform:translate(calc(var(--flow-x) * .58),calc(var(--flow-y) * .58));
    opacity:.9;
    will-change:auto;
  }
}