/* 0.4.69: progressive accents for the existing, fully readable diagrams. */
@media (prefers-reduced-motion: no-preference) {
    #vg-diagram-risk.vg-diagram-motion-069 .vg-diagram-item,
    #vg-diagram-family.vg-diagram-motion-069 .vg-diagram-item {
        transition: border-color 420ms ease;
    }

    #vg-diagram-risk.vg-diagram-motion-069 .vg-diagram-item::before,
    #vg-diagram-family.vg-diagram-motion-069 .vg-diagram-item::before {
        content: "";
        position: absolute;
        top: -1px;
        right: -1px;
        left: -1px;
        height: 2px;
        background: #9b8968;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 650ms cubic-bezier(.22, 1, .36, 1);
        transition-delay: var(--vg-diagram-delay-069, 0ms);
        pointer-events: none;
    }

    #vg-diagram-risk.vg-diagram-motion-069 .vg-diagram-item.is-vg-diagram-visible-069,
    #vg-diagram-family.vg-diagram-motion-069 .vg-diagram-item.is-vg-diagram-visible-069 {
        border-color: #b7ad9a;
        animation: vg-diagram-settle-069 520ms cubic-bezier(.22, 1, .36, 1) both;
        animation-delay: var(--vg-diagram-delay-069, 0ms);
    }

    #vg-diagram-risk.vg-diagram-motion-069 .vg-diagram-item.is-vg-diagram-visible-069::before,
    #vg-diagram-family.vg-diagram-motion-069 .vg-diagram-item.is-vg-diagram-visible-069::before {
        transform: scaleX(1);
    }

    #vg-diagram-family.vg-diagram-motion-069 .vg-diagram-item::after {
        transform: scaleX(0);
        transform-origin: right center;
        transition: transform 700ms cubic-bezier(.22, 1, .36, 1);
        transition-delay: var(--vg-diagram-delay-069, 0ms);
    }

    #vg-diagram-family.vg-diagram-motion-069 .vg-diagram-item:nth-child(n+4)::after {
        transform-origin: left center;
    }

    #vg-diagram-family.vg-diagram-motion-069 .vg-diagram-item.is-vg-diagram-visible-069::after {
        transform: scaleX(1);
    }

    #vg-diagram-family.vg-diagram-motion-069 .vg-diagram-core {
        transition: box-shadow 700ms ease;
    }

    #vg-diagram-family.vg-diagram-motion-069 .vg-diagram-core.is-vg-diagram-visible-069 {
        box-shadow: inset 0 2px 0 #c8b697;
    }
}

@keyframes vg-diagram-settle-069 {
    from { transform: translateY(5px); }
    to { transform: translateY(0); }
}

/* Small screens receive only the line accent, without moving the text. */
@media (max-width: 1000px) and (prefers-reduced-motion: no-preference) {
    #vg-diagram-risk.vg-diagram-motion-069 .vg-diagram-item.is-vg-diagram-visible-069,
    #vg-diagram-family.vg-diagram-motion-069 .vg-diagram-item.is-vg-diagram-visible-069 {
        animation: none;
    }
}