/* Animate strokes inside the original icon box; never move surrounding content. */
.vg-motion-icon > :is(path, line, polyline, polygon, circle, rect, g) {
  transform-box: fill-box;
  transform-origin: center;
}
@media (prefers-reduced-motion: no-preference) {
  [data-icon-motion="learn"] > path:nth-child(3) { transform-origin:right; animation:vg-page-left 620ms ease; }
  [data-icon-motion="learn"] > path:nth-child(4) { transform-origin:left; animation:vg-page-right 620ms ease; }
  [data-icon-motion="learn"] > path:nth-child(2) { animation:vg-check-mark 620ms ease; }
  [data-icon-motion="translate"] > path:nth-child(-n+4) { animation:vg-language-left 620ms ease; }
  [data-icon-motion="translate"] > path:nth-child(n+5) { animation:vg-language-right 620ms ease; }
  [data-icon-motion="keyboard"] > path { animation:vg-key-tap 380ms ease; }
  [data-icon-motion="keyboard"] > path:nth-child(3n) { animation-delay:90ms; }
  [data-icon-motion="keyboard"] > path:nth-child(3n+1) { animation-delay:180ms; }
  [data-icon-motion="practice"] > path:nth-child(2) { animation:vg-writing 620ms ease; }
  [data-icon-motion="draw"] > :is(path, line, polyline, circle, rect) { animation: vg-stroke 560ms ease both; }
  [data-icon-motion="swap"] > path:nth-child(-n+2) { animation: vg-right 600ms ease; }
  [data-icon-motion="swap"] > path:nth-child(n+3) { animation: vg-left 600ms ease; }
  [data-icon-motion="book"] > path:nth-child(2) { transform-origin: right; animation: vg-page-left 620ms ease; }
  [data-icon-motion="book"] > path:nth-child(3) { transform-origin: left; animation: vg-page-right 620ms ease; }
  [data-icon-motion="folder"] > path:last-child { transform-origin: bottom; animation: vg-folder-open 620ms ease; }
  [data-icon-motion="folder"] > :is(path, line):not(:last-child) { animation: vg-stroke 620ms ease; }
  [data-icon-motion="write"] > :is(path, line, polyline) { animation: vg-writing 620ms ease; }
  [data-icon-motion="listen"] > path { transform-origin: top; animation: vg-listening 620ms ease; }
  [data-icon-motion="listen"] > path:nth-child(2) { animation-delay: 40ms; }
  [data-icon-motion="swords"] > path:nth-child(odd) { animation: vg-blade-left 620ms ease; }
  [data-icon-motion="swords"] > path:nth-child(even) { animation: vg-blade-right 620ms ease; }
  [data-icon-motion="trash"] > path:first-child { transform-origin: left; animation: vg-lid 620ms ease; }
  [data-icon-motion="gear"] > path { animation: vg-turn 620ms ease; }
  [data-icon-motion="rotate"] > path { animation: vg-turn 620ms ease; }
  [data-icon-motion="left"] > :is(path, polyline, line) { animation: vg-left 600ms ease; }
  [data-icon-motion="right"] > :is(path, polyline, line) { animation: vg-right 600ms ease; }
  /* Font glyphs have no independently addressable strokes. */
  i.vg-motion-icon[data-icon-motion] { animation: vg-glyph 560ms ease; }
  i.vg-motion-icon:is([data-icon-motion="gear"], [data-icon-motion="rotate"]) { animation: vg-turn 620ms ease; }
}
@keyframes vg-stroke { 0%,100% { opacity:1; } 35% { opacity:.35; } }
@keyframes vg-check-mark { 0%,100% { translate:0; } 45% { translate:0 -1px; scale:1.12; } }
@keyframes vg-language-left { 0%,100% { translate:0; } 40% { translate:1px -1px; } }
@keyframes vg-language-right { 0%,100% { translate:0; } 40% { translate:-1px 1px; } }
@keyframes vg-key-tap { 0%,100% { translate:0; opacity:1; } 45% { translate:0 1px; opacity:.45; } }
@keyframes vg-right { 0%,100% { translate:0; } 40% { translate:2px 0; } }
@keyframes vg-left { 0%,100% { translate:0; } 40% { translate:-2px 0; } }
@keyframes vg-page-left { 0%,100% { transform:skewY(0); } 45% { transform:skewY(12deg) scaleX(.82); } }
@keyframes vg-page-right { 0%,100% { transform:skewY(0); } 45% { transform:skewY(-12deg) scaleX(.82); } }
@keyframes vg-folder-open { 0%,100% { transform:skewX(0); } 45% { transform:skewX(-9deg) scaleY(.84); } }
@keyframes vg-writing { 0%,100% { translate:0; rotate:0deg; } 25%,65% { translate:1px -1px; rotate:-8deg; } 45% { translate:-1px 1px; rotate:3deg; } }
@keyframes vg-listening { 0%,100% { scale:1; } 30%,65% { scale:1.08 1; } 48% { scale:.97 1; } }
@keyframes vg-blade-left { 0%,100% { rotate:0deg; } 35% { rotate:-9deg; } 60% { rotate:3deg; } }
@keyframes vg-blade-right { 0%,100% { rotate:0deg; } 35% { rotate:9deg; } 60% { rotate:-3deg; } }
@keyframes vg-lid { 0%,100% { rotate:0deg; } 45% { rotate:-22deg; } }
@keyframes vg-turn { 0%,100% { rotate:0deg; } 50% { rotate:28deg; } }
@keyframes vg-glyph { 0%,100% { rotate:0deg; } 35% { rotate:-5deg; } 65% { rotate:3deg; } }
/* Supersede the previous whole-icon enlargement on Home. */
#homeInterface .home-card:hover .home-card-icon > svg { scale:1; }
#homeInterface .home-card:hover .home-card-copy > button > svg { translate:0; }

