/* One pass follows the four original connections; labels stay still. */
.cro-cycle-track, .cro-cycle-tip, .cro-cycle-node, .cro-cycle-ribbon { opacity: 0; }
.cro-cycle-track { stroke-dasharray: .18 1; stroke-dashoffset: .18; }
.cro-cycle-node { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
    .cro-artwork-playing .cro-cycle-track {
        animation: cro-cycle-flow 1.2s cubic-bezier(.4, 0, .2, 1) both;
        animation-delay: calc(.7s + var(--step) * 1.1s);
    }
    .cro-artwork-playing .cro-cycle-tip {
        animation: cro-cycle-tip 1.2s ease both;
        animation-delay: calc(.7s + var(--step) * 1.1s);
    }
    .cro-artwork-playing .cro-cycle-node {
        animation: cro-cycle-node 1.1s ease-out both;
        animation-delay: calc(.7s + var(--step) * 1.1s);
    }
    .cro-artwork-playing .cro-cycle-ribbon {
        animation: cro-cycle-ribbon 1.2s ease both;
        animation-delay: calc(.7s + var(--step) * 1.1s);
    }
}
@keyframes cro-cycle-flow {
    0% { opacity: 0; stroke-dashoffset: .18; }
    15%, 80% { opacity: 1; }
    100% { opacity: 0; stroke-dashoffset: -1; }
}
@keyframes cro-cycle-tip { 0%, 55%, 100% { opacity: 0; } 75% { opacity: 1; } }
@keyframes cro-cycle-node { 0% { opacity: 0; scale: .9; } 35% { opacity: .85; } 100% { opacity: 0; scale: 1.14; } }
@keyframes cro-cycle-ribbon { 0%, 100% { opacity: 0; } 45% { opacity: .18; } }