/* Animated line icons — D BADAMI
   ---------------------------------------------------------------------------
   Markup:
     <span class="li li--drive">{% include "icons/ui/line/truck.svg" %}</span>

   At rest the icon is exactly a normal Lucide icon. On hover — of the icon, or of any
   enclosing a / button / .row / .tile / .card / li / tr — it performs its own motion once
   and returns. The archetype per icon is in motion-map.json.

   Every drawable element carries pathLength="1", so a draw-on is exact whatever the real
   path length is.
   --------------------------------------------------------------------------- */

.li {
  --li-size: 20px;
  --li-stroke: 2;
  --li-dur: .62s;
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--li-size);
  block-size: var(--li-size);
  /* the icon macro sets its tone inline as --tone; dark mode lightens it */
  color: var(--tone, inherit);
}

.li > svg {
  inline-size: 100%;
  block-size: 100%;
  stroke: currentColor;
  stroke-width: var(--li-stroke);
  overflow: visible;
}

.li > svg > * {
  transform-box: fill-box;
  transform-origin: center;
}

.li--sm { --li-size: 16px; --li-stroke: 2.1 }
.li--lg { --li-size: 26px; --li-stroke: 1.8 }

/* one hover selector, reused by every archetype below */
@media (hover: hover) {

/* ---- build: draws itself, part by part ---------------------------------- */
.li--build:hover > svg > *,
:where(a,button,.row,.tile,.card,li,tr):hover .li--build > svg > * {
  stroke-dasharray: 1;
  animation: li-draw var(--li-dur) cubic-bezier(.6,.05,.3,1) both;
}
.li--build:hover > svg > :nth-child(2),
:where(a,button,.row,.tile,.card,li,tr):hover .li--build > svg > :nth-child(2) { animation-delay: .06s }
.li--build:hover > svg > :nth-child(3),
:where(a,button,.row,.tile,.card,li,tr):hover .li--build > svg > :nth-child(3) { animation-delay: .12s }
.li--build:hover > svg > :nth-child(4),
:where(a,button,.row,.tile,.card,li,tr):hover .li--build > svg > :nth-child(4) { animation-delay: .18s }
.li--build:hover > svg > :nth-child(n+5),
:where(a,button,.row,.tile,.card,li,tr):hover .li--build > svg > :nth-child(n+5) { animation-delay: .24s }
@keyframes li-draw { from { stroke-dashoffset: 1 } to { stroke-dashoffset: 0 } }

/* ---- tick: the check draws on last --------------------------------------- */
.li--tick:hover > svg > :last-child,
:where(a,button,.row,.tile,.card,li,tr):hover .li--tick > svg > :last-child {
  stroke-dasharray: 1;
  animation: li-draw .34s .1s cubic-bezier(.5,0,.3,1) both;
}

/* ---- takeoff: lifts away up-right ---------------------------------------- */
.li--takeoff:hover > svg,
:where(a,button,.row,.tile,.card,li,tr):hover .li--takeoff > svg {
  animation: li-takeoff .66s cubic-bezier(.4,0,.2,1) both;
}
@keyframes li-takeoff {
  0%   { transform: none }
  42%  { transform: translate(3px,-4px) rotate(-8deg) }
  100% { transform: none }
}

/* ---- drive / sail: travels right ----------------------------------------- */
.li--drive:hover > svg,
:where(a,button,.row,.tile,.card,li,tr):hover .li--drive > svg {
  animation: li-drive .6s cubic-bezier(.45,0,.25,1) both;
}
@keyframes li-drive {
  0% { transform: none } 40% { transform: translateX(3.5px) }
  70% { transform: translateX(-1px) } 100% { transform: none }
}
.li--sail:hover > svg,
:where(a,button,.row,.tile,.card,li,tr):hover .li--sail > svg {
  animation: li-sail .9s ease-in-out both;
}
@keyframes li-sail {
  0%,100% { transform: none }
  30% { transform: translateX(2px) rotate(4deg) }
  65% { transform: translateX(-1px) rotate(-3deg) }
}

/* ---- spin / turn --------------------------------------------------------- */
.li--spin:hover > svg,
:where(a,button,.row,.tile,.card,li,tr):hover .li--spin > svg {
  animation: li-spin .7s cubic-bezier(.5,0,.2,1) both;
}
@keyframes li-spin { to { transform: rotate(360deg) } }
.li--turn:hover > svg,
:where(a,button,.row,.tile,.card,li,tr):hover .li--turn > svg {
  animation: li-turn .6s cubic-bezier(.4,1.4,.5,1) both;
}
@keyframes li-turn { 0% { transform: none } 55% { transform: rotate(-32deg) } 100% { transform: none } }

/* ---- hunt: the glass sweeps a small arc ---------------------------------- */
.li--hunt:hover > svg,
:where(a,button,.row,.tile,.card,li,tr):hover .li--hunt > svg {
  animation: li-hunt .8s ease-in-out both;
}
@keyframes li-hunt {
  0%,100% { transform: none }
  25% { transform: translate(-2px,-1.5px) }
  60% { transform: translate(2px,1px) }
}

/* ---- lid: the lid hinges open -------------------------------------------- */
.li--lid:hover > svg > :nth-child(-n+2),
:where(a,button,.row,.tile,.card,li,tr):hover .li--lid > svg > :nth-child(-n+2) {
  animation: li-lid .58s cubic-bezier(.4,1.3,.5,1) both;
  transform-origin: right center;
}
@keyframes li-lid {
  0% { transform: none } 45% { transform: rotate(-19deg) translateY(-1px) } 100% { transform: none }
}

/* ---- open: hinges from the spine ----------------------------------------- */
.li--open:hover > svg,
:where(a,button,.row,.tile,.card,li,tr):hover .li--open > svg {
  animation: li-open .58s cubic-bezier(.4,1.2,.5,1) both;
  transform-origin: 20% 50%;
}
@keyframes li-open {
  0% { transform: none } 50% { transform: perspective(60px) rotateY(-26deg) } 100% { transform: none }
}

/* ---- climb: rises --------------------------------------------------------- */
.li--climb:hover > svg > *,
:where(a,button,.row,.tile,.card,li,tr):hover .li--climb > svg > * {
  animation: li-climb .55s cubic-bezier(.4,0,.2,1) both;
  transform-origin: center bottom;
}
.li--climb:hover > svg > :nth-child(2),
:where(a,button,.row,.tile,.card,li,tr):hover .li--climb > svg > :nth-child(2) { animation-delay: .07s }
.li--climb:hover > svg > :nth-child(n+3),
:where(a,button,.row,.tile,.card,li,tr):hover .li--climb > svg > :nth-child(n+3) { animation-delay: .14s }
@keyframes li-climb {
  0% { transform: scaleY(.55) translateY(2px); opacity: .35 }
  100% { transform: none; opacity: 1 }
}

/* ---- lift: picked up and set down ---------------------------------------- */
.li--lift:hover > svg,
:where(a,button,.row,.tile,.card,li,tr):hover .li--lift > svg {
  animation: li-lift .55s cubic-bezier(.4,1.3,.5,1) both;
}
@keyframes li-lift { 0% { transform: none } 45% { transform: translateY(-3px) } 100% { transform: none } }

/* ---- drop: falls into place ---------------------------------------------- */
.li--drop:hover > svg,
:where(a,button,.row,.tile,.card,li,tr):hover .li--drop > svg {
  animation: li-drop .6s cubic-bezier(.35,1.5,.5,1) both;
}
@keyframes li-drop {
  0% { transform: translateY(-5px); opacity: .4 } 60% { transform: translateY(1px) }
  100% { transform: none; opacity: 1 }
}

/* ---- grow / twinkle / beat ------------------------------------------------ */
.li--grow:hover > svg,
:where(a,button,.row,.tile,.card,li,tr):hover .li--grow > svg {
  animation: li-grow .5s cubic-bezier(.35,1.6,.5,1) both;
}
@keyframes li-grow { 0% { transform: none } 50% { transform: scale(1.22) } 100% { transform: none } }

.li--twinkle:hover > svg,
:where(a,button,.row,.tile,.card,li,tr):hover .li--twinkle > svg {
  animation: li-twinkle .62s cubic-bezier(.4,1.4,.5,1) both;
}
@keyframes li-twinkle {
  0% { transform: none } 45% { transform: scale(1.2) rotate(16deg) } 100% { transform: none }
}

.li--beat:hover > svg,
:where(a,button,.row,.tile,.card,li,tr):hover .li--beat > svg {
  animation: li-beat .7s ease-in-out both;
}
@keyframes li-beat {
  0%,100% { transform: none } 22% { transform: scale(1.2) }
  40% { transform: scale(.97) } 62% { transform: scale(1.12) }
}

/* ---- toss: thrown up and caught ------------------------------------------ */
.li--toss:hover > svg,
:where(a,button,.row,.tile,.card,li,tr):hover .li--toss > svg {
  animation: li-toss .68s cubic-bezier(.35,1.3,.5,1) both;
}
@keyframes li-toss {
  0% { transform: none } 40% { transform: translateY(-4px) rotate(-14deg) } 100% { transform: none }
}

/* ---- flash: lights up ----------------------------------------------------- */
.li--flash:hover > svg,
:where(a,button,.row,.tile,.card,li,tr):hover .li--flash > svg {
  animation: li-flash .55s ease-out both;
}
@keyframes li-flash {
  0% { transform: none; opacity: 1 } 18% { opacity: .25 }
  38% { transform: scale(1.16); opacity: 1 } 100% { transform: none; opacity: 1 }
}

/* ---- swing family: shout / wave / alert ----------------------------------- */
.li--shout:hover > svg,
:where(a,button,.row,.tile,.card,li,tr):hover .li--shout > svg {
  animation: li-shout .68s ease-in-out both; transform-origin: 25% 50%;
}
@keyframes li-shout {
  0%,100% { transform: none } 30% { transform: rotate(-13deg) scale(1.05) }
  62% { transform: rotate(7deg) }
}
.li--wave:hover > svg,
:where(a,button,.row,.tile,.card,li,tr):hover .li--wave > svg {
  animation: li-wave .8s ease-in-out both; transform-origin: 20% 80%;
}
@keyframes li-wave {
  0%,100% { transform: none } 28% { transform: skewX(-11deg) }
  58% { transform: skewX(7deg) } 80% { transform: skewX(-3deg) }
}
.li--alert:hover > svg,
:where(a,button,.row,.tile,.card,li,tr):hover .li--alert > svg {
  animation: li-alert .6s ease-in-out both;
}
@keyframes li-alert {
  0%,100% { transform: none } 20% { transform: translateX(-1.6px) }
  45% { transform: translateX(1.6px) } 70% { transform: translateX(-.8px) }
}

/* ---- write: the nib strokes ---------------------------------------------- */
.li--write:hover > svg > :first-child,
:where(a,button,.row,.tile,.card,li,tr):hover .li--write > svg > :first-child {
  animation: li-write .62s cubic-bezier(.4,0,.3,1) both;
}
.li--write:hover > svg > :last-child,
:where(a,button,.row,.tile,.card,li,tr):hover .li--write > svg > :last-child {
  animation: li-write .62s .04s cubic-bezier(.4,0,.3,1) both;
}
@keyframes li-write {
  0% { transform: none } 35% { transform: translate(1.6px,-1.6px) rotate(-7deg) }
  70% { transform: translate(-.8px,.8px) } 100% { transform: none }
}
.li--draw:hover > svg > *,
:where(a,button,.row,.tile,.card,li,tr):hover .li--draw > svg > * {
  stroke-dasharray: 1; animation: li-draw .6s cubic-bezier(.5,0,.3,1) both;
}
.li--dab:hover > svg > :nth-child(n+2),
:where(a,button,.row,.tile,.card,li,tr):hover .li--dab > svg > :nth-child(n+2) {
  animation: li-grow .5s cubic-bezier(.35,1.6,.5,1) both;
}
.li--dab:hover > svg > :nth-child(3),
:where(a,button,.row,.tile,.card,li,tr):hover .li--dab > svg > :nth-child(3) { animation-delay: .06s }
.li--dab:hover > svg > :nth-child(4),
:where(a,button,.row,.tile,.card,li,tr):hover .li--dab > svg > :nth-child(4) { animation-delay: .12s }
.li--dab:hover > svg > :nth-child(n+5),
:where(a,button,.row,.tile,.card,li,tr):hover .li--dab > svg > :nth-child(n+5) { animation-delay: .18s }

/* ---- scan: the beam sweeps ------------------------------------------------ */
.li--scan:hover > svg > *,
:where(a,button,.row,.tile,.card,li,tr):hover .li--scan > svg > * {
  animation: li-scan .8s ease-in-out both;
}
.li--scan:hover > svg > :nth-child(even),
:where(a,button,.row,.tile,.card,li,tr):hover .li--scan > svg > :nth-child(even) { animation-delay: .09s }
@keyframes li-scan {
  0%,100% { opacity: 1 } 30% { opacity: .2 } 60% { opacity: 1 }
}

/* ---- buzz ----------------------------------------------------------------- */
.li--buzz:hover > svg,
:where(a,button,.row,.tile,.card,li,tr):hover .li--buzz > svg {
  animation: li-buzz .5s linear both;
}
@keyframes li-buzz {
  0%,100% { transform: none } 15% { transform: rotate(-4deg) } 35% { transform: rotate(4deg) }
  55% { transform: rotate(-2.5deg) } 75% { transform: rotate(2deg) }
}

/* ---- tick-tock: the hands move -------------------------------------------- */
.li--tick-tock:hover > svg > :last-child,
:where(a,button,.row,.tile,.card,li,tr):hover .li--tick-tock > svg > :last-child {
  animation: li-tick-tock .7s cubic-bezier(.4,1.5,.5,1) both;
  transform-origin: bottom left;
}
@keyframes li-tick-tock {
  0% { transform: none } 55% { transform: rotate(38deg) } 100% { transform: none }
}

/* ---- lock: the rings close in --------------------------------------------- */
.li--lock:hover > svg > *,
:where(a,button,.row,.tile,.card,li,tr):hover .li--lock > svg > * {
  animation: li-lock .6s cubic-bezier(.35,1.4,.5,1) both;
}
.li--lock:hover > svg > :nth-child(2),
:where(a,button,.row,.tile,.card,li,tr):hover .li--lock > svg > :nth-child(2) { animation-delay: .06s }
.li--lock:hover > svg > :nth-child(n+3),
:where(a,button,.row,.tile,.card,li,tr):hover .li--lock > svg > :nth-child(n+3) { animation-delay: .12s }
@keyframes li-lock {
  0% { transform: scale(1.28); opacity: .3 } 100% { transform: none; opacity: 1 }
}

/* ---- gather: the group assembles ------------------------------------------ */
.li--gather:hover > svg > *,
:where(a,button,.row,.tile,.card,li,tr):hover .li--gather > svg > * {
  animation: li-gather .55s cubic-bezier(.35,1.4,.5,1) both;
}
.li--gather:hover > svg > :nth-child(2),
:where(a,button,.row,.tile,.card,li,tr):hover .li--gather > svg > :nth-child(2) { animation-delay: .07s }
.li--gather:hover > svg > :nth-child(n+3),
:where(a,button,.row,.tile,.card,li,tr):hover .li--gather > svg > :nth-child(n+3) { animation-delay: .14s }
@keyframes li-gather {
  0% { transform: scale(.6); opacity: 0 } 100% { transform: none; opacity: 1 }
}

/* ---- stack: the layers settle --------------------------------------------- */
.li--stack:hover > svg > *,
:where(a,button,.row,.tile,.card,li,tr):hover .li--stack > svg > * {
  animation: li-stack .5s cubic-bezier(.35,1.4,.5,1) both;
}
.li--stack:hover > svg > :nth-child(2),
:where(a,button,.row,.tile,.card,li,tr):hover .li--stack > svg > :nth-child(2) { animation-delay: .08s }
.li--stack:hover > svg > :nth-child(n+3),
:where(a,button,.row,.tile,.card,li,tr):hover .li--stack > svg > :nth-child(n+3) { animation-delay: .16s }
@keyframes li-stack {
  0% { transform: translateY(-3px); opacity: .3 } 100% { transform: none; opacity: 1 }
}

/* ---- shake: the hands meet ------------------------------------------------ */
.li--shake:hover > svg,
:where(a,button,.row,.tile,.card,li,tr):hover .li--shake > svg {
  animation: li-shake .6s ease-in-out both;
}
@keyframes li-shake {
  0%,100% { transform: none } 30% { transform: translateY(-1.6px) }
  55% { transform: translateY(1.2px) } 78% { transform: translateY(-.6px) }
}

/* ---- exit: the arrow leaves ----------------------------------------------- */
.li--exit:hover > svg > :nth-child(n+2),
:where(a,button,.row,.tile,.card,li,tr):hover .li--exit > svg > :nth-child(n+2) {
  animation: li-exit .58s cubic-bezier(.4,0,.25,1) both;
}
@keyframes li-exit {
  0% { transform: none; opacity: 1 } 45% { transform: translateX(3.5px); opacity: .25 }
  55% { transform: translateX(-3px); opacity: .25 } 100% { transform: none; opacity: 1 }
}

/* ---- link: the halves part and rejoin ------------------------------------- */
.li--link:hover > svg > :first-child,
:where(a,button,.row,.tile,.card,li,tr):hover .li--link > svg > :first-child {
  animation: li-link-a .58s cubic-bezier(.4,1.3,.5,1) both;
}
.li--link:hover > svg > :last-child,
:where(a,button,.row,.tile,.card,li,tr):hover .li--link > svg > :last-child {
  animation: li-link-b .58s cubic-bezier(.4,1.3,.5,1) both;
}
@keyframes li-link-a { 0% { transform: none } 45% { transform: translate(-2px,2px) } 100% { transform: none } }
@keyframes li-link-b { 0% { transform: none } 45% { transform: translate(2px,-2px) } 100% { transform: none } }

}  /* @media (hover: hover) */

/* --- accessibility --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .li > svg, .li > svg > * { animation: none !important }
}

/* ---- talk: one bubble, then the reply ------------------------------------- */
.li--talk:hover > svg > *,
:where(a,button,.row,.tile,.card,li,tr):hover .li--talk > svg > * {
  animation: li-talk .6s cubic-bezier(.35,1.4,.5,1) both;
}
.li--talk:hover > svg > :nth-child(2),
:where(a,button,.row,.tile,.card,li,tr):hover .li--talk > svg > :nth-child(2) { animation-delay: .16s }
@keyframes li-talk {
  0%   { transform: scale(.55) translateY(2px); opacity: 0 }
  60%  { transform: scale(1.06) }
  100% { transform: none; opacity: 1 }
}