.header21_icons_svg svg { overflow: visible; } .doc-line { transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1); transform-box: fill-box; transform-origin: left center; } .header21_icons_icon[hi="5"]:hover .doc-line.l1 { transform: scaleX(0.6); } .header21_icons_icon[hi="5"]:hover .doc-line.l2 { transform: scaleX(0.75); } .header21_icons_icon[hi="5"]:hover .doc-line.l3 { transform: scaleX(1.4); } .header21_icons_icon[hi="6"]:hover .curve-path { animation: redraw6 800ms cubic-bezier(0.4, 0, 0.2, 1); } @keyframes redraw6 { 0% { stroke-dasharray: 40; stroke-dashoffset: 40; } 100% { stroke-dasharray: 40; stroke-dashoffset: 0; } } .header21_icons_icon[hi="7"]:hover .trend-arrow { animation: trendRedraw 700ms cubic-bezier(0.4, 0, 0.2, 1); } @keyframes trendRedraw { 0% { stroke-dasharray: 60; stroke-dashoffset: 60; } 100% { stroke-dasharray: 60; stroke-dashoffset: 0; } } .arrow-head { transform-box: fill-box; transform-origin: bottom left; } .header21_icons_icon[hi="7"]:hover .arrow-head { animation: arrowPop 700ms cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes arrowPop { 0%, 50% { transform: scale(0.6) translate(-3px, 3px); opacity: 0; } 70% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1) translate(0, 0); opacity: 1; } } .pie-slice { transition: transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1); transform-box: fill-box; transform-origin: center; } .header21_icons_icon[hi="8"]:hover .pie-slice { transform: translate(2px, -2px); } .pie-ring { transition: transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1); transform-box: fill-box; transform-origin: center; } .header21_icons_icon[hi="8"]:hover .pie-ring { transform: rotate(-12deg); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }