/* ICON MOTION (Peter, 30 Sep 2026): a line icon does one tiny, well-judged thing when you mouse over the card or
   button it sits in, and nothing at rest. The car rocks over a bumpy road, steam rises from the cup, a tick draws on
   the page. Only on hover or keyboard focus, only a few pixels, never on a phone (no hover), never with reduced
   motion. Give the svg the class and, where the motion needs a part the plain icon does not have (steam, a tick),
   draw that part with its class; it is invisible at rest. Catalogued at preview/index.html#iconmotion. */

/* the car: a gentle rock, the nose lifting then the tail, round the wheels' line */
.ic--car { transform-origin: 50% 80%; }
:is(a, button, label, [role="button"]):is(:hover, :focus-visible) .ic--car { animation: icBump .9s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes icBump {
  0%, 100% { transform: rotate(0) translateY(0); }
  20% { transform: rotate(-4deg) translateY(-1px); }
  40% { transform: rotate(1.5deg) translateY(0); }
  60% { transform: rotate(-2deg) translateY(-.5px); }
  80% { transform: rotate(1deg) translateY(0); }
}

/* the cup: three wisps of steam rise and fade, one after the other */
.ic--cup .ic-steam { opacity: 0; }
:is(a, button, label, [role="button"]):is(:hover, :focus-visible) .ic--cup .ic-steam { animation: icSteam 1.6s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
:is(a, button, label, [role="button"]):is(:hover, :focus-visible) .ic--cup .ic-steam:nth-of-type(2) { animation-delay: .35s; }
:is(a, button, label, [role="button"]):is(:hover, :focus-visible) .ic--cup .ic-steam:nth-of-type(3) { animation-delay: .7s; }
@keyframes icSteam {
  0% { opacity: 0; transform: translateY(2px); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-3px); }
}

/* the page: a tick draws on it, and stays while you are on the card */
.ic--doc .ic-tick { stroke-dasharray: 12; stroke-dashoffset: 12; }
:is(a, button, label, [role="button"]):is(:hover, :focus-visible) .ic--doc .ic-tick { animation: icTick .45s cubic-bezier(0.16, 1, 0.3, 1) .05s forwards; }
@keyframes icTick { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce), (hover: none) {
  :is(a, button, label, [role="button"]) .ic--car,
  :is(a, button, label, [role="button"]) .ic--cup .ic-steam,
  :is(a, button, label, [role="button"]) .ic--doc .ic-tick { animation: none !important; }
}

/* =====================================================================================================================
   EVERY ICON (Peter, 30 Sep 2026: "Do it for all the icons... make it relevant to the icon and action. Don't just make
   them wiggle"). src/js/icon-motion.js recognises each line icon by its shape and gives the svg `icm ic--<name>`;
   parts it adds for a motion carry `icm-x` and are invisible at rest.

   HOW IT FIRES: each part carries its motion in --icm-a (static, below). ONE rule plays it: when the NEAREST host (the
   link, button, card or sidebar item the icon sits in) is hovered or keyboard-focused. The :not() is what makes it
   the nearest: an icon inside a smaller host that is NOT hovered (the paperclip button on a hovered row) stays
   still. A disabled host never plays. Every motion plays once, ends at rest (or on a pose that looks identical, a
   gear turned a tooth), and the parts are animated rather than the svg, so an icon the app itself rotates (an open
   dropdown's caret) keeps its own transform.
   ===================================================================================================================== */
:root {
  --icm-out: cubic-bezier(0.16, 1, 0.3, 1);     /* the app's entrance easing */
  --icm-io: cubic-bezier(0.45, 0, 0.55, 1);     /* a gentle there-and-back */
}
.icm > * { transform-box: view-box; transform-origin: 12px 12px; }
.icm > .icm-x { opacity: 0; }

:is(a, button, label, summary, [role="button"], [role="menuitem"], [role="tab"], .sidebar__item, .todo, .row-card, .tx-row, .tl-card, .search-field):is(:hover, :focus-visible)
  .icm > :not(:is(a, button, label, summary, [role="button"], [role="menuitem"], [role="tab"], .sidebar__item, .todo, .row-card, .tx-row, .tl-card, .search-field):not(:hover):not(:focus-visible):not(:focus-within) *):not(:is(:disabled, [aria-disabled="true"], .is-disabled) *) {
  animation: var(--icm-a, none);
}

/* ---- the shared moves (distances, angles and scales come from each icon's own custom properties) ---- */
@keyframes icmNudge {   /* go a few px in its own direction, a hair back past rest, settle */
  0%, 100% { transform: none; }
  40% { transform: translate(var(--icm-dx, 0px), var(--icm-dy, 0px)) rotate(var(--icm-r, 0deg)); }
  72% { transform: translate(calc(var(--icm-dx, 0px) * -0.15), calc(var(--icm-dy, 0px) * -0.15)) rotate(calc(var(--icm-r, 0deg) * -0.15)); }
}
@keyframes icmTurn { from { transform: rotate(0deg); } to { transform: rotate(var(--icm-r, 90deg)); } }
@keyframes icmDraw { 0% { stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; } 6% { opacity: 1; } 100% { stroke-dasharray: 1 1; stroke-dashoffset: 0; opacity: 1; } }
@keyframes icmDrawRev { 0% { stroke-dasharray: 1 1; stroke-dashoffset: -1; opacity: 0; } 6% { opacity: 1; } 100% { stroke-dasharray: 1 1; stroke-dashoffset: 0; opacity: 1; } }
@keyframes icmPop { 0%, 100% { transform: none; } 45% { transform: scale(var(--icm-sx, var(--icm-s, 1.5)), var(--icm-sy, var(--icm-s, 1.5))); } }
@keyframes icmGrow { from { transform: scale(var(--icm-sx, 1), var(--icm-sy, 1)); } to { transform: none; } }
@keyframes icmSwing {   /* a swing that dies away: bell, tag */
  0%, 100% { transform: rotate(0deg); }
  16% { transform: rotate(calc(var(--icm-r) * -1)); }
  38% { transform: rotate(calc(var(--icm-r) * .7)); }
  60% { transform: rotate(calc(var(--icm-r) * -.4)); }
  80% { transform: rotate(calc(var(--icm-r) * .15)); }
}
@keyframes icmAppear { from { opacity: 0; transform: translate(var(--icm-dx, 0px), var(--icm-dy, 0px)) scale(var(--icm-s, 1)); } to { opacity: 1; transform: none; } }
@keyframes icmBlink { 0%, 100% { transform: none; } 45% { transform: scaleY(.1); } }
@keyframes icmPulse { 0% { opacity: 0; } 22% { opacity: 1; } 48% { opacity: .25; } 74% { opacity: 1; } 100% { opacity: 1; } }
@keyframes icmFlash { 0%, 100% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(1.6); } }
@keyframes icmFade { 0%, 100% { opacity: 1; } 45% { opacity: .15; } }

