:root {
  --ico-ease: cubic-bezier(.4, 0, .2, 1);
  --ico-ease-out: cubic-bezier(.16, 1, .3, 1);
  --ico-t1: .18s;
  --ico-t2: .32s;
  --ico-t3: .5s;
}

.ico { transform-origin: center; transition: transform var(--ico-t1) var(--ico-ease); }
.ico[data-icon="menu"] path { transform-origin: center; transition: transform var(--ico-t2) var(--ico-ease), opacity var(--ico-t1) linear; }

@media (prefers-reduced-motion: no-preference) {

  a:hover .ico, button:hover .ico, summary:hover .ico, [role="button"]:hover .ico, label.btn:hover .ico,
  a:focus-visible .ico, button:focus-visible .ico, summary:focus-visible .ico, [role="button"]:focus-visible .ico {
    animation: ico-pop var(--ico-t3) var(--ico-ease-out);
  }

  a:hover .ico[data-icon="close"], button:hover .ico[data-icon="close"], [role="button"]:hover .ico[data-icon="close"],
  a:hover .ico[data-icon="x"], button:hover .ico[data-icon="x"], [role="button"]:hover .ico[data-icon="x"],
  a:focus-visible .ico[data-icon="close"], button:focus-visible .ico[data-icon="close"] {
    animation: ico-x-wiggle .5s var(--ico-ease);
  }

  button:not([aria-expanded="true"]):hover .ico[data-icon="menu"] path,
  button:not([aria-expanded="true"]):focus-visible .ico[data-icon="menu"] path {
    animation: ico-menu-line .5s var(--ico-ease);
  }
  button:not([aria-expanded="true"]):hover .ico[data-icon="menu"] path.ico-l2,
  button:not([aria-expanded="true"]):focus-visible .ico[data-icon="menu"] path.ico-l2 { animation-delay: .05s; }
  button:not([aria-expanded="true"]):hover .ico[data-icon="menu"] path.ico-l3,
  button:not([aria-expanded="true"]):focus-visible .ico[data-icon="menu"] path.ico-l3 { animation-delay: .1s; }

  a:hover .ico[data-icon="chevron-right"], button:hover .ico[data-icon="chevron-right"],
  a:focus-visible .ico[data-icon="chevron-right"], button:focus-visible .ico[data-icon="chevron-right"] {
    animation: ico-nudge-right .45s var(--ico-ease);
  }
  a:hover .ico[data-icon="chevron-left"], button:hover .ico[data-icon="chevron-left"],
  a:focus-visible .ico[data-icon="chevron-left"], button:focus-visible .ico[data-icon="chevron-left"] {
    animation: ico-nudge-left .45s var(--ico-ease);
  }
  details:not([open]) > summary:hover .ico[data-icon="chevron-down"],
  details:not([open]) > summary:focus-visible .ico[data-icon="chevron-down"],
  [aria-expanded]:not([aria-expanded="true"]):hover .ico[data-icon="chevron-down"],
  [aria-expanded]:not([aria-expanded="true"]):focus-visible .ico[data-icon="chevron-down"] {
    animation: ico-nudge-down .45s var(--ico-ease);
  }

  a:hover .ico[data-icon="arrow-right"], button:hover .ico[data-icon="arrow-right"],
  a:focus-visible .ico[data-icon="arrow-right"], button:focus-visible .ico[data-icon="arrow-right"] {
    animation: ico-nudge-right .5s var(--ico-ease);
  }
  a:hover .ico[data-icon="arrow-left"], button:hover .ico[data-icon="arrow-left"],
  a:focus-visible .ico[data-icon="arrow-left"], button:focus-visible .ico[data-icon="arrow-left"] {
    animation: ico-nudge-left .5s var(--ico-ease);
  }
  a:hover .ico[data-icon="arrow-up-right"], button:hover .ico[data-icon="arrow-up-right"],
  a:hover .ico[data-icon="external-link"], button:hover .ico[data-icon="external-link"],
  a:focus-visible .ico[data-icon="arrow-up-right"], a:focus-visible .ico[data-icon="external-link"] {
    animation: ico-nudge-diag .5s var(--ico-ease);
  }

  a:hover .ico[data-icon="search"], button:hover .ico[data-icon="search"],
  a:focus-visible .ico[data-icon="search"], button:focus-visible .ico[data-icon="search"] {
    animation: ico-wobble .55s var(--ico-ease);
  }

  a:hover .ico[data-icon="bell"], button:hover .ico[data-icon="bell"],
  a:focus-visible .ico[data-icon="bell"], button:focus-visible .ico[data-icon="bell"] {
    animation: ico-ring .6s var(--ico-ease);
  }

  a:hover .ico[data-icon="heart"], button:hover .ico[data-icon="heart"],
  a:focus-visible .ico[data-icon="heart"], button:focus-visible .ico[data-icon="heart"] {
    animation: ico-beat .6s var(--ico-ease-out);
  }

  a:hover .ico[data-icon="plus"], button:hover .ico[data-icon="plus"],
  a:focus-visible .ico[data-icon="plus"], button:focus-visible .ico[data-icon="plus"] {
    animation: ico-plus .45s var(--ico-ease);
  }

  a:hover .ico[data-icon="trash"], button:hover .ico[data-icon="trash"],
  a:focus-visible .ico[data-icon="trash"], button:focus-visible .ico[data-icon="trash"] {
    animation: ico-rock .5s var(--ico-ease);
  }

  a:hover .ico[data-icon="pencil"], button:hover .ico[data-icon="pencil"],
  a:focus-visible .ico[data-icon="pencil"], button:focus-visible .ico[data-icon="pencil"] {
    animation: ico-wiggle .45s var(--ico-ease);
  }

  a:hover .ico[data-icon="settings"], button:hover .ico[data-icon="settings"],
  a:focus-visible .ico[data-icon="settings"], button:focus-visible .ico[data-icon="settings"] {
    animation: ico-turn .5s var(--ico-ease);
  }

  a:hover .ico[data-icon="logout"], button:hover .ico[data-icon="logout"],
  a:focus-visible .ico[data-icon="logout"], button:focus-visible .ico[data-icon="logout"] {
    animation: ico-nudge-right .5s var(--ico-ease);
  }
  a:hover .ico[data-icon="login"], button:hover .ico[data-icon="login"],
  a:focus-visible .ico[data-icon="login"], button:focus-visible .ico[data-icon="login"] {
    animation: ico-nudge-left .5s var(--ico-ease);
  }
  a:hover .ico[data-icon="power"], button:hover .ico[data-icon="power"],
  a:focus-visible .ico[data-icon="power"], button:focus-visible .ico[data-icon="power"] {
    animation: ico-turn .45s var(--ico-ease);
  }

  a:hover .ico[data-icon="star"], button:hover .ico[data-icon="star"],
  a:hover .ico[data-icon="trophy"], button:hover .ico[data-icon="trophy"],
  a:focus-visible .ico[data-icon="star"], a:focus-visible .ico[data-icon="trophy"] {
    animation: ico-twinkle .5s var(--ico-ease-out);
  }

  a:hover .ico[data-icon="user"], button:hover .ico[data-icon="user"],
  a:hover .ico[data-icon="users"], button:hover .ico[data-icon="users"],
  a:hover .ico[data-icon="user-x"], button:hover .ico[data-icon="user-x"],
  a:focus-visible .ico[data-icon="user"], a:focus-visible .ico[data-icon="users"] {
    animation: ico-pop-in .4s var(--ico-ease-out);
  }

  a:hover .ico[data-icon="eye"], button:hover .ico[data-icon="eye"],
  a:focus-visible .ico[data-icon="eye"], button:focus-visible .ico[data-icon="eye"] {
    animation: ico-blink .35s var(--ico-ease);
  }

  a:hover .ico[data-icon="lock"], button:hover .ico[data-icon="lock"],
  a:focus-visible .ico[data-icon="lock"], button:focus-visible .ico[data-icon="lock"] {
    animation: ico-shake .4s var(--ico-ease);
  }

  a:hover .ico[data-icon="check"], button:hover .ico[data-icon="check"],
  a:hover .ico[data-icon="check-circle"], button:hover .ico[data-icon="check-circle"],
  a:focus-visible .ico[data-icon="check"], a:focus-visible .ico[data-icon="check-circle"] {
    animation: ico-tick .35s var(--ico-ease-out);
  }
}

