/* Hover animations for the nav icons in js/itshover-icons.js.
   Ported from "itshover" (https://github.com/Aryan-205/itshover), Apache License 2.0.
   Triggered when the whole nav item is hovered. */
.nav__icon .ih { width: 20px; height: 20px; overflow: visible; flex: none; }
.ih path, .ih circle, .ih g { transform-box: fill-box; transform-origin: center; transition: transform .25s ease-out, opacity .25s ease-out, stroke-dashoffset .3s ease-out; }
.ih [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 0; }

/* home */
.nav__item:hover .ih-home .roof { animation: ih-roof .4s ease-out; }
.nav__item:hover .ih-home .house { animation: ih-pop .3s ease-out; }
.nav__item:hover .ih-home .door { transform-origin: center bottom; animation: ih-door .3s ease-out; }
@keyframes ih-roof { from { transform: translateY(-2px); opacity: .6 } to { transform: none; opacity: 1 } }
@keyframes ih-pop { from { transform: scale(.95) } to { transform: scale(1) } }
@keyframes ih-door { from { transform: scaleY(0) } to { transform: scaleY(1) } }
/* list */
.nav__item:hover .ih-list .l1 { transform-origin: left center; animation: ih-x .25s ease-out both; }
.nav__item:hover .ih-list .l2 { transform-origin: left center; animation: ih-x .25s .1s ease-out both; }
.nav__item:hover .ih-list .l3 { transform-origin: left center; animation: ih-x .25s .2s ease-out both; }
.nav__item:hover .ih-list .bul { animation: ih-bump .4s ease-in-out; }
@keyframes ih-x { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes ih-bump { 50% { transform: scale(1.3) } }
/* stack */
.nav__item:hover .ih-stack .layer-1 { transform: translateY(-3px) scale(1.05); }
.nav__item:hover .ih-stack .layer-2 { transform: translateY(-1px); opacity: .8; transition-delay: .05s; }
.nav__item:hover .ih-stack .layer-3 { transform: translateY(1px); opacity: .6; transition-delay: .1s; }
/* line chart */
.nav__item:hover .ih-line .ln { animation: ih-draw .6s ease-in-out; }
.nav__item:hover .ih-line .base { transform-origin: left center; animation: ih-x .4s ease-out; }
@keyframes ih-draw { from { stroke-dashoffset: 1 } to { stroke-dashoffset: 0 } }
/* history */
.nav__item:hover .ih-history .circ { transform: rotate(-45deg); stroke-dasharray: .75 1; transition-duration: .35s; }
.nav__item:hover .ih-history .hand { transform: rotate(-30deg); transition-duration: .25s; }
/* bar chart */
.nav__item:hover .ih-bar .b1 { transform-origin: center bottom; animation: ih-y .3s ease-out both; }
.nav__item:hover .ih-bar .b2 { transform-origin: center bottom; animation: ih-y .3s .1s ease-out both; }
.nav__item:hover .ih-bar .b3 { transform-origin: center bottom; animation: ih-y .3s .2s ease-out both; }
.nav__item:hover .ih-bar .base { animation: ih-stretch .4s ease-in-out; }
@keyframes ih-y { from { transform: scaleY(0) } to { transform: scaleY(1) } }
@keyframes ih-stretch { 50% { transform: scaleX(1.05) } }
/* file */
.nav__item:hover .ih-file .fold { animation: ih-draw .3s ease-out; }
.nav__item:hover .ih-file .fl { animation: ih-draw .4s ease-out; }
/* camera */
.nav__item:hover .ih-camera .lens { transform: scale(1.2); }
.nav__item:hover .ih-camera .body { transform: scale(.95); }
/* book */
.ih-book .bl { stroke-dasharray: 1; }
.nav__item:hover .ih-book .bl1 { animation: ih-bookline .3s .1s ease-in-out both; }
.nav__item:hover .ih-book .bl2 { animation: ih-bookline .3s .05s ease-in-out both; }
.nav__item:hover .ih-book .bl3 { animation: ih-bookline .3s .05s ease-in-out both; }
@keyframes ih-bookline { from { stroke-dashoffset: 1; opacity: 0 } to { stroke-dashoffset: 0; opacity: 1 } }
/* target */
.nav__item:hover .ih-target .c1 { animation: ih-ring .6s ease-in-out; }
.nav__item:hover .ih-target .c2 { animation: ih-ring .6s .1s ease-in-out; }
.nav__item:hover .ih-target .c3 { animation: ih-ring .6s .2s ease-in-out; }
@keyframes ih-ring { 50% { transform: scale(1.15); opacity: .6 } }
/* gauge */
.nav__item:hover .ih-gauge .needle { transform-box: view-box; transform-origin: 12px 14px; animation: ih-needle .8s ease-in-out; }
@keyframes ih-needle { 25% { transform: rotate(45deg) } 50% { transform: rotate(-20deg) } 75% { transform: rotate(30deg) } to { transform: rotate(0) } }
/* dollar */
.nav__item:hover .ih-usd .ln { animation: ih-draw .25s ease-out; }
.nav__item:hover .ih-usd .main { animation: ih-draw .4s ease-out; }
.nav__item:hover .ih-usd .sym { animation: ih-pop .2s ease-out; }
/* gear */
.nav__item:hover .ih-gear .rot { animation: ih-spin .9s ease-in-out; }
.nav__item:hover .ih-gear .ctr { animation: ih-bump .3s ease-out; }
@keyframes ih-spin { to { transform: rotate(360deg) } }
/* flame */
.nav__item:hover .ih-flame .fl { transform-origin: 50% 100%; animation: ih-flame .6s ease-out; }
@keyframes ih-flame { 25% { transform: translate(1px,-2px) rotate(4deg) } 50% { transform: translate(-1px,-1px) rotate(-3deg) } 75% { transform: translate(.5px,-2px) rotate(2deg) } }
/* shield */
.nav__item:hover .ih-shield .sb { animation: ih-bump .35s ease-out; }
.nav__item:hover .ih-shield .sc { animation: ih-draw .3s ease-in-out; }

@media (prefers-reduced-motion: reduce) {
  .ih path, .ih circle, .ih g { animation: none !important; transition: none !important; }
}