/* ---- navigation: arrows and chevrons step the way they point ---- */
.ic--chevd > *   { --icm-dy: 2px;    --icm-a: icmNudge .5s var(--icm-io); }
.ic--chevr > *   { --icm-dx: 2px;    --icm-a: icmNudge .5s var(--icm-io); }
.ic--chevl > *   { --icm-dx: -2px;   --icm-a: icmNudge .5s var(--icm-io); }
.ic--arrl > *    { --icm-dx: -2.5px; --icm-a: icmNudge .55s var(--icm-io); }
.ic--arrr > *    { --icm-dx: 2.5px;  --icm-a: icmNudge .55s var(--icm-io); }
.ic--arrd > *    { --icm-dy: 2.5px;  --icm-a: icmNudge .55s var(--icm-io); }
.ic--arru > *    { --icm-dy: -2.5px; --icm-a: icmNudge .55s var(--icm-io); }
.ic--arrdc > :nth-child(n+2) { --icm-dy: 2px; --icm-a: icmNudge .55s var(--icm-io); }
/* the double chevrons: the leading one goes first, the second follows */
.ic--chevsl > *  { --icm-dx: -2px; --icm-a: icmNudge .5s var(--icm-io); }
.ic--chevsl > :nth-child(2) { --icm-a: icmNudge .5s var(--icm-io) .07s; }
.ic--chevsr > *  { --icm-dx: 2px;  --icm-a: icmNudge .5s var(--icm-io); }
.ic--chevsr > :nth-child(2) { --icm-a: icmNudge .5s var(--icm-io) .07s; }

