.is {

  --nav-anim-dur:       500ms;
  --nav-anim-ease:      cubic-bezier(.34, 1.32, .64, 1);
  --nav-anim-ease-draw: cubic-bezier(.25, 0, .25, 1);

  --nav-anim-ease-rot:  cubic-bezier(.22, .68, .35, 1);
  --nav-anim-move:      4px;
  --nav-anim-shrink:    .60;
  --nav-anim-peek:      1.14;
  --nav-anim-rot:       24deg;
  --nav-anim-stagger:   100ms;
}

.is { display: block; }
.is .is-a-roof, .is .is-a-head, .is .is-a-back, .is .is-a-clasp, .is .is-a-area,
.is .is-a-top, .is .is-a-lid, .is .is-a-b1, .is .is-a-b2, .is .is-a-b3, .is .is-a-band,
.is .is-a-fold, .is .is-a-gear, .is .is-a-blk, .is .is-a-seal,
.is .is-a-front, .is .is-a-yuan, .is .is-a-cog,

.is .is-a-d1, .is .is-a-d2, .is .is-a-box, .is .is-a-keys, .is .is-a-screen, .is .is-a-trend {
  transform-box: fill-box;
  transform-origin: center;
}

.is .is-i {
  transform-box: fill-box;
  transform-origin: center;
}

