/* Icon-specific motion. Paths stay complete when reduced motion is requested. */
.icon-motion { overflow: visible; }
.icon-motion .code-caret { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  svg.icon-motion { transform-box: fill-box; transform-origin: center; }
  svg.icon-motion[data-icon="search"] { animation: search-scan 3.8s ease-in-out infinite; }
  svg.icon-motion[data-icon="rocket"] { animation: rocket-flight 2.8s ease-in-out infinite; }
  svg.icon-motion[data-icon="refresh-cw"] { animation: refresh-turn 4s ease-in-out infinite; }
  svg.icon-motion[data-icon="handshake"] { animation: handshake-greet 4.5s ease-in-out infinite; }

  svg.icon-motion[data-icon="chart-no-axes-combined"] > path,
  svg.icon-motion[data-icon="trending-up"] > path { stroke-dasharray: 1; animation: graph-draw 4.8s ease-in-out infinite both; }
  svg.icon-motion[data-icon="chart-no-axes-combined"] > path:nth-child(5) { animation-delay: 0s; }
  svg.icon-motion[data-icon="chart-no-axes-combined"] > path:nth-child(6) { animation-delay: .15s; }
  svg.icon-motion[data-icon="chart-no-axes-combined"] > path:nth-child(1) { animation-delay: .3s; }
  svg.icon-motion[data-icon="chart-no-axes-combined"] > path:nth-child(2) { animation-delay: .45s; }
  svg.icon-motion[data-icon="chart-no-axes-combined"] > path:nth-child(3) { animation-delay: .6s; }
  svg.icon-motion[data-icon="chart-no-axes-combined"] > path:nth-child(4) { animation-delay: .9s; }
  svg.icon-motion[data-icon="trending-up"] > path:first-child { animation-delay: .8s; }

  svg.icon-motion[data-icon="map"] > path { transform-box: view-box; }
  svg.icon-motion[data-icon="map"] > .map-left { transform-origin: 9px 12px; animation: map-open-left 5s ease-in-out infinite; }
  svg.icon-motion[data-icon="map"] > .map-center { transform-origin: 12px 12px; animation: map-open-center 5s ease-in-out infinite; }
  svg.icon-motion[data-icon="map"] > .map-right { transform-origin: 15px 12px; animation: map-open-right 5s ease-in-out infinite; }

  svg.icon-motion[data-icon="code-2"] > path:nth-child(2) { animation: type-left 4.4s steps(1,end) infinite; }
  svg.icon-motion[data-icon="code-2"] > path:nth-child(3) { animation: type-slash 4.4s steps(1,end) infinite; }
  svg.icon-motion[data-icon="code-2"] > path:nth-child(1) { animation: type-right 4.4s steps(1,end) infinite; }
  svg.icon-motion[data-icon="code-2"] > .code-caret { animation: type-caret 850ms steps(1,end) infinite; }

  svg.icon-motion[data-icon="workflow"] > path { stroke-dasharray: 1; animation: connection-draw 3.8s ease-in-out infinite; }
  svg.icon-motion[data-icon="workflow"] > rect:last-child { animation: workflow-receive 3.8s ease-in-out infinite; }
  svg.icon-motion[data-icon="plug"] > path:nth-child(3) { animation: plug-connect 4.2s ease-in-out infinite; }
  svg.icon-motion[data-icon="shield-check"] > path:last-child,
  svg.icon-motion[data-icon="badge-check"] > path:last-child,
  svg.icon-motion[data-icon="clipboard-check"] > path:last-child { stroke-dasharray: 1; animation: check-complete 4.5s ease-in-out infinite; }
  svg.icon-motion[data-icon="messages-square"] > path { transform-box: fill-box; transform-origin: bottom left; animation: message-appear 4.5s ease-in-out infinite; }
  svg.icon-motion[data-icon="messages-square"] > path:last-child { animation-delay: .7s; transform-origin: bottom right; }
  svg.icon-motion[data-icon="eye"] > circle { animation: pupil-scan 4s ease-in-out infinite; }
  svg.icon-motion[data-icon="users-round"] > circle { transform-box: fill-box; transform-origin: center; animation: people-nod 4s ease-in-out infinite; }
  svg.icon-motion[data-icon="database"] > path { stroke-dasharray: 1; animation: database-write 4.2s ease-in-out infinite; }
  svg.icon-motion[data-icon="database"] > path:nth-child(2) { animation-delay: .4s; }
  svg.icon-motion[data-icon="database"] > path:nth-child(3) { animation-delay: .8s; }
  svg.icon-motion[data-icon="file-cog"] { animation: document-scan 4.8s ease-in-out infinite; }
  svg.icon-motion[data-icon="boxes"] > path { transform-box: fill-box; transform-origin: center; animation: boxes-arrive 4.6s ease-in-out infinite; }
  svg.icon-motion[data-icon="boxes"] > path:nth-child(2n) { animation-delay: .25s; }
  svg.icon-motion[data-icon="boxes"] > path:nth-child(3n) { animation-delay: .5s; }

  @keyframes search-scan { 0%,100% {transform: translateX(-3px);} 50% {transform: translateX(4px);} }
  @keyframes rocket-flight { 0%,100% {transform: translate(-1px,2px) rotate(-5deg);} 35% {transform: translate(4px,-5px) rotate(4deg);} 65% {transform: translate(2px,-3px) rotate(-2deg);} }
  @keyframes refresh-turn { 0%,15% {transform: rotate(0deg);} 80%,100% {transform: rotate(360deg);} }
  @keyframes handshake-greet { 0%,20%,75%,100% {transform: rotate(0deg);} 35%,60% {transform: rotate(-6deg);} 47% {transform: rotate(5deg);} }
  @keyframes graph-draw { 0%,12% {stroke-dashoffset: -1;} 58%,88% {stroke-dashoffset: 0;} 100% {stroke-dashoffset: -1;} }
  @keyframes map-open-left { 0%,12%,100% {transform: perspective(90px) rotateY(78deg);} 48%,82% {transform: perspective(90px) rotateY(0deg);} }
  @keyframes map-open-center { 0%,12%,100% {transform: scaleX(.7);} 48%,82% {transform: scaleX(1);} }
  @keyframes map-open-right { 0%,12%,100% {transform: perspective(90px) rotateY(-78deg);} 48%,82% {transform: perspective(90px) rotateY(0deg);} }
  @keyframes type-left { 0%,10%,95%,100% {opacity: 0;} 18%,94% {opacity: 1;} }
  @keyframes type-slash { 0%,28%,95%,100% {opacity: 0;} 36%,94% {opacity: 1;} }
  @keyframes type-right { 0%,46%,95%,100% {opacity: 0;} 54%,94% {opacity: 1;} }
  @keyframes type-caret { 0%,49% {opacity: .9;} 50%,100% {opacity: 0;} }
  @keyframes connection-draw { 0%,15% {stroke-dashoffset: 1;} 55%,85% {stroke-dashoffset: 0;} 100% {stroke-dashoffset: 1;} }
  @keyframes workflow-receive { 0%,35%,100% {opacity: .45;} 58%,85% {opacity: 1;} }
  @keyframes plug-connect { 0%,15%,100% {transform: translateY(2px);} 45%,80% {transform: translateY(0);} }
  @keyframes check-complete { 0%,18% {stroke-dashoffset: 1;} 50%,90% {stroke-dashoffset: 0;} 100% {stroke-dashoffset: 1;} }
  @keyframes message-appear { 0%,12%,100% {transform: scale(.85);opacity: .45;} 40%,82% {transform: scale(1);opacity: 1;} }
  @keyframes pupil-scan { 0%,100% {transform: translateX(-1.4px);} 50% {transform: translateX(1.4px);} }
  @keyframes people-nod { 0%,25%,75%,100% {transform: translateY(0);} 45%,60% {transform: translateY(1px) scaleY(.94);} }
  @keyframes database-write { 0%,12% {stroke-dashoffset: 1;} 55%,90% {stroke-dashoffset: 0;} 100% {stroke-dashoffset: 1;} }
  @keyframes document-scan { 0%,10%,100% {clip-path: inset(0 0 80% 0);} 55%,85% {clip-path: inset(0 0 0 0);} }
  @keyframes boxes-arrive { 0%,12%,100% {transform: translateY(1px);opacity: .35;} 45%,85% {transform: translateY(0);opacity: 1;} }
}