/* Edition 8: scoped, continuous motion for the intelligent automation demo.
   No changes to the palette, layout, or any other section. */

/* The original dash used a 77-unit pattern and a non-multiple travel distance,
   causing an obvious jump at the end of each iteration. Four exact repeats
   (77 * 4 = 308) make the periodic stroke visually seamless. */
.automation-visual .flow-lines .flow-moving{
  stroke-dasharray:7 70;
  stroke-dashoffset:0;
  animation:workflow-drift 5.2s linear infinite;
  will-change:stroke-dashoffset;
}
.automation-visual .flow-lines .flow-two{animation-delay:-1.6s}
.automation-visual .flow-lines .flow-three{animation-delay:-2.7s}
.automation-visual .flow-lines .flow-four{animation-delay:-4s}
@keyframes workflow-drift {to{stroke-dashoffset:-308}}

/* Small overlapping activity pulses replace the old hard JS class reset.
   The background stays pale, so dark labels remain consistently legible. */
.automation-visual .flow-node:not(.fn-main){
  animation:workflow-activity 12s ease-in-out infinite;
  will-change:background-color,box-shadow;
}
.automation-visual .flow-node.fn-1{animation-delay:-2.1s}
.automation-visual .flow-node.fn-2{animation-delay:-11.7s}
.automation-visual .flow-node.fn-4{animation-delay:-6.9s}
.automation-visual .flow-node.fn-5{animation-delay:-4.5s}
.automation-visual .flow-node.fn-main{
  animation:workflow-core 12s ease-in-out infinite;
  animation-delay:-9.3s;
}
@keyframes workflow-activity {
  0%,5%,33%,100% {background-color:#FFFFFF;border-color:#CAC5BF;box-shadow:0 8px 22px #322B2414}
  14%,22% {background-color:#F4E8E1;border-color:#AB6A52;box-shadow:0 8px 23px #322B241C,0 0 0 3px #B6786024}
}
@keyframes workflow-core {
  0%,5%,33%,100% {border-color:#A86A55;box-shadow:0 8px 22px #322B2414}
  14%,22% {border-color:#E0A48E;box-shadow:0 10px 28px #322B2428,0 0 0 4px #B6786030}
}
/* Pause in place: neither the lines nor the node highlights lose their phase. */
.automation-visual.workflow-paused .flow-moving,
.automation-visual.workflow-paused .flow-node,
.automation-visual.workflow-paused .core-orbit{animation-play-state:paused!important}
.automation-visual .flow-node:not(.fn-main) strong{color:#222326!important}
.automation-visual .flow-node:not(.fn-main) small{color:#65616A!important}
.automation-visual .flow-node.fn-main strong{color:#FFFFFF!important}
.automation-visual .flow-node.fn-main small{color:#E7D3CA!important}
/* Prevent unnecessary motion for users who request reduced animation. */
@media(prefers-reduced-motion:reduce){
 .automation-visual:not(.workflow-opt-in-motion) .flow-moving,
 .automation-visual:not(.workflow-opt-in-motion) .flow-node,
 .automation-visual:not(.workflow-opt-in-motion) .core-orbit{animation-play-state:paused!important}
 .automation-visual .flow-node{will-change:auto}
}