.is .is-a-line, .is .is-a-check, .is .is-a-trend, .is .is-a-yuan {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

@keyframes navUp    { from { transform: translateY(calc(-1 * var(--nav-anim-move))) } to { transform: none } }
@keyframes navDown  { from { transform: translateY(var(--nav-anim-move)) } to { transform: none } }
@keyframes navRight { from { transform: translateX(var(--nav-anim-move)) } to { transform: none } }
@keyframes navGrowY { from { transform: scaleY(var(--nav-anim-shrink)) } to { transform: scaleY(1) } }
@keyframes navPopUp {
  0%   { transform: scale(var(--nav-anim-shrink)) }
  62%  { transform: scale(var(--nav-anim-peek)) }
  100% { transform: scale(1) }
}
@keyframes navRotR  { from { transform: rotate(var(--nav-anim-rot)) } to { transform: rotate(0deg) } }

@keyframes navSpin  { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }
@keyframes navDraw  { from { stroke-dashoffset: 1 } to { stroke-dashoffset: 0 } }

.is-home.is-on .is-a-roof { animation: navUp var(--nav-anim-dur) var(--nav-anim-ease); }

.is-user.is-on .is-a-head { animation: navDown var(--nav-anim-dur) var(--nav-anim-ease); }

.is-users.is-on .is-a-back { animation: navPopUp var(--nav-anim-dur) var(--nav-anim-ease); }

.is-wallet.is-on .is-i { animation: navPopUp var(--nav-anim-dur) var(--nav-anim-ease); }

.is-walletYuan.is-on .is-a-yuan { animation: navPopUp var(--nav-anim-dur) var(--nav-anim-ease); }

.is-lineChart.is-on .is-a-area { transform-origin: center bottom; animation: navGrowY var(--nav-anim-dur) var(--nav-anim-ease); }
.is-lineChart.is-on .is-a-line { animation: navDraw var(--nav-anim-dur) var(--nav-anim-ease-draw); }

.is-calendarDays.is-on .is-a-d1 { animation: navUp var(--nav-anim-dur) var(--nav-anim-ease); }
.is-calendarDays.is-on .is-a-d2 { animation: navUp var(--nav-anim-dur) var(--nav-anim-ease) var(--nav-anim-stagger) backwards; }

.is-package.is-on .is-a-lid { animation: navUp var(--nav-anim-dur) var(--nav-anim-ease); }
.is-package.is-on .is-a-box { animation: navDown var(--nav-anim-dur) var(--nav-anim-ease); }

.is-barChart3.is-on .is-a-b1 { transform-origin: center bottom; animation: navGrowY var(--nav-anim-dur) var(--nav-anim-ease) backwards; }
.is-barChart3.is-on .is-a-b2 { transform-origin: center bottom; animation: navGrowY var(--nav-anim-dur) var(--nav-anim-ease) var(--nav-anim-stagger) backwards; }
.is-barChart3.is-on .is-a-b3 { transform-origin: center bottom; animation: navGrowY var(--nav-anim-dur) var(--nav-anim-ease) calc(var(--nav-anim-stagger) * 2) backwards; }

.is-shieldCheck.is-on .is-a-check { animation: navDraw var(--nav-anim-dur) var(--nav-anim-ease-draw); }

.is-receipt.is-on .is-a-band { animation: navUp var(--nav-anim-dur) var(--nav-anim-ease); }

.is-fileText.is-on .is-a-fold { transform-origin: right bottom; animation: navRotR var(--nav-anim-dur) var(--nav-anim-ease-rot); }

.is-settings.is-on .is-a-gear { animation: navSpin var(--nav-anim-dur) var(--nav-anim-ease-rot); }

.is-layoutDashboard.is-on .is-a-blk { animation: navPopUp var(--nav-anim-dur) var(--nav-anim-ease); }

.is-badgeCheck.is-on .is-a-seal { animation: navRotR var(--nav-anim-dur) var(--nav-anim-ease-rot); }
.is-badgeCheck.is-on .is-a-check { animation: navDraw var(--nav-anim-dur) var(--nav-anim-ease-draw) var(--nav-anim-stagger); }

.is-folder.is-on .is-a-front { transform-origin: left bottom; animation: navRotR var(--nav-anim-dur) var(--nav-anim-ease-rot); }

.is-circleDollarSign.is-on .is-a-yuan { animation: navPopUp var(--nav-anim-dur) var(--nav-anim-ease); }

.is-userCog.is-on .is-a-cog { animation: navRotR var(--nav-anim-dur) var(--nav-anim-ease-rot); }

.is-checkSquare.is-on .is-a-check { animation: navDraw var(--nav-anim-dur) var(--nav-anim-ease-draw); }

.is-costCalc.is-on .is-a-keys { animation: navPopUp var(--nav-anim-dur) var(--nav-anim-ease); }

.is-reportDoc.is-on .is-a-trend { animation: navDraw var(--nav-anim-dur) var(--nav-anim-ease-draw); }

.is-clock.is-on .is-a-hand {
  transform-box: view-box; transform-origin: 12px 12px;
  animation: navRotR var(--nav-anim-dur) var(--nav-anim-ease-rot);
}

.is-alertTriangle.is-on .is-i { animation: navPopUp var(--nav-anim-dur) var(--nav-anim-ease); }

.is-packageOpen.is-on .is-a-lid { animation: navUp var(--nav-anim-dur) var(--nav-anim-ease); }
.is-packageOpen.is-on .is-a-box { animation: navDown var(--nav-anim-dur) var(--nav-anim-ease); }

.is-percent.is-on .is-a-band { animation: navPopUp var(--nav-anim-dur) var(--nav-anim-ease); }
.is-percent.is-on .is-a-seal { animation: navPopUp var(--nav-anim-dur) var(--nav-anim-ease) var(--nav-anim-stagger) backwards; }

.is-upload.is-on .is-a-top { animation: navDown var(--nav-anim-dur) var(--nav-anim-ease); }
.is-upload.is-on .is-a-blk { animation: navPopUp var(--nav-anim-dur) var(--nav-anim-ease) var(--nav-anim-stagger) backwards; }

.is-scrollText.is-on .is-a-fold { animation: navRotR var(--nav-anim-dur) var(--nav-anim-ease-rot); }
.is-scrollText.is-on .is-a-front { animation: navDown var(--nav-anim-dur) var(--nav-anim-ease); }

.is-shoppingBag.is-on .is-a-band { animation: navUp var(--nav-anim-dur) var(--nav-anim-ease); }
.is-shoppingBag.is-on .is-a-front { animation: navDown var(--nav-anim-dur) var(--nav-anim-ease); }

@media (prefers-reduced-motion: reduce) {
  .is.is-on [class*="is-a-"] { animation: none !important; }
}