/* ---- sidebar and sections ---- */
/* settings: the gear turns one tooth-pair (90deg, so it lands looking the same) */
.ic--gear > *    { --icm-r: 90deg; --icm-a: icmTurn .8s var(--icm-out); }
/* invoice / page: two lines of writing appear, left to right */
:is(.ic--invoice, .ic--page) > .icm-x  { --icm-a: icmDraw .35s var(--icm-out) .05s both; }
:is(.ic--invoice, .ic--page) > .icm-x2 { --icm-a: icmDraw .3s var(--icm-out) .3s both; }
/* a page that already has lines: they rewrite (these were drawn right to left, so they draw back from the end) */
.ic--pagetxt > :nth-child(n+3) { --icm-a: icmDrawRev .35s var(--icm-out) both; }
.ic--pagetxt > :nth-child(4) { --icm-a: icmDrawRev .35s var(--icm-out) .12s both; }
.ic--pagetxt > :nth-child(5) { --icm-a: icmDrawRev .3s var(--icm-out) .24s both; }
.ic--pagetxt2 > :nth-child(3) { --icm-a: icmDraw .35s var(--icm-out) both; }
.ic--pagetxt2 > :nth-child(4) { --icm-a: icmDraw .35s var(--icm-out) .12s both; }
/* bank: the columns rise under the roof, one after another */
:is(.ic--bank, .ic--bank2) > :nth-child(n+2):nth-child(-n+5),
.ic--bank3 > :nth-child(n+3):nth-child(-n+6) { transform-box: fill-box; transform-origin: 50% 100%; --icm-sy: .45; --icm-a: icmGrow .45s var(--icm-out) var(--icm-dl, 0s) both; }
:is(.ic--bank, .ic--bank2) > :nth-child(3), .ic--bank3 > :nth-child(4) { --icm-dl: .05s; }
:is(.ic--bank, .ic--bank2) > :nth-child(4), .ic--bank3 > :nth-child(5) { --icm-dl: .1s; }
:is(.ic--bank, .ic--bank2) > :nth-child(5), .ic--bank3 > :nth-child(6) { --icm-dl: .15s; }
/* tax (clipboard): a tick is written on it */
.ic--clipboard > .icm-x { --icm-a: icmDraw .45s var(--icm-out) .05s both; }
/* payroll (a person): a small nod */
.ic--user > :nth-child(2) { --icm-dy: 1.2px; --icm-a: icmNudge .55s var(--icm-io); }
/* projects (briefcase): picked up by the handle, a slight tilt, set down */
.ic--briefcase > * { transform-origin: 12px 3px; --icm-dy: -1.2px; --icm-r: -5deg; --icm-a: icmNudge .6s var(--icm-io); }

/* ---- people ---- */
/* users: the second person steps in beside the first */
.ic--users > :nth-child(n+3) { --icm-dx: -1.3px; --icm-dy: -.5px; --icm-a: icmNudge .6s var(--icm-io); }
/* add or remove a person: the + or x turns a quarter */
.ic--userplus > :nth-child(n+3) { transform-origin: 20px 11px; --icm-r: 90deg; --icm-a: icmTurn .5s var(--icm-out); }
.ic--userx > :nth-child(n+3) { transform-origin: 20.5px 10.5px; --icm-r: 90deg; --icm-a: icmTurn .5s var(--icm-out); }