button[aria-expanded="true"] .ico[data-icon="menu"] path.ico-l1 { transform: translateY(5px) rotate(45deg); }
button[aria-expanded="true"] .ico[data-icon="menu"] path.ico-l2 { opacity: 0; }
button[aria-expanded="true"] .ico[data-icon="menu"] path.ico-l3 { transform: translateY(-5px) rotate(-45deg); }

details[open] > summary .ico[data-icon="chevron-down"],
[aria-expanded="true"] .ico[data-icon="chevron-down"] {
  transform: rotate(180deg);
  transition: transform var(--ico-t2) var(--ico-ease);
}

a:active .ico, button:active .ico, summary:active .ico, [role="button"]:active .ico {
  animation: none;
  transform: scale(.9);
  transition: transform .1s var(--ico-ease);
}

@keyframes ico-pop { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.1); } }
@keyframes ico-pop-in { 0% { transform: scale(.9); } 55% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes ico-x-wiggle { 0%, 100% { transform: rotate(0) scale(1); } 30% { transform: rotate(14deg) scale(1.08); } 65% { transform: rotate(-14deg) scale(1.08); } }
@keyframes ico-menu-line { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.72); } }
@keyframes ico-nudge-right { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 65% { transform: translateX(4px); } }
@keyframes ico-nudge-left { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(2px); } 65% { transform: translateX(-4px); } }
@keyframes ico-nudge-down { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-2px); } 65% { transform: translateY(3px); } }
@keyframes ico-nudge-diag { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-1px, 1px); } 65% { transform: translate(3px, -3px); } }
@keyframes ico-wobble { 0%, 100% { transform: rotate(0) translate(0, 0); } 25% { transform: rotate(7deg) translate(1px, -1px); } 50% { transform: rotate(-7deg) translate(-1px, 1px); } 75% { transform: rotate(4deg) translate(1px, 0); } }
@keyframes ico-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(11deg); } 35% { transform: rotate(-16deg); } 55% { transform: rotate(9deg); } 72% { transform: rotate(-5deg); } 88% { transform: rotate(2deg); } }
@keyframes ico-beat { 0%, 100% { transform: scale(1); } 28% { transform: scale(1.22); } 48% { transform: scale(.94); } 72% { transform: scale(1.1); } }
@keyframes ico-plus { 0%, 100% { transform: rotate(0) scale(1); } 35% { transform: rotate(9deg) scale(1.15); } 70% { transform: rotate(-6deg) scale(.92); } }
@keyframes ico-rock { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 55% { transform: rotate(8deg); } 80% { transform: rotate(-3deg); } }
@keyframes ico-wiggle { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-8deg); } 65% { transform: rotate(8deg); } }
@keyframes ico-turn { 0%, 100% { transform: rotate(0); } 60% { transform: rotate(20deg); } }
@keyframes ico-twinkle { 0%, 100% { transform: rotate(0) scale(1); } 40% { transform: rotate(-10deg) scale(1.2); } 70% { transform: rotate(6deg) scale(1.05); } }
@keyframes ico-blink { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.15); } }
@keyframes ico-shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
@keyframes ico-tick { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.28); } }

@media (prefers-reduced-motion: reduce) {
  .ico, .ico *, button[aria-expanded="true"] .ico[data-icon="menu"] path {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}