/* 70KVN — motion language.
   "Steady but energetic": an overshoot snap, then a held pause — a confident beat.
   The whole personality lives in two curves; reuse them on buttons, loads, hovers.
   Usage:  <link rel="stylesheet" href="/motion.css">  then add a kv- class to the
   element you want to animate (wrap SVG paths in a <g class="kv-anim …">). */

:root{
  --kv-ease-snap: cubic-bezier(.34, 1.5, .5, 1);  /* overshoots, then settles */
  --kv-ease-out:  cubic-bezier(.7, 0, .2, 1);     /* fast, lands clean */
}

/* needed for transform-based animations on SVG elements */
.kv-anim{ transform-box: fill-box; transform-origin: 50% 50%; }

@keyframes kv-spin{
  0%{transform:rotate(0deg);animation-timing-function:var(--kv-ease-snap)}
  22%{transform:rotate(90deg)} 25%{transform:rotate(90deg);animation-timing-function:var(--kv-ease-snap)}
  47%{transform:rotate(180deg)} 50%{transform:rotate(180deg);animation-timing-function:var(--kv-ease-snap)}
  72%{transform:rotate(270deg)} 75%{transform:rotate(270deg);animation-timing-function:var(--kv-ease-snap)}
  97%,100%{transform:rotate(360deg)}
}
@keyframes kv-pulse{
  0%{transform:scale(1)} 9%{transform:scale(1.22);animation-timing-function:cubic-bezier(.4,0,.5,1)}
  20%{transform:scale(1)} 30%{transform:scale(1.13)} 42%{transform:scale(1)} 100%{transform:scale(1)}
}
@keyframes kv-breathe{
  0%{transform:scale(.84);animation-timing-function:var(--kv-ease-snap)}
  22%{transform:scale(1.09)} 36%{transform:scale(1.03)}
  62%{transform:scale(1.03);animation-timing-function:cubic-bezier(.5,0,.6,1)} 100%{transform:scale(.84)}
}
@keyframes kv-flip{
  0%,30%{transform:scaleX(1);animation-timing-function:var(--kv-ease-out)}
  48%{transform:scaleX(-1)} 78%{transform:scaleX(-1);animation-timing-function:var(--kv-ease-out)}
  96%,100%{transform:scaleX(1)}
}
@keyframes kv-swing{
  0%{transform:rotate(-15deg);animation-timing-function:var(--kv-ease-snap)}
  16%{transform:rotate(15deg)} 44%{transform:rotate(15deg);animation-timing-function:var(--kv-ease-snap)}
  60%{transform:rotate(-15deg)} 100%{transform:rotate(-15deg)}
}
@keyframes kv-spark{
  0%,66%,100%{transform:scale(1)}
  74%{transform:scale(1.13);animation-timing-function:cubic-bezier(.34,1.7,.6,1)}
  82%{transform:scale(.97)} 90%{transform:scale(1)}
}
@keyframes kv-glint{
  0%,100%{transform:scale(0);opacity:0}
  8%{transform:scale(1.2);opacity:1;animation-timing-function:cubic-bezier(.2,1.6,.5,1)}
  18%{transform:scale(1);opacity:1} 34%{transform:scale(1);opacity:1} 46%{transform:scale(0);opacity:0}
}

.kv-spin{animation:kv-spin 4s infinite}
.kv-pulse{animation:kv-pulse 1.7s infinite}
.kv-breathe{animation:kv-breathe 2.2s infinite}
.kv-flip{animation:kv-flip 2.6s infinite}
.kv-swing{animation:kv-swing 2.4s infinite}
.kv-spark{animation:kv-spark 2.4s infinite}
.kv-glint{animation:kv-glint 2.4s infinite}
.kv-glint-2{animation:kv-glint 2.4s infinite .55s}
.kv-glint-3{animation:kv-glint 2.4s infinite 1.15s}

@media (prefers-reduced-motion: reduce){
  .kv-spin,.kv-pulse,.kv-breathe,.kv-flip,.kv-swing,.kv-spark,.kv-glint,.kv-glint-2,.kv-glint-3{animation:none}
}