
.lev {
  width: calc(44px * var(--lev-s, .74));
  height: calc(54px * var(--lev-s, .74));
  cursor: pointer;
  transform-origin: 50% 100%;
}
.lev svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  transition: transform .18s ease-out;
}
.lev:hover svg { transform: translateY(-3px) scale(1.05); }
.lev .mv {
  transform-box: fill-box;
  transform-origin: center;
  --d: 0;
  animation-duration: calc(var(--t) * 1s);
  animation-delay: calc(var(--d) * 1s);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.lev .o-t  { transform-origin: center top; }
.lev .o-b  { transform-origin: center bottom; }
.lev .o-l  { transform-origin: left center; }
.lev .o-r  { transform-origin: right center; }
.lev .o-lt { transform-origin: left top; }
.lev .o-rt { transform-origin: right top; }
.lev .o-rb { transform-origin: right bottom; }

.lev .m-sp { animation-name: lev-sp; --t: 3.2; }
@keyframes lev-sp {
  from, to { transform: scaleX(1); }
  50%      { transform: scaleX(-1); }
}
.lev .m-rot { animation-name: lev-rot; --t: 9; animation-timing-function: linear; }
@keyframes lev-rot {
  to { transform: rotate(360deg); }
}
.lev .m-bob { animation-name: lev-bob; --t: 2; --a: 1.6; }
@keyframes lev-bob {
  from, to { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--a) * -1px)); }
}
.lev .m-swy { animation-name: lev-swy; --t: 2.4; --a: 5; }
.lev .m-stp { animation-name: lev-swy; --t: .9; --a: 14; }
@keyframes lev-swy {
  from, to { transform: rotate(calc(var(--a) * -1deg)); }
  50%      { transform: rotate(calc(var(--a) * 1deg)); }
}
.lev .m-wav { animation-name: lev-wav; --t: 1.5; --a: 7; }
@keyframes lev-wav {
  from, to { transform: rotate(calc(var(--a) * -1deg)) scaleX(.95); }
  35%      { transform: rotate(calc(var(--a) * .9deg)) scaleX(1.06); }
  70%      { transform: rotate(calc(var(--a) * -.3deg)) scaleX(.99); }
}
.lev .m-rip { animation-name: lev-rip; --t: 2.2; --a: 7; }
@keyframes lev-rip {
  from, to { transform: skewX(calc(var(--a) * -1deg)) scaleY(.96); }
  50%      { transform: skewX(calc(var(--a) * 1deg)) scaleY(1.05); }
}
.lev .m-flk { animation-name: lev-flk; --t: .85; }
@keyframes lev-flk {
  from, to { transform: rotate(0) scale(1, 1); opacity: 1; }
  25%      { transform: rotate(-8deg) scale(.8, 1.26); opacity: .55; }
  50%      { transform: rotate(4deg) scale(1.18, .86); opacity: 1; }
  75%      { transform: rotate(7deg) scale(.88, 1.16); opacity: .72; }
}
.lev .m-puls { animation-name: lev-puls; --t: 1.8; --a: .18; }
.lev .m-brt  { animation-name: lev-puls; --t: 3.6; --a: .05; }
@keyframes lev-puls {
  from, to { transform: scale(1); }
  50%      { transform: scale(calc(1 + var(--a))); }
}
.lev .m-beat { animation-name: lev-beat; --t: 1.5; }
@keyframes lev-beat {
  from, 45%, to { transform: scale(1); }
  12%           { transform: scale(1.2); }
  24%           { transform: scale(1.02); }
  32%           { transform: scale(1.14); }
}
.lev .m-pop { animation-name: lev-pop; --t: 1.6; }
@keyframes lev-pop {
  from, to { transform: scale(1); opacity: 1; }
  40%      { transform: scale(.72); opacity: .2; }
  55%      { transform: scale(1.08); opacity: 1; }
}
.lev .m-bli { animation-name: lev-bli; --t: 1.6; }
@keyframes lev-bli {
  from, to { opacity: 1; }
  45%      { opacity: .22; }
}
.lev .m-tap { animation-name: lev-tap; --t: 1.6; }
@keyframes lev-tap {
  from, 40%, to { transform: rotate(0); }
  12%           { transform: rotate(-11deg); }
  26%           { transform: rotate(1deg); }
}
.lev .m-opn { animation-name: lev-opn; --t: 3.4; }
@keyframes lev-opn {
  from, to { transform: scaleX(1); }
  50%      { transform: scaleX(.3); }
}
.lev .m-sld { animation-name: lev-sld; --t: 2.2; --a: .9; }
@keyframes lev-sld {
  from, to { transform: translateX(calc(var(--a) * -1px)); }
  50%      { transform: translateX(calc(var(--a) * 1px)); }
}
.lev .m-twk { animation-name: lev-twk; --t: 6; animation-timing-function: linear; }
@keyframes lev-twk {
  from { transform: rotate(0) scale(1); }
  50%  { transform: rotate(180deg) scale(1.16); }
  to   { transform: rotate(360deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .lev .mv { animation: none !important; }
  .lev svg { transition: none; }
  .lev:hover svg { transform: none; }
}