/* ---- actions ---- */
.ic--plus > *                   { --icm-r: 90deg; --icm-a: icmTurn .5s var(--icm-out); }
.ic--plusc > :nth-child(n+2)    { --icm-r: 90deg; --icm-a: icmTurn .5s var(--icm-out); }
.ic--x > *                      { --icm-r: 90deg; --icm-a: icmTurn .45s var(--icm-out); }
:is(.ic--xsq, .ic--xc) > :nth-child(n+2) { --icm-r: 90deg; --icm-a: icmTurn .45s var(--icm-out); }
.ic--mute > :nth-child(n+2)     { transform-origin: 19px 12px; --icm-r: 90deg; --icm-a: icmTurn .45s var(--icm-out); }
/* search: the glass makes one small loop, as if looking round */
.ic--search > * { --icm-a: icmLoop .9s var(--icm-io); }
@keyframes icmLoop {
  0%, 100% { transform: none; }
  12% { transform: translate(-.85px, -.35px); } 25% { transform: translate(-1.2px, -1.2px); } 37% { transform: translate(-.85px, -2.05px); }
  50% { transform: translate(0, -2.4px); } 62% { transform: translate(.85px, -2.05px); } 75% { transform: translate(1.2px, -1.2px); } 88% { transform: translate(.85px, -.35px); }
}
/* filter: a drop falls through the funnel */
.ic--filter > .icm-x { --icm-a: icmDrop .9s var(--icm-io); }
@keyframes icmDrop { 0% { opacity: 0; transform: none; } 15% { opacity: 1; } 78% { opacity: 1; transform: translateY(11px); } 100% { opacity: 0; transform: translateY(12.5px); } }
/* download: the arrow drops into the tray; upload: it lifts out */
.ic--download > :nth-child(n+2) { --icm-dy: 2.5px; --icm-a: icmNudge .55s var(--icm-io); }
.ic--upload > :nth-child(n+2)   { --icm-dy: -2.5px; --icm-a: icmNudge .55s var(--icm-io); }
.ic--uploadc > :nth-child(n+2)  { --icm-dy: -2px; --icm-a: icmNudge .55s var(--icm-io); }
/* send: the plane lifts off up and right, and a fresh one glides back in */
.ic--send > * { --icm-a: icmLiftOff .8s var(--icm-io); }
@keyframes icmLiftOff { 0%, 100% { transform: none; opacity: 1; } 40% { transform: translate(3px, -3px); opacity: 0; } 41% { transform: translate(-3px, 3px); opacity: 0; } }
/* external link: the arrow leaves the box */
.ic--extlink > :nth-child(n+2) { --icm-dx: 1.5px; --icm-dy: -1.5px; --icm-a: icmNudge .55s var(--icm-io); }
/* log out: the arrow slides out of the door */
.ic--logout > :nth-child(n+2) { --icm-dx: 2.5px; --icm-a: icmNudge .6s var(--icm-io); }
/* copy: the back sheet offsets from the front */
.ic--copy > :nth-child(2) { --icm-dx: -1.5px; --icm-dy: -1.5px; --icm-a: icmNudge .55s var(--icm-io); }
.ic--copy > :nth-child(1) { --icm-dx: .5px; --icm-dy: .5px; --icm-a: icmNudge .55s var(--icm-io); }
/* trash: the lid lifts off the bin */
:is(.ic--trash, .ic--trash2) > :nth-child(1), .ic--trash2 > :nth-child(5) { transform-origin: 3px 6px; --icm-dy: -1.2px; --icm-r: -8deg; --icm-a: icmNudge .6s var(--icm-io); }
/* archive: the lid lifts */
.ic--archive > :nth-child(2) { transform-origin: 1px 8px; --icm-dy: -1.2px; --icm-r: -4deg; --icm-a: icmNudge .6s var(--icm-io); }
/* edit / pencil: the nib draws a short stroke */
:is(.ic--edit) > :nth-child(2), .ic--pencil > * { --icm-a: icmScribble .7s var(--icm-io); }
@keyframes icmScribble { 0%, 100% { transform: none; } 25% { transform: translate(-1.2px, 1.2px); } 50% { transform: translate(.4px, -.4px); } 75% { transform: translate(-.6px, .6px); } }
.ic--edit3 > :nth-child(1) { --icm-a: icmDraw .45s var(--icm-out) .1s both; }
.ic--edit3 > :nth-child(2) { --icm-a: icmScribble .7s var(--icm-io); }
/* undo: winds back a little; refresh: one full turn */
.ic--undo > * { --icm-r: -40deg; --icm-a: icmNudge .6s var(--icm-io); }
.ic--refresh > * { --icm-r: 360deg; --icm-a: icmTurn .8s var(--icm-out); }
/* repeat: the two arrows chase round */
.ic--repeat > :nth-child(-n+2) { --icm-dx: 1.5px; --icm-a: icmNudge .55s var(--icm-io); }
.ic--repeat > :nth-child(n+3)  { --icm-dx: -1.5px; --icm-a: icmNudge .55s var(--icm-io); }
/* expand / full screen: the corners press outward */
.ic--expand > :nth-child(odd), .ic--corners > :nth-child(2)  { --icm-dx: 1px; --icm-dy: -1px; --icm-a: icmNudge .5s var(--icm-io); }
.ic--expand > :nth-child(even), .ic--corners > :nth-child(3) { --icm-dx: -1px; --icm-dy: 1px; --icm-a: icmNudge .5s var(--icm-io); }
.ic--corners > :nth-child(1) { --icm-dx: -1px; --icm-dy: -1px; --icm-a: icmNudge .5s var(--icm-io); }
.ic--corners > :nth-child(4) { --icm-dx: 1px; --icm-dy: 1px; --icm-a: icmNudge .5s var(--icm-io); }
/* unlink: the two halves of the chain part */
.ic--unlink > :nth-child(1) { --icm-dx: 1px; --icm-dy: -1px; --icm-a: icmNudge .55s var(--icm-io); }
.ic--unlink > :nth-child(2) { --icm-dx: -1px; --icm-dy: 1px; --icm-a: icmNudge .55s var(--icm-io); }
/* kebab: the three dots pop one after another */
.ic--kebab > * { transform-box: fill-box; transform-origin: center; --icm-s: 1.45; --icm-a: icmPop .4s var(--icm-io); }
.ic--kebab > :nth-child(2) { --icm-a: icmPop .4s var(--icm-io) .07s; }
.ic--kebab > :nth-child(3) { --icm-a: icmPop .4s var(--icm-io) .14s; }
/* play: pressed forward */
.ic--play > * { --icm-dx: 1.2px; --icm-a: icmNudge .45s var(--icm-io); }
.ic--playc > :nth-child(2) { transform-origin: 13px 12px; --icm-a: icmPop .45s var(--icm-io); --icm-s: 1.15; }
/* the mouse pointer: a tap */
.ic--pointer > * { transform-origin: 10px 10px; --icm-a: icmTap .45s var(--icm-io); }
@keyframes icmTap { 0%, 100% { transform: none; } 40% { transform: translate(1px, 1px) scale(.9); } }
/* printer: the paper feeds out */
.ic--printer > :nth-child(3) { --icm-a: icmFeed .6s var(--icm-out); }
@keyframes icmFeed { from { transform: translateY(-3px); } to { transform: none; } }
/* power: the ring is drawn round, the switch settles */
.ic--power > :nth-child(1) { --icm-a: icmDraw .55s var(--icm-out) both; }
.ic--power > :nth-child(2) { --icm-dy: 1px; --icm-a: icmNudge .45s var(--icm-io); }
/* wrench: a quarter tightening turn */
.ic--wrench > * { --icm-r: -22deg; --icm-a: icmNudge .6s var(--icm-io); }
/* ban / excluded: the bar is drawn across */
.ic--ban > :nth-child(2) { --icm-a: icmDraw .4s var(--icm-out) both; }

