/* ============================================================
   Kit — icon-anim.css   (static icon sizing + CSS motion)
   Icons are static SVG (Tabler is the chosen set); motion is pure
   CSS. Lottie is reserved for the big illustrations only. These
   utilities give an icon consistent sizing, an optional draw-in
   reveal, and a hover loop matched to the icon.

   Base:    .bp-ico            a sized inline icon box (svg inherits
                               currentColor, so it tints with text)
   Size:    .bp-ico--sm  18px   .bp-ico--lg  24px

   Draw-in: .bp-ico--draw      the icon strokes itself in. Give every
                               drawn <path> pathLength="1". Hidden
                               until a .bp-ico-host ancestor is hovered
                               (or force shown with .is-drawn).

   Loop:    matched to the icon's own motion; pulse is the fallback.
              .bp-ico--nudge   arrows, "go"        (shift)
              .bp-ico--spin    refresh, sync       (rotate)
              .bp-ico--bob     download, send-down (drop)
              .bp-ico--pulse   fallback / live     (scale heartbeat)
              .bp-ico--pop     one-shot scale (confirm)
            Runs while a .bp-ico-host ancestor is hovered, or forced
            with .is-anim. Starts ~.26s in, so a draw-in finishes
            first. Timing is snappy (back-ease); spin stays linear.
   Motion respects prefers-reduced-motion.
   ============================================================ */

.bp-ico {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px;
  color: inherit; flex: none;
}
.bp-ico svg { width: 100%; height: 100%; display: block; }
.bp-ico--sm { width: 18px; height: 18px; }
.bp-ico--lg { width: 24px; height: 24px; }

/* ---- draw-in ---- */
.bp-ico--draw path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .2s cubic-bezier(.4, 0, .2, 1) .03s;
}
.bp-ico--draw path:nth-of-type(2) { transition-delay: .06s; }
.bp-ico--draw path:nth-of-type(3) { transition-delay: .11s; }
.bp-ico-host:hover .bp-ico--draw path,
.bp-ico--draw.is-drawn path { stroke-dashoffset: 0; }

/* ---- hover loops (snappy; spin stays linear) ---- */
@media (prefers-reduced-motion: no-preference) {
  .bp-ico-host:hover .bp-ico--nudge, .bp-ico--nudge.is-anim { animation: bp-ico-nudge .7s cubic-bezier(.34, 1.56, .64, 1) .26s infinite; }
  .bp-ico-host:hover .bp-ico--pulse, .bp-ico--pulse.is-anim { animation: bp-ico-pulse .7s cubic-bezier(.34, 1.56, .64, 1) .26s infinite; }
  .bp-ico-host:hover .bp-ico--bob,   .bp-ico--bob.is-anim   { animation: bp-ico-bob   .7s cubic-bezier(.34, 1.56, .64, 1) .26s infinite; }
  .bp-ico-host:hover .bp-ico--spin,  .bp-ico--spin.is-anim  { animation: bp-ico-spin 1.4s linear .26s infinite; }
  .bp-ico-host:hover .bp-ico--fly,   .bp-ico--fly.is-anim   { animation: bp-ico-fly  .75s cubic-bezier(.34, 1.56, .64, 1) .26s infinite; }
  .bp-ico-host:hover .bp-ico--pop,   .bp-ico--pop.is-anim   { animation: bp-ico-pop  .45s cubic-bezier(.34, 1.56, .64, 1); }
}

@keyframes bp-ico-nudge { 0% { transform: translateX(0); } 50% { transform: translateX(3px); } 100% { transform: translateX(0); } }
@keyframes bp-ico-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.16); } 100% { transform: scale(1); } }
@keyframes bp-ico-bob   { 0% { transform: translateY(0); } 50% { transform: translateY(2.5px); } 100% { transform: translateY(0); } }
@keyframes bp-ico-spin  { to { transform: rotate(360deg); } }
/* fly: a paper-plane arc, slide + bank + a touch of lift and scale */
@keyframes bp-ico-fly   { 0% { transform: translate(0, 0) rotate(0deg) scale(1); } 50% { transform: translate(4px, -2px) rotate(24deg) scale(1.12); } 100% { transform: translate(0, 0) rotate(0deg) scale(1); } }
@keyframes bp-ico-pop   { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } }