.illustration-connector-track {
  fill: none;
  opacity: .47;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The loops act on the existing marks inside each illustration. */
@media (prefers-reduced-motion: no-preference) {
  :where(svg[data-concept]) {
    --art-loop: 5.2s;
    --art-active-fill: #d7e8ff;
    --art-active-stroke: #1769e0;
  }

  :is(svg[data-concept], .career-illustration svg) :is(
    .art-highlight, .art-confirm, .art-grow, .art-scan-row, .art-draw,
    .art-type, .art-press, .art-tip-scale, .art-align, .art-inbox-preview,
    .art-plot, .art-position-marker, .art-schema-field, .art-activate-funnel,
    .art-sort-note, .art-gather-left, .art-gather-right, .art-gather-bottom,
    .art-heat, .art-playback, .art-domain, .art-service, .art-service-hop,
    .art-activate-node, .art-chart-line, .art-agent-step, .art-bookmark,
    .art-epic-cell, .art-orient, .art-stack
  ) {
    animation-duration: var(--art-loop);
    animation-delay: var(--art-delay, 0s);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    transform-box: fill-box;
    transform-origin: center;
  }

  svg .art-highlight { animation-name: art-highlight; }
  svg .art-confirm, svg[data-concept] .scene-layer.art-confirm {
    animation-name: art-confirm;
  }
  svg .art-grow, svg[data-concept] .scene-layer.art-grow {
    animation-name: art-grow;
    transform-origin: left center;
  }
  svg .art-scan-row { animation-name: art-scan-row; }
  svg .art-draw, .validation-card-art .art-draw { animation-name: art-draw; }
  svg .art-type { animation-name: art-type; }
  svg .art-press { animation-name: art-press; }
  svg .art-tip-scale, svg[data-concept] .scene-layer.art-tip-scale {
    animation-name: art-tip-scale;
    transform-box: view-box;
    transform-origin: 219px 83px;
  }
  svg .art-align, svg[data-concept] .scene-layer.art-align { animation-name: art-align; }
  svg .art-inbox-preview, svg[data-concept] .scene-layer.art-inbox-preview { animation-name: art-inbox-preview; }
  svg .art-plot { animation-name: art-plot; }
  svg .art-position-marker {
    animation-name: art-position-marker;
    transform-box: view-box;
    transform-origin: 299px 55px;
  }
  svg .art-schema-field { animation-name: art-schema-field; }
  svg .art-activate-funnel {
    animation-name: art-activate-funnel;
    transform-box: view-box;
    transform-origin: 172px 166px;
  }
  svg .art-sort-note { animation-name: art-sort-note; }
  svg :is(.art-gather-left, .art-gather-right, .art-gather-bottom) {
    animation-name: art-gather;
  }
  svg .art-gather-left { --art-start-x: -18px; }
  svg .art-gather-right { --art-start-x: 18px; }
  svg .art-gather-bottom { --art-start-y: 14px; }
  svg .art-heat { animation-name: art-heat; }
  svg .art-playback, svg[data-concept] .scene-layer.art-playback {
    animation-name: art-playback;
    offset-path: path("M170 112C199 111 193 77 250 77S301 136 273 166");
    offset-anchor: center;
    offset-rotate: 0deg;
  }
  svg .art-domain { animation-name: art-domain; }
  svg .art-service { animation-name: art-service; }
  svg .art-service-hop { animation-name: art-service-hop; }
  svg .art-activate-node { animation-name: art-activate-node; }
  svg[data-concept] .art-chart-line { animation-name: art-chart-line; }
  svg .art-agent-step { animation-name: art-agent-step; }
  svg .art-bookmark { animation-name: art-bookmark; }
  svg .art-epic-cell {
    animation-name: art-epic-cell;
    transform-origin: center bottom;
  }

  /* The panels stay in place while their illustrated contents animate. */
  .distinct-scene[data-concept] .scene-layer:not(:is(
    .art-grow, .art-confirm, .art-tip-scale, .art-align, .art-inbox-preview, .art-playback
  )),
  .career-illustration :is(.career-prototype, .career-ready) {
    animation-name: none;
  }

  .career-illustration svg {
    --art-loop: 5.6s;
    --art-active-fill: #e4efff;
    --art-active-stroke: #76a7e8;
  }
  .career-illustration .art-orient { animation-name: art-orient; }
  .career-illustration .art-stack { animation-name: art-stack; }
  .career-illustration :is(.art-press, .art-confirm) {
    transform-box: view-box;
  }
  .career-illustration .art-press { transform-origin: 234px 278px; }
  .career-illustration .art-confirm { transform-origin: 344px 268.5px; }
  svg use.art-confirm { animation-name: art-confirm-icon; }

  [data-concept="competitive-benchmark"] { --art-loop: 5s; }
  [data-concept="customer-decision-balance"] { --art-loop: 4.4s; }
  [data-concept="connected-delivery-cycle"] {
    --art-loop: 5s;
    --art-active-fill: #d5e7ff;
  }
  [data-concept="activation-decision-funnel"] { --art-loop: 4.8s; }
  [data-concept="marketplace-request-trace"] {
    --art-loop: 6s;
    --art-active-fill: #3e4c85;
    --art-active-stroke: #a8c6ff;
  }
  [data-concept="market-validation"] {
    --art-loop: 4s;
    --art-active-fill: #bfd8ff;
    --art-active-stroke: #3976dc;
  }
  [data-concept="client-validation"],
  [data-concept="solution-validation"] { --art-loop: 4s; }

  [data-concept="detail-validation"] .art-scan-row { --art-active-fill: #dceaff; }
  [data-concept="conversion-decision"] .art-press {
    transform-box: view-box;
    transform-origin: 204px 159.5px;
  }
  [data-concept="strategic-thinking-workshop"] .art-press {
    transform-box: view-box;
    transform-origin: 164px 93px;
  }
  [data-concept="client-validation"] .art-sort-note {
    transform-box: view-box;
    transform-origin: 45px 42px;
  }
  [data-concept="client-validation"] g:nth-of-type(2) .art-sort-note {
    --art-note-angle: 7deg;
    --art-note-shift: 6px;
    transform-origin: 66px 61px;
  }
  [data-concept="usability-session-heatmap"] .art-press {
    transform-box: view-box;
    transform-origin: 273px 167px;
  }

  [data-concept="marketplace-request-trace"] .art-highlight { animation-duration: 2s; }
  [data-concept="marketplace-request-trace"] .packets circle {
    opacity: 0;
    offset-rotate: 0deg;
    animation: art-route-packet 6s var(--art-delay, 0s) linear infinite;
  }
  [data-concept="marketplace-request-trace"] .packets circle:first-child {
    offset-path: path("M250 48H299");
    animation-name: art-ingress-packet;
    animation-duration: 2s;
  }
  [data-concept="marketplace-request-trace"] .packets circle:nth-child(2) {
    offset-path: path("M426 77V96Q426 104 418 104H42Q34 104 34 112V166H68");
  }
  [data-concept="marketplace-request-trace"] .packets circle:nth-child(3) {
    --art-delay: 2s;
    offset-path: path("M426 77V96Q426 104 418 104H42Q34 104 34 112V206H68");
  }
  [data-concept="marketplace-request-trace"] .packets circle:nth-child(4) {
    --art-delay: 4s;
    offset-path: path("M426 77V96Q426 104 418 104H42Q34 104 34 112V246H68");
  }
  [data-concept="retention-comparison"] .art-chart-line.scene-route {
    animation-delay: var(--art-delay, 0s);
    animation-timing-function: ease-in-out;
  }

  [data-concept="marketplace-service-blueprint"] .art-service {
    animation-timing-function: cubic-bezier(.3, .5, .3, 1);
  }
  [data-concept="mvp-dependency-sequence"] .art-activate-node {
    animation-timing-function: ease-out;
  }

  .discovery-demo .insight-icon,
  .discovery-demo .insight-line em {
    animation: art-source-active 5s ease-in-out infinite;
  }
  .discovery-demo .insight-line:nth-child(2) :is(.insight-icon, em) { animation-delay: .8s; }
  .discovery-demo .insight-line:nth-child(3) :is(.insight-icon, em) { animation-delay: 1.6s; }
  .tdd-demo .test-tag { animation: art-source-active 3.8s ease-in-out infinite; }
  .toolkit-code .code-row i {
    animation: art-code-review 4.8s calc(var(--art-column-delay, 0s) + var(--art-row-delay, 0s)) ease-in-out infinite;
  }
  .toolkit-code .code-row:nth-child(n+9) { --art-column-delay: 1.6s; }
  .toolkit-code .code-row:nth-child(8n+2) { --art-row-delay: .2s; }
  .toolkit-code .code-row:nth-child(8n+3) { --art-row-delay: .4s; }
  .toolkit-code .code-row:nth-child(8n+4) { --art-row-delay: .6s; }
  .toolkit-code .code-row:nth-child(8n+5) { --art-row-delay: .8s; }
  .toolkit-code .code-row:nth-child(8n+6) { --art-row-delay: 1s; }
  .toolkit-code .code-row:nth-child(8n+7) { --art-row-delay: 1.2s; }
  .toolkit-code .code-row:nth-child(8n+8) { --art-row-delay: 1.4s; }
}

@keyframes art-highlight {
  0%, 28%, 100% { fill: revert-layer; stroke: revert-layer; }
  9%, 18% { fill: var(--art-active-fill); stroke: var(--art-active-stroke); }
}
@keyframes art-confirm {
  0%, 24%, 100% { transform: scale(1); }
  10% { transform: scale(1.17); }
}
@keyframes art-confirm-icon {
  0%, 31%, 100% { opacity: 1; }
  8%, 17% { opacity: .52; }
}
@keyframes art-grow {
  0% { transform: scaleX(.12); }
  24%, 89% { transform: scaleX(1); }
  100% { transform: scaleX(.12); }
}
@keyframes art-scan-row {
  0%, 100% { opacity: 0; transform: translateY(-31px); }
  9% { opacity: .34; transform: translateY(-31px); }
  24%, 53% { opacity: 1; transform: translateY(0); fill: var(--art-active-fill); }
  70% { opacity: .34; transform: translateY(30px); }
  83% { opacity: 0; transform: translateY(30px); }
}
@keyframes art-draw {
  0% { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  22%, 89% { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
  100% { stroke-dasharray: 1 1; stroke-dashoffset: -1; }
}
@keyframes art-type {
  0% { clip-path: inset(-3px 100% -3px -3px) fill-box; animation-timing-function: steps(12, end); }
  24%, 95% { clip-path: inset(-3px -3px -3px -3px) fill-box; }
  100% { clip-path: inset(-3px 100% -3px -3px) fill-box; }
}
@keyframes art-press {
  0%, 19%, 100% { transform: scale(1); }
  7%, 10% { transform: scale(.88); }
}
@keyframes art-tip-scale {
  0%, 100% { transform: rotate(0); }
  27% { transform: rotate(-12deg); }
  62% { transform: rotate(4deg); }
  82% { transform: rotate(-2deg); }
}
@keyframes art-align {
  0%, 100% { transform: translateX(-20px); opacity: .5; }
  22%, 87% { transform: translateX(0); opacity: 1; }
}
@keyframes art-inbox-preview {
  0%, 100% { transform: translateX(16px); opacity: .6; }
  20%, 90% { transform: translateX(0); opacity: 1; }
}
@keyframes art-plot {
  0% { transform: scale(.15); opacity: .3; }
  13% { transform: scale(1.35); opacity: 1; }
  23%, 91% { transform: scale(1); opacity: 1; }
  100% { transform: scale(.15); opacity: .3; }
}
@keyframes art-position-marker {
  0% { transform: translate(-28px, 26px) scale(.76); }
  27%, 88% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-28px, 26px) scale(.76); }
}
@keyframes art-schema-field {
  0%, 92%, 100% { fill: revert-layer; transform: scale(1); }
  12%, 70% { fill: #1769e0; transform: scale(1.7); }
}
@keyframes art-activate-funnel {
  0%, 42%, 100% { transform: scale(1); }
  14%, 27% { transform: scale(1.14); }
}
@keyframes art-sort-note {
  0%, 59%, 100% { transform: translateX(0) rotate(0); }
  17%, 29% { transform: translateX(var(--art-note-shift, -7px)) rotate(var(--art-note-angle, -8deg)); }
}
@keyframes art-gather {
  0%, 100% { transform: translate(var(--art-start-x, 0px), var(--art-start-y, 0px)); }
  34%, 84% { transform: translate(0, 0); }
}
@keyframes art-heat {
  0%, 36%, 100% { opacity: revert-layer; transform: scale(1); }
  8% { opacity: .3; transform: scale(.8); }
  21% { opacity: .16; transform: scale(1.27); }
}
@keyframes art-playback {
  0%, 8% { offset-distance: 0%; opacity: 1; }
  26%, 32% { offset-distance: 50%; }
  51%, 80% { offset-distance: 100%; opacity: 1; }
  92%, 100% { offset-distance: 100%; opacity: 0; }
}
@keyframes art-ingress-packet {
  0% { opacity: 0; offset-distance: 0%; }
  3% { opacity: 1; }
  19% { opacity: 1; offset-distance: 100%; }
  22%, 100% { opacity: 0; offset-distance: 100%; }
}
@keyframes art-route-packet {
  0%, 6% { opacity: 0; offset-distance: 0%; }
  7% { opacity: 1; }
  27% { opacity: 1; offset-distance: 100%; }
  29%, 100% { opacity: 0; offset-distance: 100%; }
}
@keyframes art-domain {
  0%, 16%, 100% { filter: none; }
  9%, 12% { filter: brightness(1.4) drop-shadow(0 0 4px #a8c6ff); }
}
@keyframes art-service {
  0%, 33%, 100% { filter: none; stroke-width: revert-layer; }
  9%, 22% { filter: brightness(1.4); stroke-width: 3px; }
}
@keyframes art-service-hop {
  0% { transform: translateX(-9px) scale(.8); }
  18% { transform: translateX(9px) scale(1.65); }
  29%, 100% { transform: translateX(0) scale(1); }
}
@keyframes art-activate-node {
  0%, 45%, 100% { fill: revert-layer; stroke-width: revert-layer; }
  10%, 27% { fill: #2b416b; stroke-width: 2.6px; }
}
@keyframes art-chart-line {
  0% { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  32%, 87% { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
  100% { stroke-dasharray: 1 1; stroke-dashoffset: -1; }
}
@keyframes art-agent-step {
  0%, 42%, 100% { fill: revert-layer; transform: scale(1); }
  12%, 27% { fill: #648cb3; transform: scale(1.7); }
}
@keyframes art-bookmark {
  0%, 40%, 100% { transform: translateY(0); }
  13%, 22% { transform: translateY(-10px); }
}
@keyframes art-epic-cell {
  0%, 46%, 100% { transform: scaleY(1); }
  8% { transform: scaleY(.57); }
  16%, 30% { transform: scaleY(1); filter: brightness(1.35); }
}
@keyframes art-orient {
  0%, 51%, 100% { transform: rotate(0); }
  12% { transform: rotate(-28deg); }
  28% { transform: rotate(7deg); }
}
@keyframes art-stack {
  0%, 100% { transform: translate(-12px, -12px); }
  27%, 90% { transform: translate(0, 0); }
}
@keyframes art-source-active {
  0%, 42%, 100% { color: revert-layer; background-color: revert-layer; }
  12%, 24% { color: #1769e0; background-color: #dceaff; }
}
@keyframes art-code-review {
  0%, 29%, 100% { color: revert-layer; background-color: transparent; }
  7%, 17% { color: #e5f2ff; background-color: #294565; }
}