/* ---- documents, time and money ---- */
/* calendar: the rings lift as a page turns, and a day is marked */
.ic--cal > :nth-child(2), .ic--cal > :nth-child(3) { --icm-dy: -1.3px; --icm-a: icmNudge .5s var(--icm-io); }
.ic--cal > :nth-child(3) { --icm-a: icmNudge .5s var(--icm-io) .06s; }
.ic--cal > .icm-x { transform-box: fill-box; transform-origin: center; --icm-s: .2; --icm-a: icmAppear .4s var(--icm-out) .15s both; }
/* a panel (box with a header): the header lifts */
.ic--box > :nth-child(2) { --icm-dy: -1px; --icm-a: icmNudge .5s var(--icm-io); }
/* clock: the hands tick round once; history: they tick backwards */
.ic--clock > :nth-child(2) { --icm-r: 360deg; --icm-a: icmTurn 1s steps(8, end); }
.ic--history > :nth-child(3) { --icm-r: -360deg; --icm-a: icmTurn 1s steps(8, end); }
/* euro: the coin spins */
.ic--euro > * { --icm-a: icmCoin .7s var(--icm-io); }
@keyframes icmCoin { 0%, 50%, 100% { transform: none; } 25%, 75% { transform: scaleX(.08); } }
/* percent: the two circles trade a little nudge along the bar */
.ic--percent > :nth-child(2) { --icm-dx: -1px; --icm-dy: -1px; --icm-a: icmNudge .5s var(--icm-io); }
.ic--percent > :nth-child(3) { --icm-dx: 1px; --icm-dy: 1px; --icm-a: icmNudge .5s var(--icm-io) .06s; }
/* card: swiped */
.ic--card > * { --icm-dx: 2.5px; --icm-a: icmNudge .5s var(--icm-io); }
/* tag: swings on its hole */
.ic--tag > * { transform-origin: 7px 7px; --icm-r: 9deg; --icm-a: icmSwing .9s var(--icm-io); }
/* paperclip: clips down onto the edge */
.ic--clip > * { --icm-a: icmClip .6s var(--icm-io); }
@keyframes icmClip { 0%, 100% { transform: none; } 40% { transform: translate(1px, -1.8px) rotate(-7deg); } 72% { transform: translate(0, .5px) rotate(1deg); } }
/* lock: the shackle lifts and drops back */
.ic--lock > :nth-child(2) { --icm-dy: -1.8px; --icm-a: icmNudge .55s var(--icm-io); }
/* mail: the flap opens and closes */
.ic--mail > :nth-child(2) { transform-origin: 12px 6px; --icm-a: icmFlap .8s var(--icm-io); }
@keyframes icmFlap { 0%, 100% { transform: none; } 40%, 62% { transform: scaleY(-.45); } }
/* inbox: a letter drops into the tray */
.ic--inbox > .icm-x { --icm-a: icmLetter .8s var(--icm-io); }
@keyframes icmLetter { 0% { opacity: 0; transform: translateY(-2px); } 20% { opacity: 1; } 80% { opacity: 1; transform: translateY(5px); } 100% { opacity: 0; transform: translateY(6px); } }
.ic--inbox > :nth-child(1) { --icm-dy: .8px; --icm-a: icmNudge .4s var(--icm-io) .5s; }
/* folder: a sheet drops in */
.ic--folder > .icm-x { --icm-dy: -3px; --icm-a: icmAppear .45s var(--icm-out) both; }
/* table / grid: the rules are ruled in */
.ic--table > :nth-child(2) { --icm-a: icmDraw .35s var(--icm-out) both; }
.ic--table > :nth-child(3) { --icm-a: icmDraw .35s var(--icm-out) .08s both; }
.ic--table > :nth-child(4) { --icm-a: icmDraw .35s var(--icm-out) .16s both; }
/* board: a card is added to the short column */
.ic--board > :nth-child(2) { transform-origin: 17.5px 3px; --icm-sx: 1; --icm-sy: 1.25; --icm-a: icmPop .55s var(--icm-io); }
/* card rows (the Cards view): they spread and settle */
.ic--rows > :nth-child(1) { --icm-dy: -.8px; --icm-a: icmNudge .45s var(--icm-io); }
.ic--rows > :nth-child(2) { --icm-dy: .8px; --icm-a: icmNudge .45s var(--icm-io); }
/* lists: the lines stagger in */
:is(.ic--list, .ic--align) > * { transform-box: fill-box; transform-origin: 0 50%; }
:is(.ic--list, .ic--align) > :nth-child(1) { --icm-sx: .4; --icm-a: icmGrow .4s var(--icm-out) both; }
:is(.ic--list, .ic--align) > :nth-child(2) { --icm-sx: .4; --icm-a: icmGrow .4s var(--icm-out) .07s both; }
:is(.ic--list, .ic--align) > :nth-child(3) { --icm-sx: .4; --icm-a: icmGrow .4s var(--icm-out) .14s both; }
.ic--align > :nth-child(4) { --icm-sx: .4; --icm-a: icmGrow .4s var(--icm-out) .21s both; }
/* bar chart: the bars grow */
.ic--bars > * { transform-box: fill-box; transform-origin: 50% 100%; --icm-sy: .3; --icm-a: icmGrow .45s var(--icm-out) both; }
.ic--bars > :nth-child(2) { --icm-a: icmGrow .45s var(--icm-out) .07s both; }
.ic--bars > :nth-child(3) { --icm-a: icmGrow .45s var(--icm-out) .14s both; }
/* trends: the line is drawn again and the arrow points on */
:is(.ic--trendup, .ic--trenddown) > :nth-child(1) { --icm-a: icmDraw .55s var(--icm-out) both; }
.ic--trendup > :nth-child(2)   { --icm-dx: .8px; --icm-dy: -.8px; --icm-a: icmNudge .45s var(--icm-io) .35s; }
.ic--trenddown > :nth-child(2) { --icm-dx: .8px; --icm-dy: .8px; --icm-a: icmNudge .45s var(--icm-io) .35s; }
/* git merge: the branch is drawn in */
.ic--merge > :nth-child(3) { --icm-a: icmDraw .5s var(--icm-out) both; }
/* ticks (only where they are an ACTION, never a confirmed state): the tick is written again */
.ic--check > *, :is(.ic--checkc, .ic--checko) > :nth-child(2), .ic--checksq > :nth-child(1) { --icm-a: icmDraw .45s var(--icm-out) both; }