/* Semantic feedback also covers standalone toolbar/status icons and font glyphs. */
[data-icon-motion="bell"] { --vg-icon-action:vg-ring; }
[data-icon-motion="clock"], [data-icon-motion="gear"], [data-icon-motion="rotate"] { --vg-icon-action:vg-turn; }
[data-icon-motion="up"], [data-icon-motion="home"] { --vg-icon-action:vg-rise; }
[data-icon-motion="down"], [data-icon-motion="save"], [data-icon-motion="pin"] { --vg-icon-action:vg-press; }
[data-icon-motion="left"] { --vg-icon-action:vg-left; }
[data-icon-motion="right"], [data-icon-motion="send"] { --vg-icon-action:vg-right; }
[data-icon-motion="check"], [data-icon-motion="plus"], [data-icon-motion="target"] { --vg-icon-action:vg-check-mark; }
[data-icon-motion="close"], [data-icon-motion="write"] { --vg-icon-action:vg-writing; }
[data-icon-motion="search"], [data-icon-motion="help"] { --vg-icon-action:vg-inspect; }
[data-icon-motion="chart"], [data-icon-motion="calendar"], [data-icon-motion="list"], [data-icon-motion="dots"] { --vg-icon-action:vg-key-tap; }
[data-icon-motion="sliders"], [data-icon-motion="users"], [data-icon-motion="translate"] { --vg-icon-action:vg-language-left; }
[data-icon-motion="shield"], [data-icon-motion="play"], [data-icon-motion="chat"] { --vg-icon-action:vg-settle; }
[data-icon-motion="eye"], [data-icon-motion="mute"] { --vg-icon-action:vg-blink; }
[data-icon-motion="moon"], [data-icon-motion="sparkle"] { --vg-icon-action:vg-twinkle; }
[data-icon-motion="folder"] { --vg-icon-action:vg-folder-open; }
[data-icon-motion="book"] { --vg-icon-action:vg-page-left; }
[data-icon-motion="listen"] { --vg-icon-action:vg-listening; }
[data-icon-motion="trash"] { --vg-icon-action:vg-lid; }
@media (prefers-reduced-motion: no-preference) {
  [data-icon-motion]:is([data-icon-motion="bell"], [data-icon-motion="clock"], [data-icon-motion="up"], [data-icon-motion="down"], [data-icon-motion="home"], [data-icon-motion="save"], [data-icon-motion="pin"], [data-icon-motion="check"], [data-icon-motion="plus"], [data-icon-motion="target"], [data-icon-motion="close"], [data-icon-motion="search"], [data-icon-motion="help"], [data-icon-motion="chart"], [data-icon-motion="calendar"], [data-icon-motion="list"], [data-icon-motion="dots"], [data-icon-motion="sliders"], [data-icon-motion="users"], [data-icon-motion="shield"], [data-icon-motion="play"], [data-icon-motion="chat"], [data-icon-motion="eye"], [data-icon-motion="mute"], [data-icon-motion="moon"], [data-icon-motion="sparkle"], [data-icon-motion="send"]) > :is(path, line, polyline, circle, rect, g, use) {
    animation:var(--vg-icon-action, vg-stroke) 540ms ease;
  }
  [data-icon-motion="list"] > :nth-child(2n),
  [data-icon-motion="chart"] > :nth-child(2n),
  [data-icon-motion="dots"] > :nth-child(2n) { animation-delay:70ms; }
  [data-icon-motion="sliders"] > :nth-child(2n) { animation-name:vg-language-right; }
  i.vg-motion-icon[data-icon-motion] { animation:var(--vg-icon-action, vg-glyph) 600ms ease; }
  [data-icon-motion="draw"] > use { animation:vg-stroke 560ms ease; }
}
@keyframes vg-ring { 0%,100% { rotate:0deg; } 25% { rotate:12deg; } 50% { rotate:-9deg; } 75% { rotate:4deg; } }
@keyframes vg-rise { 0%,100% { translate:0; } 45% { translate:0 -2px; } }
@keyframes vg-press { 0%,100% { translate:0; } 45% { translate:0 2px; } }
@keyframes vg-inspect { 0%,100% { translate:0; } 30% { translate:1px -1px; } 65% { translate:-1px 0; } }
@keyframes vg-settle { 0%,100% { scale:1; } 35% { scale:.92; } 65% { scale:1.04; } }
@keyframes vg-blink { 0%,100% { opacity:1; } 45% { opacity:.35; } }
@keyframes vg-twinkle { 0%,100% { rotate:0deg; opacity:1; } 45% { rotate:12deg; opacity:.55; } }