/* ==========================================================================
   Workflow diagram motion
   Loaded after motion.css. Pairs with assets/js/diagrams-motion.js.
   The diagrams render finished (workflows.css). The script sets every start
   state itself and marks the figures it has taken over with .is-armed, and
   every rule here is gated on that class, so a script that never runs or
   fails can never leave a diagram hidden. These rules only let connectors
   and rings follow the custom properties the script animates: opacity and
   transforms only, so no diagram ever changes size while it fills in.
   ========================================================================== */

/* The generic reveal in motion.js would also fade and lift the column that
   holds a diagram. The diagram brings itself in, and a lifted wrapper would
   throw off where its scroll range starts and ends. .is-drawn keeps this
   after the diagram has finished, so a finished diagram never fades again. */
.has-motion .solution-visual.rv:has(> .wf.is-armed),
.has-motion .solution-visual.rv:has(> .wf.is-drawn) {
    opacity: 1;
    transform: none;
    transition: none;
}

/* ---------- Connectors draw as --wf-p runs from 0 to 1 ---------- */
.has-motion .wf-path.is-armed .wf-path-steps::before,
.has-motion .wf-chain.is-armed.is-sequence .wf-link:not(:last-child)::after {
    transform: scaleX(var(--wf-p, 1));
    transform-origin: left center;
}

.has-motion .wf-rail.is-armed .wf-rstep::before {
    transform: scaleY(var(--wf-p, 1));
    transform-origin: center top;
}

/* Narrow columns stack the steps, so the same connectors run downwards
   (breakpoints match workflows.css). */
@container (max-width: 760px) {
    .has-motion .wf-path.is-armed .wf-path-steps::before {
        transform: scaleY(var(--wf-p, 1));
        transform-origin: center top;
    }
}

@container (max-width: 600px) {
    .has-motion .wf-chain.is-armed.is-sequence .wf-link:not(:last-child)::after {
        transform: scaleY(var(--wf-p, 1));
        transform-origin: center top;
    }
}

/* ---------- Emphasis: a ring swells out of a gate or AraSync dot ---------- */
/* --wf-ring runs 0 to 1; the ring is invisible at both ends and peaks midway. */
.has-motion .wf.is-armed .is-gate > .wf-dot::after,
.has-motion .wf.is-armed .is-as > .wf-dot::after {
    content: "";
    position: absolute;
    inset: -2px;
    border: 2px solid var(--arasync-primary);
    border-radius: 50%;
    opacity: calc(var(--wf-ring, 0) * (1 - var(--wf-ring, 0)) * 3.2);
    transform: scale(calc(1 + var(--wf-ring, 0) * 0.6));
    pointer-events: none;
}

.has-motion .wf-path.is-armed .is-gate > .wf-dot::after { border-color: var(--wf-aqua); }

/* ---------- Clock: bars grow from their left end ---------- */
.has-motion .wf-clock.is-armed .wf-bar { transform-origin: left center; }