/* ---- signals ---- */
/* info and alerts: the dot pops */
:is(.ic--info, .ic--alertc, .ic--alerto, .ic--alertt) > :nth-child(3) { transform-box: fill-box; transform-origin: center; --icm-s: 2.2; --icm-a: icmPop .45s var(--icm-io); }
/* bell: it rings, the clapper a beat behind */
.ic--bell > * { transform-origin: 12px 2px; --icm-r: 13deg; --icm-a: icmSwing .9s var(--icm-io); }
.ic--bell > :nth-child(2) { --icm-r: 18deg; --icm-a: icmSwing .9s var(--icm-io) .05s; }
/* flag: waves from the pole */
.ic--flag > :nth-child(1) { transform-origin: 4px 9px; --icm-a: icmWave .9s var(--icm-io); }
@keyframes icmWave { 0%, 100% { transform: none; } 25% { transform: skewY(-6deg); } 55% { transform: skewY(4deg); } 80% { transform: skewY(-1.5deg); } }
/* eye: a blink; eye off: the slash is drawn across */
.ic--eye > * { --icm-a: icmBlink .4s var(--icm-io); }
.ic--eyeoff > :nth-child(2) { --icm-a: icmDraw .4s var(--icm-out) both; }
/* video: a record dot comes on */
.ic--video > .icm-x { --icm-a: icmPulse 1s var(--icm-io) both; }
/* camera: the shutter snaps, the flash fires */
.ic--camera > :nth-child(2) { transform-box: fill-box; transform-origin: center; --icm-s: .6; --icm-a: icmPop .35s var(--icm-io); }
.ic--camera > .icm-x { transform-box: fill-box; transform-origin: center; --icm-a: icmFlash .5s var(--icm-out) .12s; }
/* screen share: the dot on the screen pulses */
.ic--screenrec > :nth-child(4) { transform-box: fill-box; transform-origin: center; --icm-s: 1.3; --icm-a: icmPop .6s var(--icm-io); }
/* monitor: lines of text come up on the screen */
.ic--monitor > .icm-x  { --icm-a: icmDraw .35s var(--icm-out) .05s both; }
.ic--monitor > .icm-x2 { --icm-a: icmDraw .3s var(--icm-out) .25s both; }
/* phone: it rings */
.ic--phone > * { --icm-a: icmRing .6s linear; }
@keyframes icmRing { 0%, 100% { transform: none; } 12% { transform: rotate(-8deg); } 25% { transform: rotate(8deg); } 38% { transform: rotate(-6deg); } 51% { transform: rotate(6deg); } 64% { transform: rotate(-3deg); } 77% { transform: rotate(3deg); } 90% { transform: none; } }
/* mic: sound arcs appear either side */
.ic--mic > .icm-x  { --icm-dx: .8px; --icm-a: icmAppear .45s var(--icm-out) both; }
.ic--mic > .icm-x2 { --icm-dx: -.8px; --icm-a: icmAppear .45s var(--icm-out) .08s both; }
/* speaker: the sound waves pulse out */
.ic--volume > :nth-child(2) { --icm-a: icmFade .55s var(--icm-io); }
.ic--volume > :nth-child(3) { --icm-a: icmFade .55s var(--icm-io) .12s; }
/* chat: someone is typing */
.ic--chat > .icm-x  { --icm-a: icmType .9s var(--icm-io) both; }
.ic--chat > .icm-x2 { --icm-a: icmType .9s var(--icm-io) .1s both; }
.ic--chat > .icm-x3 { --icm-a: icmType .9s var(--icm-io) .2s both; }
@keyframes icmType { 0% { opacity: 0; transform: none; } 20% { opacity: 1; } 40% { transform: translateY(-1.2px); } 60%, 100% { opacity: 1; transform: none; } }
.ic--chatline > :nth-child(2) { --icm-a: icmDraw .4s var(--icm-out) both; }
/* image: the sun rises over the hills */
.ic--image > :nth-child(2) { --icm-a: icmSunrise .6s var(--icm-out); }
@keyframes icmSunrise { from { opacity: .2; transform: translateY(2px); } to { opacity: 1; transform: none; } }
/* idea: the bulb lights up */
.ic--bulb > .icm-x { --icm-s: .6; --icm-a: icmAppear .45s var(--icm-out) both; }
/* palette: the paint dots pop in turn */
.ic--palette > :nth-child(-n+4) { transform-box: fill-box; transform-origin: center; --icm-s: 1.4; --icm-a: icmPop .4s var(--icm-io); }
.ic--palette > :nth-child(2) { --icm-a: icmPop .4s var(--icm-io) .06s; }
.ic--palette > :nth-child(3) { --icm-a: icmPop .4s var(--icm-io) .12s; }
.ic--palette > :nth-child(4) { --icm-a: icmPop .4s var(--icm-io) .18s; }
/* a car seen from the front: over a couple of bumps */
.ic--carfront > * { --icm-a: icmBumps .7s var(--icm-io); }
@keyframes icmBumps { 0%, 100% { transform: none; } 25% { transform: translateY(-1px); } 50% { transform: none; } 75% { transform: translateY(-.6px); } }
/* a mug: the steam drifts up */
.ic--mug > :nth-child(n+3) { --icm-dy: -1.2px; --icm-a: icmSteamUp .8s var(--icm-io); }
.ic--mug > :nth-child(4) { --icm-a: icmSteamUp .8s var(--icm-io) .12s; }
.ic--mug > :nth-child(5) { --icm-a: icmSteamUp .8s var(--icm-io) .24s; }
@keyframes icmSteamUp { 0%, 100% { opacity: 1; transform: none; } 50% { opacity: .15; transform: translateY(-1.5px); } 51% { opacity: 0; transform: translateY(1px); } }

@media (prefers-reduced-motion: reduce), (hover: none) {
  .icm > * { animation: none !important; }
}