/* Charade icons from ~/Developer/cstack-icons/icons, every set in one file (icons.css with its @imports inlined). */
/* Motion for the core set (sets/core.js). The trigger wrapper is the same in every set. */

:where(a, button, label, summary, [role="button"], .ic-play, .ic-host):is(
    :hover,
    :focus-visible
  )
  .ic,
.ic-play .ic {
  /* Places */
  &.ic-book .i-leaf {
    transform-origin: 12px 12px;
    animation: ic-book-leaf 600ms cubic-bezier(0.45, 0, 0.3, 1) both;
  }
  &.ic-book .i-leaf-2 {
    animation-delay: 150ms;
  }
  &.ic-book .i-ribbon {
    transform-origin: 16.8px 5.2px;
    animation: ic-book-ribbon 900ms ease-in-out;
  }
  &.ic-link .i-half-r {
    transform-origin: 21px 12px;
    animation: ic-link-unhook 800ms ease-in-out;
  }
  &.ic-link .i-half-l {
    animation: ic-link-recoil 800ms ease-out;
  }
  &.ic-link .i-bar {
    transform-origin: 8.5px 12px;
    animation: ic-link-bar 800ms ease-in-out;
  }
  &.ic-link .i-spark {
    transform-origin: 12px 12px;
    animation: ic-link-spark 800ms ease-out;
  }
  &.ic-lock .i-keyhole {
    transform-origin: 12px 15.6px;
    animation: ic-lock-keyhole 900ms var(--swift);
  }
  &.ic-lock .i-shackle {
    transform-origin: 8px 10.5px;
    animation: ic-lock-shackle 900ms linear;
  }
  &.ic-lock .i-body {
    animation: ic-lock-body 900ms linear;
  }
  &.ic-sliders .i-knob {
    transform-box: fill-box;
    transform-origin: center;
    animation: ic-sliders-a 720ms var(--swift);
  }
  &.ic-sliders .i-knob-2 {
    animation-name: ic-sliders-b;
    animation-delay: 80ms;
  }
  &.ic-sliders .i-knob-3 {
    animation-name: ic-sliders-c;
    animation-delay: 160ms;
  }
  &.ic-log-out .i-arrow {
    animation: ic-log-out-arrow 850ms linear;
  }
  &.ic-log-out .i-door {
    animation: ic-log-out-door 850ms linear;
  }

  /* Actions */
  &.ic-send .i-plane {
    transform-origin: 12px 12px;
    animation: ic-send-plane 950ms linear;
  }
  &.ic-send .i-trail {
    animation: ic-send-trail 950ms ease-out;
  }
  &.ic-plus .i-stem {
    transform-origin: 12px 19px;
    animation: ic-plus-stem 720ms linear;
  }
  &.ic-plus .i-bar {
    transform-origin: 12px 12px;
    animation: ic-plus-bar 720ms linear;
  }
  &.ic-x .i-blade-a {
    transform-origin: 12px 12px;
    animation: ic-x-blade-a 680ms ease-in-out;
  }
  &.ic-x .i-blade-b {
    transform-origin: 12px 12px;
    animation: ic-x-blade-b 680ms ease-in-out;
  }
  &.ic-check .i-tick {
    stroke-dasharray: 1;
    transform-origin: 12px 12px;
    animation: ic-check-tick 820ms linear;
  }
  &.ic-copy .i-front {
    transform-origin: 14.25px 14.25px;
    animation: ic-copy-front 850ms var(--spring);
  }
  &.ic-copy .i-ghost {
    animation: ic-copy-ghost 850ms var(--swift);
  }
  &.ic-copy .i-back {
    animation: ic-copy-back 850ms linear;
  }
  &.ic-chevron .i-chev {
    transform-origin: 15.5px 12px;
    animation: ic-chevron-push 700ms ease-in-out;
  }
  &.ic-chevron .i-echo {
    animation: ic-chevron-echo 700ms ease-out;
  }
  &.ic-pencil .i-tool {
    transform-origin: 5px 19px;
    animation: ic-pencil-write 1000ms ease-in-out;
  }
  &.ic-pencil .i-scribble {
    animation: ic-pencil-ink 1000ms linear;
  }
  &.ic-trash .i-lid {
    transform-origin: 4px 7px;
    animation: ic-trash-lid 900ms ease-in-out;
  }
  &.ic-trash .i-crumb {
    animation: ic-trash-crumb 900ms linear;
  }
  &.ic-trash .i-can {
    transform-origin: 12px 21px;
    animation: ic-trash-gulp 900ms linear;
  }
  &.ic-search .i-lens {
    animation: ic-search-sweep 900ms ease-in-out;
  }
  &.ic-search .i-glass {
    transform-origin: 10.5px 10.5px;
    animation: ic-search-glass 900ms linear;
  }
  &.ic-search .i-glint {
    animation: ic-search-glint 900ms ease-out;
  }

  /* Things */
  &.ic-card .i-face {
    transform-origin: 12px 18.5px;
    animation: ic-card-tap 900ms ease-in-out;
  }
  &.ic-card .i-chip {
    transform-box: fill-box;
    transform-origin: center;
    animation: ic-card-chip 900ms ease-out;
  }
  &.ic-card .i-wave {
    transform-origin: 8px 13.8px;
    animation: ic-card-wave 900ms ease-out;
  }
  &.ic-card .i-wave-2 {
    animation-delay: 70ms;
  }
  &.ic-card .i-wave-3 {
    animation-delay: 140ms;
  }
  &.ic-key .i-blade {
    transform-origin: 7.5px 16.5px;
    animation: ic-key-turn 1000ms ease-in-out;
  }
  &.ic-pin .i-drop {
    transform-origin: 12px 20px;
    animation: ic-pin-drop 900ms linear;
  }
  &.ic-pin .i-shadow {
    transform-origin: 12px 21.8px;
    animation: ic-pin-shadow 900ms linear;
  }
  &.ic-phone .i-handset {
    transform-origin: 12px 12px;
    animation: ic-phone-ring 900ms linear;
  }
  &.ic-phone .i-wave {
    transform-origin: 13px 11px;
    animation: ic-phone-wave 900ms ease-out;
  }
  &.ic-phone .i-wave-2 {
    animation-delay: 70ms;
  }
  &.ic-tag .i-tab {
    transform-origin: 8px 8px;
    animation: ic-tag-swing 1000ms ease-in-out;
  }
  &.ic-tag .i-string {
    animation: ic-tag-string 1000ms linear;
  }
  &.ic-shield .i-dart {
    animation: ic-shield-dart 900ms linear;
  }
  &.ic-shield .i-guard {
    transform-origin: 12px 21px;
    animation: ic-shield-brace 900ms ease-out;
  }
  &.ic-shield .i-tick {
    transform-origin: 12px 12.2px;
    animation: ic-shield-tick 900ms linear;
  }
  &.ic-eye .i-look {
    transform-origin: 12px 12px;
    animation: ic-eye-look 1000ms ease-in-out;
  }
  &.ic-eye .i-upper {
    transform-origin: 12px 12px;
    animation: ic-eye-upper 1000ms ease-in-out;
  }
  &.ic-eye .i-lower {
    transform-origin: 12px 12px;
    animation: ic-eye-lower 1000ms ease-in-out;
  }
  &.ic-eye .i-pupil {
    transform-box: fill-box;
    transform-origin: center;
    animation: ic-eye-pupil 1000ms ease-out;
  }
  &.ic-hand .i-palm {
    transform-origin: 12px 21px;
    animation: ic-hand-wave 900ms ease-in-out;
  }
  &.ic-hand .i-finger {
    animation: ic-hand-finger 900ms ease-in-out;
  }
  &.ic-hand .i-f-2 {
    animation-delay: 60ms;
  }
  &.ic-hand .i-f-3 {
    animation-delay: 120ms;
  }
  &.ic-mobile .i-island {
    transform-box: fill-box;
    transform-origin: center;
    animation: ic-mobile-island 1000ms var(--swift);
  }
  &.ic-mobile .i-buzz {
    transform-origin: 12px 12px;
    animation: ic-mobile-buzz 1000ms linear;
  }
  &.ic-fingerprint .i-scan {
    animation: ic-fingerprint-scan 1000ms ease-in-out;
  }
  &.ic-fingerprint .i-ridge-1 {
    animation: ic-fingerprint-ridge-1 1000ms linear;
  }
  &.ic-fingerprint .i-ridge-2 {
    animation: ic-fingerprint-ridge-2 1000ms linear;
  }
  &.ic-fingerprint .i-ridge-3 {
    animation: ic-fingerprint-ridge-3 1000ms linear;
  }
  &.ic-fingerprint .i-ridge-4 {
    animation: ic-fingerprint-ridge-4 1000ms linear;
  }
  &.ic-chat .i-bubble {
    transform-origin: 4.8px 19.8px;
    animation: ic-chat-bubble 1000ms ease-in-out;
  }
  &.ic-chat .i-dot {
    animation: ic-chat-dot 1000ms ease-in-out;
  }
  &.ic-chat .i-dot-2 {
    animation-delay: 90ms;
  }
  &.ic-chat .i-dot-3 {
    animation-delay: 180ms;
  }
  &.ic-mic .i-capsule {
    transform-origin: 12px 14px;
    animation: ic-mic-capsule 900ms ease-in-out;
  }
  &.ic-mic .i-level-1 {
    animation: ic-mic-level-1 900ms linear;
  }
  &.ic-mic .i-level-2 {
    animation: ic-mic-level-2 900ms linear;
  }
  &.ic-mic .i-level-3 {
    animation: ic-mic-level-3 900ms linear;
  }
  &.ic-mic .i-voice-l {
    animation: ic-mic-voice-l 900ms ease-out;
  }
  &.ic-mic .i-voice-r {
    animation: ic-mic-voice-r 900ms ease-out;
  }
  &.ic-people .i-behind {
    transform-origin: 17px 20px;
    animation: ic-people-peek 900ms ease-in-out;
  }
  &.ic-people .i-head {
    animation: ic-people-turn 900ms ease-in-out;
  }
  &.ic-clock .i-minute {
    transform-origin: 12px 12px;
    animation: ic-clock-minute 1000ms linear;
  }
  &.ic-clock .i-hour {
    transform-origin: 12px 12px;
    animation: ic-clock-hour 1000ms linear;
  }
  &.ic-moon .i-crescent {
    transform-origin: 12px 20px;
    animation: ic-moon-rock 1000ms ease-in-out;
  }
  &.ic-moon .i-star {
    transform-box: fill-box;
    transform-origin: center;
    animation: ic-moon-star 1000ms ease-in-out;
  }
  &.ic-moon .i-spark {
    transform-box: fill-box;
    transform-origin: center;
    animation: ic-moon-spark 1000ms ease-out;
  }
  &.ic-globe .i-meridian {
    transform-origin: 12px 12px;
    animation: ic-globe-meridian 1000ms linear;
  }
  &.ic-globe .i-meridian-next {
    transform-origin: 12px 12px;
    animation: ic-globe-next 1000ms linear;
  }
  &.ic-mail .i-flap {
    transform-origin: 12px 7.6px;
    animation: ic-mail-flap 1000ms ease-in-out;
  }
  &.ic-mail .i-seal {
    transform-box: fill-box;
    transform-origin: center;
    animation: ic-mail-seal 1000ms ease-out;
  }
  &.ic-calendar .i-sheet {
    transform-origin: 3.5px 10px;
    animation: ic-calendar-tear 1000ms linear;
  }
  &.ic-calendar .i-day {
    transform-origin: 8.6px 14.6px;
    animation: ic-calendar-day 1000ms linear;
  }
  &.ic-calendar .i-rings {
    animation: ic-calendar-rings 1000ms ease-out;
  }
}

/* Places */
@keyframes ic-book-leaf {
  0% {
    opacity: 0;
    transform: translateY(0) scaleX(1);
  }
  8% {
    opacity: 1;
  }
  50% {
    transform: translateY(-1.5px) scaleX(0.05);
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(0) scaleX(-1);
  }
}
@keyframes ic-book-ribbon {
  0%,
  8% {
    transform: rotate(0);
  }
  24% {
    transform: rotate(-4deg);
  }
  38% {
    transform: rotate(26deg);
  }
  56% {
    transform: rotate(-12deg);
  }
  72% {
    transform: rotate(6deg);
  }
  86% {
    transform: rotate(-2deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes ic-link-unhook {
  0% {
    transform: translate(0, 0) rotate(0);
  }
  30%,
  44% {
    transform: translate(2.2px, -0.3px) rotate(16deg);
  }
  60% {
    transform: translate(-0.6px, 0) rotate(-2deg);
  }
  72%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
}
@keyframes ic-link-recoil {
  0%,
  58% {
    transform: translateX(0);
  }
  12% {
    transform: translateX(0.4px);
  }
  66% {
    transform: translateX(-0.7px);
  }
  80%,
  100% {
    transform: translateX(0);
  }
}
@keyframes ic-link-bar {
  0% {
    transform: scaleX(1);
  }
  30%,
  44% {
    transform: scaleX(0.4);
  }
  60% {
    transform: scaleX(1.06);
  }
  72%,
  100% {
    transform: scaleX(1);
  }
}
@keyframes ic-link-spark {
  0%,
  58% {
    opacity: 0;
    transform: scale(0.6);
  }
  68% {
    opacity: 1;
  }
  92%,
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}
@keyframes ic-lock-keyhole {
  0% {
    transform: rotate(0);
  }
  12% {
    transform: rotate(-18deg);
  }
  32%,
  62% {
    transform: rotate(90deg);
  }
  82%,
  100% {
    transform: rotate(0);
  }
}
@keyframes ic-lock-shackle {
  0%,
  20% {
    transform: translateY(0) rotate(0);
  }
  28% {
    transform: translateY(0.5px) rotate(0);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  42% {
    transform: translateY(-2.8px) rotate(0);
    animation-timing-function: ease-in-out;
  }
  54%,
  60% {
    transform: translateY(-2.6px) rotate(-9deg);
    animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5);
  }
  72% {
    transform: translateY(0.5px) rotate(0);
    animation-timing-function: ease-out;
  }
  80%,
  100% {
    transform: translateY(0) rotate(0);
  }
}
@keyframes ic-lock-body {
  0%,
  71% {
    transform: translateY(0);
  }
  76% {
    transform: translateY(0.7px);
  }
  86% {
    transform: translateY(-0.2px);
  }
  94%,
  100% {
    transform: translateY(0);
  }
}
@keyframes ic-sliders-a {
  0% {
    transform: translateX(0) scale(1, 1);
  }
  12% {
    transform: translateX(-0.8px) scale(1, 1);
  }
  32% {
    transform: translateX(4px) scale(1.25, 0.82);
  }
  48% {
    transform: translateX(6.5px) scale(1, 1);
  }
  70% {
    transform: translateX(2px) scale(1.2, 0.85);
  }
  86% {
    transform: translateX(-0.5px) scale(1, 1);
  }
  100% {
    transform: translateX(0) scale(1, 1);
  }
}
@keyframes ic-sliders-b {
  0% {
    transform: translateX(0) scale(1, 1);
  }
  12% {
    transform: translateX(0.8px) scale(1, 1);
  }
  32% {
    transform: translateX(-4.5px) scale(1.25, 0.82);
  }
  48% {
    transform: translateX(-7px) scale(1, 1);
  }
  70% {
    transform: translateX(-2px) scale(1.2, 0.85);
  }
  86% {
    transform: translateX(0.5px) scale(1, 1);
  }
  100% {
    transform: translateX(0) scale(1, 1);
  }
}
@keyframes ic-sliders-c {
  0% {
    transform: translateX(0) scale(1, 1);
  }
  12% {
    transform: translateX(-0.8px) scale(1, 1);
  }
  32% {
    transform: translateX(5px) scale(1.25, 0.82);
  }
  48% {
    transform: translateX(8px) scale(1, 1);
  }
  70% {
    transform: translateX(2.5px) scale(1.2, 0.85);
  }
  86% {
    transform: translateX(-0.5px) scale(1, 1);
  }
  100% {
    transform: translateX(0) scale(1, 1);
  }
}
@keyframes ic-log-out-arrow {
  0% {
    opacity: 1;
    transform: translateX(0);
    animation-timing-function: ease-out;
  }
  14% {
    opacity: 1;
    transform: translateX(-1.2px);
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6);
  }
  40% {
    opacity: 0;
    transform: translateX(4.5px);
  }
  41% {
    opacity: 0;
    transform: translateX(-5px);
    animation-timing-function: var(--swift);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes ic-log-out-door {
  0%,
  34% {
    transform: translateX(0);
  }
  40% {
    transform: translateX(0.9px);
  }
  50% {
    transform: translateX(-0.5px);
  }
  60% {
    transform: translateX(0.2px);
  }
  70%,
  100% {
    transform: translateX(0);
  }
}

/* Actions */
@keyframes ic-send-plane {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0);
    animation-timing-function: ease-out;
  }
  16% {
    opacity: 1;
    transform: translate(-0.9px, 0.9px) rotate(-10deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5);
  }
  28% {
    opacity: 1;
  }
  40% {
    opacity: 0;
    transform: translate(8px, -8px) rotate(4deg);
  }
  41% {
    opacity: 0;
    transform: translate(-9px, 9px) rotate(10deg);
    animation-timing-function: var(--swift);
  }
  52% {
    opacity: 1;
  }
  78% {
    transform: translate(0.5px, -0.5px) rotate(-3deg);
    animation-timing-function: ease-in-out;
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0);
  }
}
@keyframes ic-send-trail {
  0%,
  16% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
  26%,
  34% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
    stroke-dashoffset: -3px;
  }
}
@keyframes ic-plus-stem {
  0% {
    transform: translateY(0) scaleY(1);
    animation-timing-function: var(--swift);
  }
  22% {
    transform: translateY(-3px) scaleY(1);
    animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.5);
  }
  38% {
    transform: translateY(0.8px) scaleY(0.92);
    animation-timing-function: ease-out;
  }
  54% {
    transform: translateY(-0.5px) scaleY(1.02);
    animation-timing-function: ease-in-out;
  }
  70%,
  100% {
    transform: translateY(0) scaleY(1);
  }
}
@keyframes ic-plus-bar {
  0%,
  36% {
    transform: translateY(0) scaleX(1);
  }
  44% {
    transform: translateY(1.4px) scaleX(1.06);
  }
  58% {
    transform: translateY(-0.5px) scaleX(0.98);
  }
  72% {
    transform: translateY(0.15px) scaleX(1);
  }
  84%,
  100% {
    transform: translateY(0) scaleX(1);
  }
}
@keyframes ic-x-blade-a {
  0% {
    transform: rotate(0);
  }
  18% {
    transform: rotate(9deg);
  }
  40%,
  48% {
    transform: rotate(-34deg);
  }
  68% {
    transform: rotate(5deg);
  }
  84% {
    transform: rotate(-1.5deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes ic-x-blade-b {
  0% {
    transform: rotate(0);
  }
  18% {
    transform: rotate(-9deg);
  }
  40%,
  48% {
    transform: rotate(34deg);
  }
  68% {
    transform: rotate(-5deg);
  }
  84% {
    transform: rotate(1.5deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes ic-check-tick {
  0% {
    stroke-dashoffset: 0;
    transform: translateY(0);
    animation-timing-function: ease-in;
  }
  20% {
    stroke-dashoffset: -1;
  }
  20.01%,
  30% {
    stroke-dashoffset: 1;
    animation-timing-function: ease-in-out;
  }
  48% {
    stroke-dashoffset: 0.68;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  68% {
    stroke-dashoffset: 0;
    transform: translateY(0);
  }
  76% {
    transform: translateY(0.9px);
  }
  88% {
    transform: translateY(-0.3px);
  }
  100% {
    stroke-dashoffset: 0;
    transform: translateY(0);
  }
}
@keyframes ic-copy-front {
  0% {
    transform: scale(1);
  }
  16% {
    transform: scale(0.92);
  }
  40%,
  100% {
    transform: scale(1);
  }
}
@keyframes ic-copy-ghost {
  0%,
  14% {
    opacity: 0;
    transform: translate(0, 0);
  }
  20% {
    opacity: 1;
    transform: translate(0.4px, 0.4px);
  }
  66% {
    opacity: 1;
    transform: translate(-4.5px, -4.5px);
  }
  100% {
    opacity: 0;
    transform: translate(-4.5px, -4.5px);
  }
}
@keyframes ic-copy-back {
  0% {
    opacity: 1;
  }
  12%,
  62% {
    opacity: 0;
  }
  70%,
  100% {
    opacity: 1;
  }
}
@keyframes ic-chevron-push {
  0% {
    transform: translateX(0) scaleY(1);
  }
  16% {
    transform: translateX(-1px) scaleY(1.06);
  }
  40% {
    transform: translateX(2.6px) scaleY(0.78);
  }
  62% {
    transform: translateX(-0.4px) scaleY(1.03);
  }
  80%,
  100% {
    transform: translateX(0) scaleY(1);
  }
}
@keyframes ic-chevron-echo {
  0%,
  36% {
    opacity: 0;
    transform: translateX(2.6px);
  }
  42% {
    opacity: 0.7;
  }
  80%,
  100% {
    opacity: 0;
    transform: translateX(6.5px);
  }
}
@keyframes ic-pencil-write {
  0% {
    transform: translate(0, 0) rotate(0);
  }
  12% {
    transform: translate(-1.5px, 0.6px) rotate(-3deg);
  }
  22% {
    transform: translate(-1px, 2.8px) rotate(0);
  }
  36% {
    transform: translate(1px, 2.3px) rotate(2deg);
  }
  50% {
    transform: translate(3px, 3.1px) rotate(-2deg);
  }
  64% {
    transform: translate(5px, 2.3px) rotate(2deg);
  }
  76% {
    transform: translate(7px, 2.8px) rotate(0);
  }
  88% {
    transform: translate(5.5px, -0.6px) rotate(-3deg);
  }
  100% {
    transform: translate(0, 0) rotate(0);
  }
}
@keyframes ic-pencil-ink {
  0%,
  21.9% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
  22% {
    opacity: 1;
    stroke-dashoffset: 1;
  }
  76% {
    stroke-dashoffset: 0;
  }
  86% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}
@keyframes ic-trash-lid {
  0% {
    transform: translateY(0) rotate(0);
  }
  22%,
  50% {
    transform: translateY(-1.5px) rotate(-28deg);
  }
  60% {
    transform: translateY(0) rotate(2deg);
  }
  70% {
    transform: translateY(0) rotate(-2deg);
  }
  80%,
  100% {
    transform: translateY(0) rotate(0);
  }
}
@keyframes ic-trash-crumb {
  0%,
  18% {
    opacity: 0;
    transform: translateY(-1px);
    animation-timing-function: ease-out;
  }
  26% {
    opacity: 1;
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.5);
  }
  48% {
    opacity: 1;
    transform: translateY(10px);
  }
  54%,
  100% {
    opacity: 0;
    transform: translateY(11px);
  }
}
@keyframes ic-trash-gulp {
  0%,
  58% {
    transform: scale(1, 1);
  }
  64% {
    transform: scale(1.04, 0.94);
  }
  76% {
    transform: scale(0.99, 1.02);
  }
  88%,
  100% {
    transform: scale(1, 1);
  }
}
@keyframes ic-search-sweep {
  0% {
    transform: translate(0, 0);
  }
  12% {
    transform: translate(0.7px, 0.7px);
  }
  34% {
    transform: translate(-2.2px, -0.4px);
  }
  56% {
    transform: translate(1.6px, -1.4px);
  }
  72%,
  100% {
    transform: translate(0, 0);
  }
}
@keyframes ic-search-glass {
  0%,
  70% {
    transform: scale(1);
  }
  80% {
    transform: scale(1.13);
  }
  90% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes ic-search-glint {
  0%,
  70% {
    opacity: 0;
    transform: translate(-0.5px, -0.5px);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(2.5px, 2.5px);
  }
}

/* Things */
@keyframes ic-card-tap {
  0% {
    transform: translateY(0) rotate(0);
  }
  18% {
    transform: translateY(-0.8px) rotate(-5deg);
  }
  34% {
    transform: translateY(0.6px) rotate(0);
  }
  46%,
  100% {
    transform: translateY(0) rotate(0);
  }
}
@keyframes ic-card-chip {
  0%,
  32% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.18);
  }
  58%,
  100% {
    transform: scale(1);
  }
}
@keyframes ic-card-wave {
  0%,
  33% {
    opacity: 0;
    transform: scale(0.8);
  }
  46% {
    opacity: 1;
  }
  70% {
    opacity: 1;
    transform: scale(1);
  }
  88%,
  100% {
    opacity: 0;
    transform: scale(1.06);
  }
}
@keyframes ic-key-turn {
  0% {
    transform: translate(0, 0) rotate(-45deg) scaleY(1) rotate(45deg);
  }
  12% {
    transform: translate(-0.6px, 0.6px) rotate(-45deg) scaleY(1) rotate(45deg);
  }
  30% {
    transform: translate(1.6px, -1.6px) rotate(-45deg) scaleY(1) rotate(45deg);
  }
  46%,
  58% {
    transform: translate(1.6px, -1.6px) rotate(-45deg) scaleY(0.4) rotate(45deg);
  }
  74% {
    transform: translate(1.6px, -1.6px) rotate(-45deg) scaleY(1) rotate(45deg);
  }
  90%,
  100% {
    transform: translate(0, 0) rotate(-45deg) scaleY(1) rotate(45deg);
  }
}
@keyframes ic-pin-drop {
  0% {
    transform: translateY(0) scale(1, 1);
    animation-timing-function: ease-out;
  }
  12% {
    transform: translateY(0) scale(1.06, 0.9);
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1);
  }
  38% {
    transform: translateY(-4.5px) scale(0.96, 1.05);
    animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4);
  }
  60% {
    transform: translateY(0) scale(1.08, 0.88);
    animation-timing-function: ease-out;
  }
  72% {
    transform: translateY(-0.8px) scale(0.98, 1.02);
    animation-timing-function: ease-in;
  }
  84%,
  100% {
    transform: translateY(0) scale(1, 1);
  }
}
@keyframes ic-pin-shadow {
  0% {
    opacity: 1;
    transform: scaleX(1);
  }
  12% {
    transform: scaleX(1.15);
  }
  38% {
    opacity: 0.35;
    transform: scaleX(0.45);
  }
  60% {
    opacity: 1;
    transform: scaleX(1.3);
  }
  72% {
    transform: scaleX(0.9);
  }
  84%,
  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}
@keyframes ic-phone-ring {
  0% {
    transform: translateY(0) rotate(0);
  }
  6% {
    transform: translateY(-0.8px) rotate(-11deg);
  }
  12% {
    transform: translateY(-0.8px) rotate(9deg);
  }
  18% {
    transform: translateY(-0.6px) rotate(-8deg);
  }
  24% {
    transform: translateY(-0.3px) rotate(5deg);
  }
  30%,
  42% {
    transform: translateY(0) rotate(0);
  }
  48% {
    transform: translateY(-0.8px) rotate(-11deg);
  }
  54% {
    transform: translateY(-0.8px) rotate(9deg);
  }
  60% {
    transform: translateY(-0.6px) rotate(-8deg);
  }
  66% {
    transform: translateY(-0.3px) rotate(5deg);
  }
  72%,
  100% {
    transform: translateY(0) rotate(0);
  }
}
@keyframes ic-phone-wave {
  0% {
    opacity: 0;
    transform: scale(0.75);
  }
  8% {
    opacity: 1;
  }
  30% {
    opacity: 0;
    transform: scale(1.12);
  }
  42% {
    opacity: 0;
    transform: scale(0.75);
  }
  50% {
    opacity: 1;
  }
  72%,
  100% {
    opacity: 0;
    transform: scale(1.12);
  }
}
@keyframes ic-tag-swing {
  0% {
    transform: rotate(0);
  }
  10% {
    transform: rotate(-5deg);
  }
  28% {
    transform: rotate(18deg);
  }
  47% {
    transform: rotate(-11deg);
  }
  64% {
    transform: rotate(6deg);
  }
  80% {
    transform: rotate(-2.5deg);
  }
  92% {
    transform: rotate(0.8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes ic-tag-string {
  0% {
    opacity: 0;
  }
  12%,
  82% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ic-shield-dart {
  0% {
    opacity: 0;
    transform: translate(1.5px, 0) rotate(0);
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5);
  }
  12% {
    opacity: 1;
  }
  32% {
    opacity: 1;
    transform: translate(-1.6px, 0) rotate(0);
    animation-timing-function: ease-out;
  }
  58%,
  100% {
    opacity: 0;
    transform: translate(1.2px, -4.5px) rotate(-40deg);
  }
}
@keyframes ic-shield-brace {
  0%,
  30% {
    transform: translate(0, 0) rotate(0);
  }
  38% {
    transform: translate(-1.2px, 0.2px) rotate(-4deg);
  }
  56% {
    transform: translate(0.3px, 0) rotate(1deg);
  }
  72%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
}
@keyframes ic-shield-tick {
  0%,
  38% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.28);
  }
  64% {
    transform: scale(0.95);
  }
  78%,
  100% {
    transform: scale(1);
  }
}
@keyframes ic-eye-look {
  0% {
    transform: translate(0, 0) scaleY(1);
  }
  10% {
    transform: translate(0.6px, 0) scaleY(1);
  }
  24%,
  38% {
    transform: translate(-2.6px, 0.3px) scaleY(1);
  }
  52%,
  58% {
    transform: translate(0, 0) scaleY(1);
  }
  63%,
  67% {
    transform: translate(0, 0) scaleY(0.1);
  }
  74%,
  100% {
    transform: translate(0, 0) scaleY(1);
  }
}
@keyframes ic-eye-upper {
  0%,
  58% {
    transform: scaleY(1);
  }
  63%,
  67% {
    transform: scaleY(0.06);
  }
  74%,
  100% {
    transform: scaleY(1);
  }
}
@keyframes ic-eye-lower {
  0%,
  58% {
    transform: scaleY(1);
  }
  63%,
  67% {
    transform: scaleY(0.9);
  }
  74%,
  100% {
    transform: scaleY(1);
  }
}
@keyframes ic-eye-pupil {
  0%,
  74% {
    transform: scale(1);
  }
  84% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes ic-hand-wave {
  0% {
    transform: rotate(0);
  }
  12% {
    transform: rotate(-5deg);
  }
  32% {
    transform: rotate(13deg);
  }
  52% {
    transform: rotate(-9deg);
  }
  72% {
    transform: rotate(6deg);
  }
  88% {
    transform: rotate(-2deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes ic-hand-finger {
  0%,
  22% {
    transform: translateY(0);
  }
  32% {
    transform: translateY(1.6px);
  }
  44% {
    transform: translateY(-0.3px);
  }
  54%,
  100% {
    transform: translateY(0);
  }
}
@keyframes ic-mobile-island {
  0% {
    transform: scale(1, 1);
  }
  12% {
    transform: scale(0.8, 0.9);
  }
  32%,
  62% {
    transform: scale(2.3, 1.9);
  }
  80% {
    transform: scale(0.92, 0.95);
  }
  92%,
  100% {
    transform: scale(1, 1);
  }
}
@keyframes ic-mobile-buzz {
  0%,
  34% {
    transform: translateX(0) rotate(0);
  }
  38%,
  46%,
  54% {
    transform: translateX(-0.6px) rotate(-2.5deg);
  }
  42%,
  50% {
    transform: translateX(0.6px) rotate(2.5deg);
  }
  58%,
  100% {
    transform: translateX(0) rotate(0);
  }
}
@keyframes ic-fingerprint-scan {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  10% {
    opacity: 1;
    transform: translateY(0);
  }
  78% {
    opacity: 1;
  }
  88%,
  100% {
    opacity: 0;
    transform: translateY(17.5px);
  }
}
@keyframes ic-fingerprint-ridge-1 {
  0% {
    opacity: 1;
  }
  8%,
  14% {
    opacity: 0.25;
  }
  24%,
  100% {
    opacity: 1;
  }
}
@keyframes ic-fingerprint-ridge-2 {
  0% {
    opacity: 1;
  }
  8%,
  26% {
    opacity: 0.25;
  }
  36%,
  100% {
    opacity: 1;
  }
}
@keyframes ic-fingerprint-ridge-3 {
  0% {
    opacity: 1;
  }
  8%,
  38% {
    opacity: 0.25;
  }
  48%,
  100% {
    opacity: 1;
  }
}
@keyframes ic-fingerprint-ridge-4 {
  0% {
    opacity: 1;
  }
  8%,
  50% {
    opacity: 0.25;
  }
  60%,
  100% {
    opacity: 1;
  }
}
@keyframes ic-chat-bubble {
  0% {
    transform: scale(1);
  }
  12% {
    transform: scale(0.9);
  }
  30% {
    transform: scale(1.06);
  }
  44% {
    transform: scale(0.99);
  }
  56%,
  100% {
    transform: scale(1);
  }
}
@keyframes ic-chat-dot {
  0%,
  24% {
    opacity: 0;
    transform: translateY(0);
  }
  32% {
    opacity: 1;
  }
  42% {
    transform: translateY(-1.8px);
  }
  52% {
    transform: translateY(0);
  }
  62% {
    transform: translateY(-1.8px);
  }
  72% {
    transform: translateY(0);
  }
  84% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}
@keyframes ic-mic-capsule {
  0% {
    transform: rotate(0);
  }
  20% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(3deg);
  }
  76% {
    transform: rotate(-1deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes ic-mic-level-1 {
  0%,
  10% {
    opacity: 0;
  }
  16%,
  72% {
    opacity: 1;
  }
  80%,
  100% {
    opacity: 0;
  }
}
@keyframes ic-mic-level-2 {
  0%,
  20% {
    opacity: 0;
  }
  26%,
  40% {
    opacity: 1;
  }
  46%,
  52% {
    opacity: 0;
  }
  58%,
  64% {
    opacity: 1;
  }
  70%,
  100% {
    opacity: 0;
  }
}
@keyframes ic-mic-level-3 {
  0%,
  30% {
    opacity: 0;
  }
  35%,
  40% {
    opacity: 1;
  }
  45%,
  100% {
    opacity: 0;
  }
}
@keyframes ic-mic-voice-l {
  0%,
  28% {
    opacity: 0;
    transform: translateX(0.8px);
  }
  42% {
    opacity: 1;
  }
  74%,
  100% {
    opacity: 0;
    transform: translateX(-1px);
  }
}
@keyframes ic-mic-voice-r {
  0%,
  28% {
    opacity: 0;
    transform: translateX(-0.8px);
  }
  42% {
    opacity: 1;
  }
  74%,
  100% {
    opacity: 0;
    transform: translateX(1px);
  }
}
@keyframes ic-people-peek {
  0% {
    transform: translate(0, 0) rotate(0);
  }
  14% {
    transform: translate(-0.4px, 0.4px) rotate(-2deg);
  }
  36%,
  54% {
    transform: translate(1.2px, -1.5px) rotate(9deg);
  }
  74%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
}
@keyframes ic-people-turn {
  0%,
  40% {
    transform: translate(0, 0);
  }
  54%,
  68% {
    transform: translate(1.1px, 0.4px);
  }
  84%,
  100% {
    transform: translate(0, 0);
  }
}
@keyframes ic-clock-minute {
  0% {
    transform: rotate(0);
    animation-timing-function: ease-out;
  }
  12% {
    transform: rotate(-14deg);
    animation-timing-function: cubic-bezier(0.45, 0, 0.3, 1);
  }
  78% {
    transform: rotate(366deg);
    animation-timing-function: ease-in-out;
  }
  88% {
    transform: rotate(358deg);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes ic-clock-hour {
  0%,
  36% {
    transform: rotate(0);
  }
  42% {
    transform: rotate(10deg);
  }
  54% {
    transform: rotate(-3deg);
  }
  64%,
  100% {
    transform: rotate(0);
  }
}
@keyframes ic-moon-rock {
  0% {
    transform: rotate(0);
  }
  15% {
    transform: rotate(6deg);
  }
  40% {
    transform: rotate(-12deg);
  }
  62% {
    transform: rotate(5deg);
  }
  80% {
    transform: rotate(-2deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes ic-moon-star {
  0%,
  30% {
    transform: scale(1) rotate(0);
  }
  50% {
    transform: scale(0.45) rotate(45deg);
  }
  70% {
    transform: scale(1.3) rotate(90deg);
  }
  88%,
  100% {
    transform: scale(1) rotate(90deg);
  }
}
@keyframes ic-moon-spark {
  0%,
  52% {
    opacity: 0;
    transform: scale(0.3);
  }
  68% {
    opacity: 1;
    transform: scale(1);
  }
  94%,
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}
@keyframes ic-globe-meridian {
  0% {
    opacity: 1;
    transform: translateX(0) scaleX(1);
    animation-timing-function: ease-out;
  }
  10% {
    opacity: 1;
    transform: translateX(-0.6px) scaleX(1.05);
    animation-timing-function: ease-in;
  }
  48% {
    opacity: 0;
    transform: translateX(4px) scaleX(0.2);
  }
  64% {
    opacity: 0;
    transform: translateX(0) scaleX(1);
  }
  65%,
  100% {
    opacity: 1;
    transform: translateX(0) scaleX(1);
  }
}
@keyframes ic-globe-next {
  0%,
  22% {
    opacity: 0;
    transform: translateX(-4px) scaleX(0.2);
    animation-timing-function: var(--swift);
  }
  34% {
    opacity: 1;
  }
  56% {
    transform: translateX(0.4px) scaleX(1.06);
    animation-timing-function: ease-in-out;
  }
  64% {
    opacity: 1;
    transform: translateX(0) scaleX(1);
  }
  65%,
  100% {
    opacity: 0;
    transform: translateX(0) scaleX(1);
  }
}
@keyframes ic-mail-flap {
  0% {
    transform: scaleY(1);
  }
  14% {
    transform: scaleY(1.08);
  }
  36%,
  68% {
    transform: scaleY(-1);
  }
  86% {
    transform: scaleY(1.06);
  }
  100% {
    transform: scaleY(1);
  }
}
@keyframes ic-mail-seal {
  0% {
    transform: scale(1);
  }
  8% {
    transform: scale(1.35);
  }
  18%,
  84% {
    transform: scale(1);
  }
  90% {
    transform: scale(0.75);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes ic-calendar-tear {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(0);
  }
  8% {
    opacity: 1;
    transform: translate(0, 0) rotate(0);
  }
  20% {
    opacity: 1;
    transform: translate(0, 0) rotate(-3deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0.4);
  }
  66%,
  100% {
    opacity: 0;
    transform: translate(3px, 7px) rotate(26deg);
  }
}
@keyframes ic-calendar-day {
  0%,
  20% {
    opacity: 1;
    transform: translate(0, 0) rotate(0) scale(1);
    animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0.4);
  }
  42% {
    opacity: 0;
    transform: translate(2.5px, 4px) rotate(20deg) scale(1);
  }
  52% {
    opacity: 0;
    transform: translate(0, 0) rotate(0) scale(0);
  }
  58% {
    opacity: 1;
    transform: translate(0, 0) rotate(0) scale(0.2);
  }
  74% {
    transform: translate(0, 0) rotate(0) scale(1.22);
  }
  86% {
    transform: translate(0, 0) rotate(0) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0) scale(1);
  }
}
@keyframes ic-calendar-rings {
  0%,
  14% {
    transform: translateY(0);
  }
  22% {
    transform: translateY(-1.2px);
  }
  32% {
    transform: translateY(0.3px);
  }
  42%,
  100% {
    transform: translateY(0);
  }
}

/* Motion for the navigation set (sets/nav.js). */

:where(a, button, label, summary, [role="button"], .ic-play, .ic-host):is(
    :hover,
    :focus-visible
  )
  .ic,
.ic-play .ic {
  &.ic-home .i-house {
    transform-origin: 12px 21px;
    animation: ic-home-settle 900ms ease-in-out;
  }
  &.ic-home .i-glow {
    animation: ic-home-glow 900ms ease-out;
  }
  &.ic-home .i-puff {
    transform-box: fill-box;
    transform-origin: center;
    animation: ic-home-puff 760ms ease-out 120ms;
  }
  &.ic-home .i-puff-2 {
    animation-delay: 300ms;
  }

  &.ic-inbox .i-letter {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: ic-inbox-drop 800ms linear;
  }
  &.ic-inbox .i-tray {
    animation: ic-inbox-catch 800ms linear;
  }

  &.ic-bell .i-shell {
    transform-origin: 12px 2.6px;
    animation: ic-bell-swing 900ms ease-in-out;
  }
  &.ic-bell .i-clapper {
    transform-origin: 12px 2.6px;
    animation: ic-bell-clapper 900ms ease-in-out;
  }
  &.ic-bell .i-ding {
    transform-box: fill-box;
    animation: ic-bell-ding 460ms ease-out;
  }
  &.ic-bell .i-ding-r {
    transform-origin: 0% 100%;
    animation-delay: 230ms;
  }
  &.ic-bell .i-ding-l {
    transform-origin: 100% 100%;
    animation-delay: 380ms;
  }

  &.ic-gear .i-cog {
    transform-origin: 12px 12px;
    animation: ic-gear-ratchet 900ms linear;
  }
  &.ic-gear .i-hub {
    transform-box: fill-box;
    transform-origin: center;
    animation: ic-gear-torque 900ms linear;
  }

  &.ic-grid .i-tile {
    transform-box: fill-box;
    transform-origin: center;
    animation: 720ms cubic-bezier(0.55, 0, 0.25, 1);
  }
  &.ic-grid .i-tile-1 {
    animation-name: ic-grid-tl;
  }
  &.ic-grid .i-tile-2 {
    animation-name: ic-grid-tr;
  }
  &.ic-grid .i-tile-3 {
    animation-name: ic-grid-br;
  }
  &.ic-grid .i-tile-4 {
    animation-name: ic-grid-bl;
  }

  &.ic-menu .i-bar-1 {
    animation: ic-menu-press 820ms ease-out;
  }
  &.ic-menu .i-bar-2 {
    animation: ic-menu-fold-2 820ms linear;
  }
  &.ic-menu .i-bar-3 {
    animation: ic-menu-fold-3 820ms linear;
  }

  &.ic-more .i-bead-1 {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: ic-more-leap 800ms linear;
  }
  &.ic-more :is(.i-bead-2, .i-bead-3) {
    animation: ic-more-shuffle 800ms ease-in-out;
  }

  &.ic-filter .i-funnel {
    animation: ic-filter-shake 1000ms ease-in-out;
  }
  &.ic-filter .i-grain-l {
    animation: ic-filter-left 1000ms linear;
  }
  &.ic-filter .i-grain-r {
    animation: ic-filter-right 1000ms linear;
  }
  &.ic-filter .i-grain-m {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: ic-filter-through 1000ms linear;
  }

  &.ic-sort .i-up {
    animation: ic-sort-up 720ms linear;
  }
  &.ic-sort .i-down {
    animation: ic-sort-down 720ms linear 90ms;
  }

  &.ic-bookmark .i-ribbon {
    transform-origin: 12px 3.5px;
    animation: ic-bookmark-drop 850ms linear;
  }
  &.ic-bookmark .i-tint {
    transform-origin: 12px 3.5px;
    animation: ic-bookmark-tint 850ms ease-out;
  }

  &.ic-star .i-body {
    transform-origin: 12px 20px;
    animation: ic-star-flip 880ms linear;
  }
  &.ic-star .i-spin {
    transform-origin: 12px 12.7px;
    animation: ic-star-spin 880ms linear;
  }
  &.ic-star .i-tint {
    animation: ic-star-tint 880ms ease-out;
  }
  &.ic-star .i-twinkle {
    transform-box: fill-box;
    transform-origin: center;
    animation: ic-star-twinkle 400ms ease-out 540ms;
  }
  &.ic-star .i-twinkle-2 {
    animation-delay: 620ms;
  }

  &.ic-heart .i-beat {
    transform-origin: 12px 13px;
    animation: ic-heart-lubdub 900ms ease-in-out;
  }
  &.ic-heart .i-tint {
    animation: ic-heart-tint 900ms ease-out;
  }
  &.ic-heart .i-echo {
    transform-origin: 12px 13px;
    animation: ic-heart-echo 900ms ease-out;
  }
}

@keyframes ic-home-settle {
  0%,
  100% {
    transform: none;
  }
  12% {
    transform: scaleY(0.96);
  }
  26% {
    transform: scaleY(1.01);
  }
  38% {
    transform: none;
  }
}
@keyframes ic-home-glow {
  0% {
    opacity: 0;
  }
  18%,
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ic-home-puff {
  0% {
    opacity: 0;
    transform: translate(0, 1.4px) scale(0.4);
  }
  22% {
    opacity: 1;
    transform: translate(0.3px, 0) scale(0.9);
  }
  100% {
    opacity: 0;
    transform: translate(1.8px, -2.2px) scale(1.3);
  }
}

@keyframes ic-inbox-drop {
  0% {
    opacity: 0;
    transform: translateY(-10px) rotate(-14deg);
  }
  8% {
    opacity: 1;
    transform: translateY(-9px) rotate(-12deg);
    animation-timing-function: cubic-bezier(0.4, 0, 1, 0.8);
  }
  32% {
    opacity: 1;
    transform: translateY(1.5px) rotate(0);
    animation-timing-function: ease-out;
  }
  40% {
    opacity: 0.4;
    transform: translateY(3px) scaleY(0.6);
  }
  48%,
  100% {
    opacity: 0;
    transform: translateY(3.5px) scaleY(0.4);
  }
}
@keyframes ic-inbox-catch {
  0%,
  30% {
    transform: none;
    animation-timing-function: ease-out;
  }
  38% {
    transform: translateY(1.3px);
    animation-timing-function: ease-in-out;
  }
  54% {
    transform: translateY(-0.4px);
    animation-timing-function: ease-in-out;
  }
  68%,
  100% {
    transform: none;
  }
}

@keyframes ic-bell-swing {
  0%,
  100% {
    transform: none;
  }
  8% {
    transform: rotate(-5deg);
  }
  22% {
    transform: rotate(15deg);
  }
  38% {
    transform: rotate(-12deg);
  }
  54% {
    transform: rotate(8deg);
  }
  70% {
    transform: rotate(-4deg);
  }
  84% {
    transform: rotate(1.5deg);
  }
}
@keyframes ic-bell-clapper {
  0%,
  100% {
    transform: none;
  }
  12% {
    transform: rotate(3deg);
  }
  28% {
    transform: rotate(-10deg);
  }
  44% {
    transform: rotate(18deg);
  }
  60% {
    transform: rotate(-12deg);
  }
  76% {
    transform: rotate(5deg);
  }
  90% {
    transform: rotate(-1deg);
  }
}
@keyframes ic-bell-ding {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  18% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}

@keyframes ic-gear-ratchet {
  0% {
    transform: rotate(0);
    animation-timing-function: ease-out;
  }
  10% {
    transform: rotate(-6deg);
    animation-timing-function: ease-in;
  }
  24% {
    transform: rotate(25.5deg);
    animation-timing-function: ease-out;
  }
  32%,
  46% {
    transform: rotate(22.5deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: rotate(48deg);
    animation-timing-function: ease-out;
  }
  70%,
  100% {
    transform: rotate(45deg);
  }
}
@keyframes ic-gear-torque {
  0%,
  20%,
  34%,
  56%,
  72%,
  100% {
    transform: none;
  }
  26%,
  62% {
    transform: scale(0.8);
  }
}

@keyframes ic-grid-tl {
  45% {
    transform: translate(5px, 0) scale(0.7);
  }
  100% {
    transform: translate(10px, 0);
  }
}
@keyframes ic-grid-tr {
  45% {
    transform: translate(0, 5px) scale(0.7);
  }
  100% {
    transform: translate(0, 10px);
  }
}
@keyframes ic-grid-br {
  45% {
    transform: translate(-5px, 0) scale(0.7);
  }
  100% {
    transform: translate(-10px, 0);
  }
}
@keyframes ic-grid-bl {
  45% {
    transform: translate(0, -5px) scale(0.7);
  }
  100% {
    transform: translate(0, -10px);
  }
}

@keyframes ic-menu-press {
  0%,
  18%,
  36%,
  100% {
    transform: none;
  }
  25% {
    transform: translateY(0.7px);
  }
}
@keyframes ic-menu-fold-2 {
  0% {
    transform: none;
    animation-timing-function: ease-in;
  }
  20%,
  30% {
    transform: translateY(-5.5px);
    animation-timing-function: ease-in;
  }
  48% {
    transform: translateY(0.8px);
    animation-timing-function: ease-out;
  }
  60% {
    transform: translateY(-0.3px);
    animation-timing-function: ease-in-out;
  }
  70%,
  100% {
    transform: none;
  }
}
@keyframes ic-menu-fold-3 {
  0% {
    transform: none;
    animation-timing-function: ease-in;
  }
  20%,
  36% {
    transform: translateY(-11px);
    animation-timing-function: ease-in;
  }
  60% {
    transform: translateY(0.9px);
    animation-timing-function: ease-out;
  }
  72% {
    transform: translateY(-0.3px);
    animation-timing-function: ease-in-out;
  }
  84%,
  100% {
    transform: none;
  }
}

@keyframes ic-more-leap {
  0% {
    transform: none;
    animation-timing-function: ease-out;
  }
  12% {
    transform: scale(1.15, 0.75);
    animation-timing-function: ease-out;
  }
  30% {
    transform: translate(3.3px, -4.3px);
    animation-timing-function: ease-out;
  }
  48% {
    transform: translate(6.5px, -5.8px);
    animation-timing-function: ease-in;
  }
  66% {
    transform: translate(9.8px, -4.3px);
    animation-timing-function: ease-in;
  }
  80% {
    transform: translate(13px, 0) scale(1.15, 0.75);
    animation-timing-function: ease-out;
  }
  90%,
  100% {
    transform: translate(13px, 0);
  }
}
@keyframes ic-more-shuffle {
  0%,
  28% {
    transform: none;
  }
  70%,
  100% {
    transform: translateX(-6.5px);
  }
}

@keyframes ic-filter-shake {
  0%,
  28%,
  54%,
  100% {
    transform: none;
  }
  33% {
    transform: translateX(-0.7px);
  }
  39% {
    transform: translateX(0.7px);
  }
  44% {
    transform: translateX(-0.5px);
  }
  49% {
    transform: translateX(0.3px);
  }
}
@keyframes ic-filter-left {
  0% {
    opacity: 0;
    transform: translate(0, -1.5px);
    animation-timing-function: ease-out;
  }
  10%,
  30% {
    opacity: 1;
    transform: none;
    animation-timing-function: ease-in-out;
  }
  46%,
  64% {
    opacity: 1;
    transform: translate(1.3px, 1.55px);
  }
  80%,
  100% {
    opacity: 0;
    transform: translate(1.3px, 1.55px);
  }
}
@keyframes ic-filter-right {
  0% {
    opacity: 0;
    transform: translate(0, -1.5px);
    animation-timing-function: ease-out;
  }
  10%,
  30% {
    opacity: 1;
    transform: none;
    animation-timing-function: ease-in-out;
  }
  46%,
  64% {
    opacity: 1;
    transform: translate(-1.3px, 1.55px);
  }
  80%,
  100% {
    opacity: 0;
    transform: translate(-1.3px, 1.55px);
  }
}
@keyframes ic-filter-through {
  0% {
    opacity: 0;
    transform: translateY(-1.5px);
    animation-timing-function: ease-out;
  }
  10%,
  50% {
    opacity: 1;
    transform: none;
    animation-timing-function: cubic-bezier(0.5, 0, 1, 0.6);
  }
  57% {
    transform: translateY(5.5px) scale(0.8);
  }
  64% {
    transform: translateY(13.5px) scale(0.8);
    animation-timing-function: ease-in;
  }
  72% {
    opacity: 1;
    transform: translateY(15.4px);
    animation-timing-function: ease-out;
  }
  78% {
    opacity: 1;
    transform: translateY(15.4px) scale(1.3, 0.65);
    animation-timing-function: ease-in-out;
  }
  86% {
    opacity: 0.8;
    transform: translateY(15.4px) scale(0.95, 1.05);
  }
  96%,
  100% {
    opacity: 0;
    transform: translateY(15.4px);
  }
}

@keyframes ic-sort-up {
  0% {
    opacity: 1;
    transform: none;
    animation-timing-function: ease-in;
  }
  30% {
    opacity: 0;
    transform: translateY(-5px);
  }
  31% {
    opacity: 0;
    transform: translateY(5px);
    animation-timing-function: ease-out;
  }
  62% {
    opacity: 1;
    transform: translateY(-0.6px);
    animation-timing-function: ease-in-out;
  }
  76% {
    transform: translateY(0.2px);
  }
  88%,
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes ic-sort-down {
  0% {
    opacity: 1;
    transform: none;
    animation-timing-function: ease-in;
  }
  30% {
    opacity: 0;
    transform: translateY(5px);
  }
  31% {
    opacity: 0;
    transform: translateY(-5px);
    animation-timing-function: ease-out;
  }
  62% {
    opacity: 1;
    transform: translateY(0.6px);
    animation-timing-function: ease-in-out;
  }
  76% {
    transform: translateY(-0.2px);
  }
  88%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes ic-bookmark-drop {
  0% {
    transform: none;
    animation-timing-function: ease-out;
  }
  18% {
    transform: translateY(-1.8px) scaleY(0.97);
    animation-timing-function: ease-in;
  }
  34% {
    transform: translateY(0.3px) scaleY(1.08);
    animation-timing-function: ease-out;
  }
  50% {
    transform: scaleY(0.97);
    animation-timing-function: ease-in-out;
  }
  64% {
    transform: scaleY(1.02);
    animation-timing-function: ease-in-out;
  }
  78%,
  100% {
    transform: none;
  }
}
@keyframes ic-bookmark-tint {
  0%,
  18% {
    opacity: 1;
    transform: scaleY(0);
  }
  38% {
    transform: none;
  }
  70% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}

@keyframes ic-star-flip {
  0% {
    transform: none;
    animation-timing-function: ease-out;
  }
  12% {
    transform: translateY(0) scale(1.08, 0.88);
    animation-timing-function: ease-out;
  }
  36% {
    transform: translateY(-3px) scale(0.98, 1.03);
    animation-timing-function: ease-in;
  }
  58% {
    transform: translateY(0) scale(1, 1);
    animation-timing-function: ease-out;
  }
  66% {
    transform: translateY(0) scale(1.1, 0.9);
    animation-timing-function: ease-in-out;
  }
  80% {
    transform: translateY(0) scale(0.97, 1.03);
    animation-timing-function: ease-in-out;
  }
  90%,
  100% {
    transform: none;
  }
}
@keyframes ic-star-spin {
  0%,
  14% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1);
  }
  56% {
    transform: rotate(78deg);
    animation-timing-function: ease-in-out;
  }
  70%,
  100% {
    transform: rotate(72deg);
  }
}
@keyframes ic-star-tint {
  0%,
  58% {
    opacity: 0;
  }
  66% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ic-star-twinkle {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(0);
  }
  40% {
    opacity: 1;
    transform: scale(1.15) rotate(45deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.6) rotate(90deg);
  }
}

@keyframes ic-heart-lubdub {
  0%,
  56%,
  100% {
    transform: none;
  }
  10% {
    transform: scale(1.14);
  }
  20% {
    transform: scale(0.97);
  }
  30% {
    transform: scale(1.1);
  }
  44% {
    transform: scale(0.99);
  }
}
@keyframes ic-heart-tint {
  0% {
    opacity: 0;
  }
  10%,
  45% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ic-heart-echo {
  0% {
    opacity: 0;
    transform: none;
  }
  8% {
    opacity: 0.8;
    transform: scale(1.1);
  }
  26% {
    opacity: 0;
    transform: scale(1.35);
  }
  27% {
    opacity: 0;
    transform: scale(1.05);
  }
  30% {
    opacity: 0.6;
    transform: scale(1.1);
  }
  52%,
  100% {
    opacity: 0;
    transform: scale(1.4);
  }
}

/* Motion for Arrows and actions (sets/arrows.js). The trigger wrapper is the same in every set. */

.ic-refresh .i-trail,
.ic-undo .i-tape,
.ic-redo .i-tape {
  stroke-dasharray: 1 2;
}

:where(a, button, label, summary, [role="button"], .ic-play, .ic-host):is(
    :hover,
    :focus-visible
  )
  .ic,
.ic-play .ic {
  &.ic-arrow-left .i-head {
    animation: ic-arrow-left-head 760ms ease-in-out;
  }
  &.ic-arrow-left .i-shaft {
    transform-origin: 19.5px 12px;
    animation: ic-arrow-left-shaft 760ms ease-in-out;
  }
  &.ic-arrow-left .i-whoosh {
    animation: ic-arrow-left-whoosh 760ms ease-out;
  }
  &.ic-arrow-right .i-head {
    animation: ic-arrow-right-head 760ms ease-in-out;
  }
  &.ic-arrow-right .i-shaft {
    transform-origin: 4.5px 12px;
    animation: ic-arrow-right-shaft 760ms ease-in-out;
  }
  &.ic-arrow-right .i-whoosh {
    animation: ic-arrow-right-whoosh 760ms ease-out;
  }

  &.ic-arrow-down .i-shaft {
    transform-origin: 12px 19px;
    animation: ic-arrow-down-shaft 820ms linear;
  }
  &.ic-arrow-down .i-head {
    transform-origin: 12px 19px;
    animation: ic-arrow-down-head 820ms linear;
  }
  &.ic-arrow-down .i-dust {
    transform-origin: 12px 21.8px;
    animation: ic-arrow-down-dust 820ms ease-out;
  }
  &.ic-arrow-up .i-shaft {
    transform-origin: 12px 19.5px;
    animation: ic-arrow-up-shaft 820ms linear;
  }
  &.ic-arrow-up .i-head {
    animation: ic-arrow-up-head 820ms linear;
  }
  &.ic-arrow-up .i-puff {
    transform-origin: 12px 22px;
    animation: ic-arrow-up-puff 820ms ease-out;
  }

  &.ic-refresh .i-loop {
    transform-origin: 12px 12px;
    animation: ic-refresh-spin 900ms linear;
  }
  &.ic-refresh .i-trail {
    animation: ic-refresh-trail 900ms ease-in-out;
  }

  &.ic-undo .i-tape {
    animation: ic-undo-tape 820ms linear;
  }
  &.ic-undo .i-head {
    animation: ic-undo-head 820ms ease-in-out;
  }
  &.ic-redo .i-tape {
    animation: ic-redo-tape 820ms linear;
  }
  &.ic-redo .i-head {
    animation: ic-redo-head 820ms ease-in-out;
  }

  &.ic-download .i-arrow {
    animation: ic-download-arrow 820ms linear;
  }
  &.ic-download .i-tray {
    transform-origin: 12px 20px;
    animation: ic-download-tray 820ms ease-out;
  }
  &.ic-download .i-fill {
    transform-origin: 12px 20px;
    animation: ic-download-fill 820ms ease-out;
  }
  &.ic-upload .i-arrow {
    animation: ic-upload-arrow 820ms linear;
  }
  &.ic-upload .i-tray {
    transform-origin: 12px 20px;
    animation: ic-upload-tray 820ms ease-out;
  }
  &.ic-upload .i-fill {
    transform-origin: 12px 20px;
    animation: ic-upload-fill 820ms ease-in;
  }

  &.ic-share .i-hub {
    transform-origin: 6px 12px;
    animation: ic-share-hub 860ms ease-in-out;
  }
  &.ic-share .i-packet-1 {
    animation: ic-share-packet-up 860ms var(--swift);
  }
  &.ic-share .i-packet-2 {
    animation: ic-share-packet-down 860ms var(--swift) 60ms;
  }
  &.ic-share .i-leaf-1 {
    transform-origin: 17.5px 6px;
    animation: ic-share-leaf 860ms ease-out;
  }
  &.ic-share .i-leaf-2 {
    transform-origin: 17.5px 18px;
    animation: ic-share-leaf 860ms ease-out 60ms;
  }

  &.ic-external .i-arrow {
    animation: ic-external-arrow 800ms ease-in-out;
  }
  &.ic-external .i-box {
    animation: ic-external-box 800ms ease-in-out;
  }

  &.ic-minus .i-bar {
    transform-origin: 5px 12px;
    animation: ic-minus-bar 820ms ease-in-out;
  }
  &.ic-minus .i-chip {
    transform-origin: 17.25px 12px;
    animation: ic-minus-chip 820ms ease-in;
  }

  &.ic-log-in .i-arrow {
    animation: ic-log-in-arrow 1000ms ease-in-out;
  }
  &.ic-log-in .i-door {
    transform-origin: 20px 12px;
    animation: ic-log-in-door 1000ms ease-in-out;
  }
}

@keyframes ic-arrow-left-head {
  18% {
    transform: translateX(1.2px);
  }
  45% {
    transform: translateX(-4.5px);
  }
  66% {
    transform: translateX(0.8px);
  }
  84% {
    transform: translateX(-0.3px);
  }
}
@keyframes ic-arrow-left-shaft {
  18% {
    transform: scaleX(0.92);
  }
  45% {
    transform: scaleX(1.31);
  }
  66% {
    transform: scaleX(0.945);
  }
  84% {
    transform: scaleX(1.02);
  }
}
@keyframes ic-arrow-left-whoosh {
  0%,
  30% {
    opacity: 0;
    transform: translateX(-1.5px);
  }
  45% {
    opacity: 1;
    transform: translateX(0);
  }
  70%,
  100% {
    opacity: 0;
    transform: translateX(1.5px);
  }
}
@keyframes ic-arrow-right-head {
  18% {
    transform: translateX(-1.2px);
  }
  45% {
    transform: translateX(4.5px);
  }
  66% {
    transform: translateX(-0.8px);
  }
  84% {
    transform: translateX(0.3px);
  }
}
@keyframes ic-arrow-right-shaft {
  18% {
    transform: scaleX(0.92);
  }
  45% {
    transform: scaleX(1.31);
  }
  66% {
    transform: scaleX(0.945);
  }
  84% {
    transform: scaleX(1.02);
  }
}
@keyframes ic-arrow-right-whoosh {
  0%,
  30% {
    opacity: 0;
    transform: translateX(1.5px);
  }
  45% {
    opacity: 1;
    transform: translateX(0);
  }
  70%,
  100% {
    opacity: 0;
    transform: translateX(-1.5px);
  }
}

@keyframes ic-arrow-down-shaft {
  0% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  18% {
    transform: translateY(-2.5px);
    animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4);
  }
  40% {
    transform: translateY(2px);
    animation-timing-function: ease-out;
  }
  48% {
    transform: translateY(2px) scaleY(0.8);
    animation-timing-function: ease-out;
  }
  64% {
    transform: translateY(-0.8px);
    animation-timing-function: ease-in;
  }
  80% {
    transform: translateY(0.3px);
    animation-timing-function: ease-out;
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes ic-arrow-down-head {
  0% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  18% {
    transform: translateY(-2.5px);
    animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4);
  }
  40% {
    transform: translateY(2px);
    animation-timing-function: ease-out;
  }
  48% {
    transform: translateY(2px) scale(1.14, 0.8);
    animation-timing-function: ease-out;
  }
  64% {
    transform: translateY(-0.8px);
    animation-timing-function: ease-in;
  }
  80% {
    transform: translateY(0.3px);
    animation-timing-function: ease-out;
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes ic-arrow-down-dust {
  0%,
  38% {
    opacity: 0;
    transform: scaleX(0.7);
  }
  44% {
    opacity: 1;
    transform: scaleX(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scaleX(1.5) translateY(-0.6px);
  }
}
@keyframes ic-arrow-up-shaft {
  0% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  20% {
    transform: scaleY(0.84);
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.3, 1);
  }
  40% {
    transform: translateY(-2.5px) scaleY(1.06);
    animation-timing-function: ease-in-out;
  }
  52% {
    transform: translateY(-2.6px);
    animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4);
  }
  70% {
    transform: translateY(0.5px) scaleY(0.96);
    animation-timing-function: ease-out;
  }
  84% {
    transform: translateY(-0.2px);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes ic-arrow-up-head {
  0% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  20% {
    transform: translateY(2.3px);
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.3, 1);
  }
  40% {
    transform: translateY(-3.3px);
    animation-timing-function: ease-in-out;
  }
  52% {
    transform: translateY(-2.6px);
    animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4);
  }
  70% {
    transform: translateY(1px);
    animation-timing-function: ease-out;
  }
  84% {
    transform: translateY(-0.2px);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes ic-arrow-up-puff {
  0%,
  22% {
    opacity: 0;
    transform: translateY(-1px) scaleX(0.8);
  }
  30% {
    opacity: 1;
    transform: translateY(0) scaleX(1);
  }
  56%,
  100% {
    opacity: 0;
    transform: translateY(1px) scaleX(1.5);
  }
}

@keyframes ic-refresh-spin {
  0% {
    transform: rotate(0);
    animation-timing-function: ease-out;
  }
  16% {
    transform: rotate(-26deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1);
  }
  74% {
    transform: rotate(372deg);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes ic-refresh-trail {
  0%,
  16% {
    stroke-dashoffset: 0;
  }
  42% {
    stroke-dashoffset: -0.55;
  }
  80%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes ic-undo-tape {
  0%,
  12% {
    stroke-dashoffset: 0;
    animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4);
  }
  38% {
    stroke-dashoffset: -0.72;
    animation-timing-function: linear;
  }
  48% {
    stroke-dashoffset: -0.72;
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes ic-undo-head {
  12% {
    transform: translateX(0.8px);
  }
  38% {
    transform: translateX(0);
  }
  46% {
    transform: translateX(-1.6px);
  }
  66% {
    transform: translateX(0.3px);
  }
  82% {
    transform: translateX(0);
  }
}
@keyframes ic-redo-tape {
  0%,
  12% {
    stroke-dashoffset: 0;
    animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4);
  }
  38% {
    stroke-dashoffset: -0.72;
    animation-timing-function: linear;
  }
  48% {
    stroke-dashoffset: -0.72;
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes ic-redo-head {
  12% {
    transform: translateX(-0.8px);
  }
  38% {
    transform: translateX(0);
  }
  46% {
    transform: translateX(1.6px);
  }
  66% {
    transform: translateX(-0.3px);
  }
  82% {
    transform: translateX(0);
  }
}

@keyframes ic-download-arrow {
  0% {
    opacity: 1;
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  10% {
    transform: translateY(-1px);
    animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4);
  }
  36% {
    opacity: 0;
    transform: translateY(5px);
  }
  37% {
    opacity: 0;
    transform: translateY(-7px);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes ic-download-tray {
  0%,
  30% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(1.6px) scaleY(0.88);
  }
  58% {
    transform: translateY(-0.4px);
  }
  72%,
  100% {
    transform: translateY(0);
  }
}
@keyframes ic-download-fill {
  0%,
  32% {
    opacity: 0;
    transform: scaleY(0);
  }
  44% {
    opacity: 1;
    transform: translateY(1.6px) scaleY(1);
  }
  58% {
    opacity: 1;
    transform: translateY(-0.4px);
  }
  86%,
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}
@keyframes ic-upload-arrow {
  0% {
    opacity: 1;
    transform: translateY(0);
    animation-timing-function: ease-in;
  }
  12% {
    transform: translateY(1px);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  40% {
    opacity: 0;
    transform: translateY(-8px);
  }
  41% {
    opacity: 0;
    transform: translateY(5px);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes ic-upload-tray {
  0% {
    transform: translateY(0);
  }
  12% {
    transform: translateY(1px) scaleY(0.9);
  }
  26% {
    transform: translateY(-1px);
  }
  44%,
  100% {
    transform: translateY(0);
  }
}
@keyframes ic-upload-fill {
  0% {
    opacity: 0;
    transform: translateY(0) scaleY(1);
  }
  12% {
    opacity: 1;
    transform: translateY(1px) scaleY(1);
  }
  36%,
  100% {
    opacity: 0;
    transform: translateY(0) scaleY(0);
  }
}

@keyframes ic-share-hub {
  0% {
    transform: scale(1);
  }
  16% {
    transform: scale(0.7);
  }
  30% {
    transform: scale(1.2);
  }
  50%,
  100% {
    transform: scale(1);
  }
}
@keyframes ic-share-packet-up {
  0%,
  22% {
    opacity: 0;
    transform: translate(0, 0);
  }
  26% {
    opacity: 1;
  }
  52% {
    opacity: 1;
    transform: translate(11.5px, -6px);
  }
  60%,
  100% {
    opacity: 0;
    transform: translate(11.5px, -6px);
  }
}
@keyframes ic-share-packet-down {
  0%,
  22% {
    opacity: 0;
    transform: translate(0, 0);
  }
  26% {
    opacity: 1;
  }
  52% {
    opacity: 1;
    transform: translate(11.5px, 6px);
  }
  60%,
  100% {
    opacity: 0;
    transform: translate(11.5px, 6px);
  }
}
@keyframes ic-share-leaf {
  0%,
  48% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.3);
  }
  74% {
    transform: scale(0.94);
  }
  88%,
  100% {
    transform: scale(1);
  }
}

@keyframes ic-external-arrow {
  0% {
    transform: translate(0, 0);
  }
  16% {
    transform: translate(-1.2px, 1.2px);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  34% {
    transform: translate(2px, -2px);
  }
  56% {
    transform: translate(-0.4px, 0.4px);
  }
  76% {
    transform: translate(0.15px, -0.15px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes ic-external-box {
  0%,
  18% {
    transform: translate(0, 0);
  }
  32% {
    transform: translate(-1.1px, 1.1px);
  }
  54% {
    transform: translate(0.3px, -0.3px);
  }
  72%,
  100% {
    transform: translate(0, 0);
  }
}

@keyframes ic-minus-bar {
  0%,
  8% {
    transform: scaleX(1);
  }
  14%,
  52% {
    transform: scaleX(0.72);
  }
  78% {
    transform: scaleX(1.04);
  }
  100% {
    transform: scaleX(1);
  }
}
@keyframes ic-minus-chip {
  0%,
  10% {
    opacity: 0;
    transform: translate(0, 0) rotate(0);
  }
  14% {
    opacity: 1;
    transform: translate(0.6px, -1px) rotate(-10deg);
  }
  28% {
    opacity: 1;
    transform: translate(1.4px, -1.6px) rotate(-10deg);
  }
  60%,
  100% {
    opacity: 0;
    transform: translate(3px, 7px) rotate(70deg);
  }
}

@keyframes ic-log-in-arrow {
  0% {
    transform: translateX(0);
  }
  8% {
    transform: translateX(-1.4px);
  }
  13% {
    transform: translateX(0.3px);
  }
  19% {
    transform: translateX(-1.2px);
  }
  24% {
    transform: translateX(0.3px);
  }
  34% {
    transform: translateX(-0.4px);
  }
  54%,
  70% {
    transform: translateX(3px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes ic-log-in-door {
  0%,
  12% {
    transform: translateX(0);
  }
  14% {
    transform: translateX(0.5px);
  }
  18% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(0.5px);
  }
  30%,
  36% {
    transform: translateX(0);
  }
  50%,
  70% {
    transform: scaleX(0.45);
  }
  88% {
    transform: scaleX(1.05);
  }
  100% {
    transform: scaleX(1);
  }
}

/* Motion for States and tools (sets/states.js). The trigger wrapper is the same in every set. */

.ic-eye-off .i-slash,
.ic-check-circle .i-tick {
  stroke-dasharray: 1 2;
}

:where(a, button, label, summary, [role="button"], .ic-play, .ic-host):is(
    :hover,
    :focus-visible
  )
  .ic,
.ic-play .ic {
  &.ic-unlock .i-keyhole {
    transform-origin: 12px 15.65px;
    animation: ic-unlock-keyhole 900ms ease-in-out;
  }
  &.ic-unlock .i-shackle {
    transform-origin: 8px 10.5px;
    animation: ic-unlock-shackle 900ms ease-in-out;
  }
  &.ic-unlock .i-body {
    transform-origin: 12px 21px;
    animation: ic-unlock-body 900ms ease-out;
  }

  &.ic-eye-off .i-slash {
    animation: ic-eye-off-slash 900ms ease-in-out;
  }
  &.ic-eye-off .i-upper {
    animation: ic-eye-off-upper 900ms linear;
  }
  &.ic-eye-off .i-lid-1 {
    animation: ic-eye-off-lid-1 900ms linear;
  }
  &.ic-eye-off .i-lid-2 {
    animation: ic-eye-off-lid-2 900ms linear;
  }
  &.ic-eye-off .i-lid-3 {
    animation: ic-eye-off-lid-3 900ms linear;
  }
  &.ic-eye-off .i-lashes {
    animation: ic-eye-off-lashes 900ms linear;
  }
  &.ic-eye-off .i-iris {
    animation: ic-eye-off-iris 900ms linear;
  }

  &.ic-bell-off .i-shell {
    transform-origin: 12px 2.6px;
    animation: ic-bell-off-shell 900ms ease-in-out;
  }
  &.ic-bell-off .i-clapper {
    transform-origin: 12px 2.6px;
    animation: ic-bell-off-clapper 900ms ease-in-out;
  }
  &.ic-bell-off .i-snooze {
    animation: ic-bell-off-snooze 900ms ease-out;
  }

  &.ic-check-circle .i-tick {
    animation: ic-check-circle-tick 900ms linear;
  }
  &.ic-check-circle .i-flick {
    animation: ic-check-circle-flick 900ms ease-out;
  }
  &.ic-check-circle .i-ring {
    transform-origin: 12px 12px;
    animation: ic-check-circle-ring 900ms ease-in-out;
  }

  &.ic-x-circle .i-ring {
    animation: ic-x-circle-ring 820ms ease-in-out;
  }
  &.ic-x-circle .i-cross {
    transform-origin: 12px 12px;
    animation: ic-x-circle-cross 820ms ease-in-out;
  }

  &.ic-ban .i-bar {
    transform-origin: 12px 12px;
    animation: ic-ban-bar 860ms linear;
  }
  &.ic-ban .i-ring {
    transform-origin: 12px 12px;
    animation: ic-ban-ring 860ms ease-out;
  }

  &.ic-history .i-minute {
    transform-origin: 12px 12px;
    animation: ic-history-minute 1000ms linear;
  }
  &.ic-history .i-hour {
    transform-origin: 12px 12px;
    animation: ic-history-hour 1000ms ease-in-out;
  }
  &.ic-history .i-face {
    transform-origin: 12px 12px;
    animation: ic-history-face 1000ms ease-in-out;
  }

  &.ic-printer .i-body {
    animation: ic-printer-hum 1000ms linear;
  }
  &.ic-printer .i-light {
    animation: ic-printer-light 1000ms linear;
  }
  &.ic-printer .i-sheet {
    transform-origin: 12px 14px;
    animation: ic-printer-sheet 1000ms linear;
  }
  &.ic-printer .i-print {
    animation: ic-printer-print 1000ms linear;
  }
  &.ic-printer .i-line-1 {
    animation: ic-printer-line-1 1000ms linear;
  }
  &.ic-printer .i-line-2 {
    animation: ic-printer-line-2 1000ms linear;
  }

  &.ic-qr-code .i-scan {
    animation: ic-qr-code-scan 900ms linear;
  }
  &.ic-qr-code .i-finder {
    transform-box: fill-box;
    transform-origin: center;
  }
  &.ic-qr-code .i-finder-1 {
    animation: ic-qr-code-lock-top 900ms ease-out;
  }
  &.ic-qr-code .i-finder-2 {
    animation: ic-qr-code-lock-top 900ms ease-out 40ms;
  }
  &.ic-qr-code .i-finder-3 {
    animation: ic-qr-code-lock-bottom 900ms ease-out;
  }
  &.ic-qr-code .i-bits-1 {
    animation: ic-qr-code-bits-1 900ms linear;
  }
  &.ic-qr-code .i-bits-2 {
    animation: ic-qr-code-bits-2 900ms linear;
  }

  &.ic-wand .i-stick {
    transform-origin: 4px 20px;
    animation: ic-wand-stick 900ms ease-in-out;
  }
  &.ic-wand .i-star {
    transform-box: fill-box;
    transform-origin: center;
    animation: ic-wand-star 900ms ease-out;
  }
  &.ic-wand .i-glint {
    transform-box: fill-box;
    transform-origin: center;
    animation: ic-wand-glint 900ms ease-in-out;
  }
  &.ic-wand .i-glint-2 {
    animation-delay: 110ms;
  }
  &.ic-wand .i-burst {
    transform-origin: 16px 8px;
    animation: ic-wand-burst 900ms ease-out;
  }

  &.ic-cursor .i-pointer {
    transform-origin: 4.5px 4.5px;
    animation: ic-cursor-pointer 800ms ease-in-out;
  }
  &.ic-cursor .i-click {
    transform-origin: 4.5px 4.5px;
    animation: ic-cursor-click 800ms ease-out;
  }
}

@keyframes ic-unlock-keyhole {
  0%,
  4% {
    transform: rotate(0);
  }
  20% {
    transform: rotate(98deg);
  }
  28%,
  72% {
    transform: rotate(90deg);
  }
  90%,
  100% {
    transform: rotate(0);
  }
}
@keyframes ic-unlock-shackle {
  0%,
  22% {
    transform: translateY(0) scaleX(1);
  }
  34% {
    transform: translateY(-1.8px) scaleX(1);
  }
  50% {
    transform: translateY(-1.6px) scaleX(-0.75);
  }
  66% {
    transform: translateY(-1.2px) scaleX(1.08);
  }
  78% {
    transform: translateY(-0.3px) scaleX(0.97);
  }
  90%,
  100% {
    transform: translateY(0) scaleX(1);
  }
}
@keyframes ic-unlock-body {
  0%,
  26% {
    transform: translateY(0);
  }
  34% {
    transform: translateY(0.6px) scaleY(0.97);
  }
  48%,
  100% {
    transform: translateY(0);
  }
}

@keyframes ic-eye-off-slash {
  0%,
  22% {
    stroke-dashoffset: 0;
    animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4);
  }
  36%,
  44% {
    stroke-dashoffset: 1;
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  62%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes ic-eye-off-upper {
  0%,
  26% {
    opacity: 1;
  }
  26.1%,
  64.9% {
    opacity: 0;
  }
  65%,
  100% {
    opacity: 1;
  }
}
@keyframes ic-eye-off-lid-1 {
  0% {
    opacity: 0;
  }
  26% {
    opacity: 0;
  }
  26.1% {
    opacity: 1;
  }
  29% {
    opacity: 1;
  }
  29.1% {
    opacity: 0;
  }
  62% {
    opacity: 0;
  }
  62.1% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  65.1% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ic-eye-off-lid-2 {
  0% {
    opacity: 0;
  }
  29% {
    opacity: 0;
  }
  29.1% {
    opacity: 1;
  }
  32% {
    opacity: 1;
  }
  32.1% {
    opacity: 0;
  }
  59% {
    opacity: 0;
  }
  59.1% {
    opacity: 1;
  }
  62% {
    opacity: 1;
  }
  62.1% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ic-eye-off-lid-3 {
  0% {
    opacity: 0;
  }
  32% {
    opacity: 0;
  }
  32.1% {
    opacity: 1;
  }
  35% {
    opacity: 1;
  }
  35.1% {
    opacity: 0;
  }
  56% {
    opacity: 0;
  }
  56.1% {
    opacity: 1;
  }
  59% {
    opacity: 1;
  }
  59.1% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ic-eye-off-lashes {
  0% {
    opacity: 0;
  }
  35% {
    opacity: 0;
  }
  35.1% {
    opacity: 1;
  }
  56% {
    opacity: 1;
  }
  56.1% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ic-eye-off-iris {
  0%,
  26% {
    opacity: 1;
  }
  31%,
  60% {
    opacity: 0;
  }
  66%,
  100% {
    opacity: 1;
  }
}
@keyframes ic-bell-off-shell {
  0% {
    transform: rotate(0);
  }
  12% {
    transform: rotate(-4deg);
  }
  24% {
    transform: rotate(9deg);
  }
  30% {
    transform: rotate(-2deg);
  }
  36% {
    transform: rotate(1.5deg);
  }
  42% {
    transform: rotate(-0.8deg);
  }
  48% {
    transform: rotate(0.4deg);
  }
  56%,
  100% {
    transform: rotate(0);
  }
}
@keyframes ic-bell-off-clapper {
  0%,
  14% {
    transform: rotate(0);
  }
  30% {
    transform: rotate(6deg);
  }
  42% {
    transform: rotate(-1.5deg);
  }
  54% {
    transform: rotate(0.5deg);
  }
  62%,
  100% {
    transform: rotate(0);
  }
}
@keyframes ic-bell-off-snooze {
  0%,
  36% {
    opacity: 0;
    transform: translate(-1px, 1.5px);
  }
  52% {
    opacity: 1;
    transform: translate(0, 0);
  }
  90%,
  100% {
    opacity: 0;
    transform: translate(1px, -1.6px);
  }
}

@keyframes ic-check-circle-tick {
  0% {
    stroke-dashoffset: 0;
    animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4);
  }
  16%,
  24% {
    stroke-dashoffset: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  58%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes ic-check-circle-flick {
  0%,
  52% {
    opacity: 0;
    transform: translate(-1.2px, 1.2px);
  }
  60% {
    opacity: 1;
  }
  78%,
  100% {
    opacity: 0;
    transform: translate(1.4px, -1.4px);
  }
}
@keyframes ic-check-circle-ring {
  0%,
  54% {
    transform: scale(1);
  }
  62% {
    transform: scale(0.93);
  }
  76% {
    transform: scale(1.03);
  }
  88%,
  100% {
    transform: scale(1);
  }
}

@keyframes ic-x-circle-ring {
  0% {
    transform: translateX(0);
  }
  12% {
    transform: translateX(-1.3px);
  }
  28% {
    transform: translateX(1.3px);
  }
  44% {
    transform: translateX(-0.9px);
  }
  60% {
    transform: translateX(0.5px);
  }
  74% {
    transform: translateX(-0.2px);
  }
  86%,
  100% {
    transform: translateX(0);
  }
}
@keyframes ic-x-circle-cross {
  0%,
  4% {
    transform: translateX(0) rotate(0);
  }
  20% {
    transform: translateX(-1.8px) rotate(-10deg);
  }
  36% {
    transform: translateX(1.9px) rotate(10deg);
  }
  52% {
    transform: translateX(-1.2px) rotate(-6deg);
  }
  68% {
    transform: translateX(0.6px) rotate(3deg);
  }
  82% {
    transform: translateX(-0.2px) rotate(-1deg);
  }
  100% {
    transform: translateX(0) rotate(0);
  }
}

@keyframes ic-ban-bar {
  0% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  30% {
    transform: rotate(-55deg);
    animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5);
  }
  44% {
    transform: rotate(5deg);
    animation-timing-function: ease-out;
  }
  54% {
    transform: rotate(-3deg);
    animation-timing-function: ease-in-out;
  }
  64% {
    transform: rotate(1.2deg);
    animation-timing-function: ease-in-out;
  }
  74%,
  100% {
    transform: rotate(0);
  }
}
@keyframes ic-ban-ring {
  0%,
  42% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(9deg);
  }
  66% {
    transform: rotate(-2deg);
  }
  80%,
  100% {
    transform: rotate(0);
  }
}

@keyframes ic-history-minute {
  0% {
    transform: rotate(0);
    animation-timing-function: ease-out;
  }
  10% {
    transform: rotate(10deg);
    animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
  }
  70% {
    transform: rotate(-374deg);
  }
  78% {
    transform: rotate(-374deg);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  86%,
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes ic-history-hour {
  0% {
    transform: rotate(0);
  }
  10% {
    transform: rotate(3deg);
  }
  70% {
    transform: rotate(-32deg);
  }
  78% {
    transform: rotate(-32deg);
  }
  94%,
  100% {
    transform: rotate(0);
  }
}
@keyframes ic-history-face {
  0% {
    transform: rotate(0);
  }
  10% {
    transform: rotate(5deg);
  }
  52% {
    transform: rotate(-18deg);
  }
  80% {
    transform: rotate(2deg);
  }
  100% {
    transform: rotate(0);
  }
}

@keyframes ic-printer-hum {
  0%,
  6% {
    transform: translateY(0);
  }
  10%,
  22%,
  34%,
  46% {
    transform: translateY(-0.3px);
  }
  16%,
  28%,
  40%,
  52% {
    transform: translateY(0.3px);
  }
  58%,
  100% {
    transform: translateY(0);
  }
}
@keyframes ic-printer-light {
  0%,
  8% {
    opacity: 1;
  }
  14% {
    opacity: 0.2;
  }
  22% {
    opacity: 1;
  }
  34% {
    opacity: 0.2;
  }
  42%,
  100% {
    opacity: 1;
  }
}
@keyframes ic-printer-sheet {
  0%,
  14% {
    transform: scaleY(1);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  24%,
  36% {
    transform: scaleY(1.12);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  46%,
  78% {
    transform: scaleY(1.25);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: scaleY(1);
  }
}
@keyframes ic-printer-print {
  0%,
  14% {
    transform: translateY(-0.6px);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  24%,
  36% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  46%,
  78% {
    transform: translateY(0.6px);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: translateY(-0.6px);
  }
}
@keyframes ic-printer-line-1 {
  0%,
  8% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
  10% {
    opacity: 1;
    stroke-dashoffset: 1;
  }
  22%,
  78% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  94%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}
@keyframes ic-printer-line-2 {
  0%,
  30% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
  32% {
    opacity: 1;
    stroke-dashoffset: 1;
  }
  44%,
  78% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  94%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes ic-qr-code-scan {
  0% {
    opacity: 0;
    transform: translateY(-9.5px);
  }
  8% {
    opacity: 1;
    transform: translateY(-9.5px);
  }
  72% {
    opacity: 1;
    transform: translateY(9.5px);
  }
  82%,
  100% {
    opacity: 0;
    transform: translateY(9.5px);
  }
}
@keyframes ic-qr-code-lock-top {
  0%,
  18% {
    transform: scale(1);
  }
  26% {
    transform: scale(0.8);
  }
  38% {
    transform: scale(1.07);
  }
  50%,
  100% {
    transform: scale(1);
  }
}
@keyframes ic-qr-code-lock-bottom {
  0%,
  55% {
    transform: scale(1);
  }
  63% {
    transform: scale(0.8);
  }
  75% {
    transform: scale(1.07);
  }
  87%,
  100% {
    transform: scale(1);
  }
}
@keyframes ic-qr-code-bits-1 {
  0%,
  46% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  60%,
  100% {
    opacity: 1;
  }
}
@keyframes ic-qr-code-bits-2 {
  0%,
  58% {
    opacity: 1;
  }
  62% {
    opacity: 0.2;
  }
  72%,
  100% {
    opacity: 1;
  }
}

@keyframes ic-wand-stick {
  0% {
    transform: rotate(0);
  }
  22% {
    transform: rotate(-12deg);
  }
  38% {
    transform: rotate(9deg);
  }
  54% {
    transform: rotate(-3deg);
  }
  68% {
    transform: rotate(1deg);
  }
  80%,
  100% {
    transform: rotate(0);
  }
}
@keyframes ic-wand-star {
  0%,
  32% {
    transform: rotate(0) scale(1);
  }
  48% {
    transform: rotate(80deg) scale(1.35);
  }
  64% {
    transform: rotate(94deg) scale(0.94);
  }
  78%,
  100% {
    transform: rotate(90deg) scale(1);
  }
}
@keyframes ic-wand-glint {
  0%,
  36% {
    opacity: 1;
    transform: scale(1);
  }
  46% {
    opacity: 0.3;
    transform: scale(0.4);
  }
  60% {
    opacity: 1;
    transform: scale(1.3);
  }
  74%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes ic-wand-burst {
  0%,
  36% {
    opacity: 0;
    transform: scale(0.5);
  }
  44% {
    opacity: 1;
    transform: scale(0.9);
  }
  66%,
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

@keyframes ic-cursor-pointer {
  0% {
    transform: translate(0, 0) scale(1);
  }
  20% {
    transform: translate(-1px, -1px) scale(1.03);
  }
  34% {
    transform: translate(0.3px, 0.3px) scale(0.86);
  }
  46% {
    transform: translate(0, 0) scale(0.88);
  }
  60% {
    transform: translate(0, 0) scale(1.04);
  }
  74% {
    transform: translate(0, 0) scale(0.99);
  }
  86%,
  100% {
    transform: translate(0, 0) scale(1);
  }
}
@keyframes ic-cursor-click {
  0%,
  30% {
    opacity: 0;
    transform: scale(0.5);
  }
  37% {
    opacity: 1;
    transform: scale(0.85);
  }
  64%,
  100% {
    opacity: 0;
    transform: scale(1.45);
  }
}

/* Motion for the talk and time set (sets/talk.js). What each icon does is in its motion note. */

:where(a, button, label, summary, [role="button"], .ic-play, .ic-host):is(
    :hover,
    :focus-visible
  )
  .ic,
.ic-play .ic {
  &.ic-reply .i-head {
    animation: ic-reply-head 760ms linear;
  }
  &.ic-reply .i-trail {
    transform-origin: 19.5px 19px;
    animation: ic-reply-trail 760ms linear;
  }
  &.ic-reply .i-echo {
    animation: ic-reply-echo 760ms ease-out;
  }

  &.ic-at .i-swirl {
    stroke-dasharray: 1;
    animation: ic-at-write 860ms linear;
  }
  &.ic-at .i-core {
    transform-origin: 12px 12px;
    animation: ic-at-dip 860ms linear;
  }

  &.ic-video .i-rec {
    transform-origin: 6.4px 10.2px;
    animation: ic-video-rec 860ms linear;
  }
  &.ic-video .i-lens {
    transform-origin: 15.5px 12px;
    animation: ic-video-zoom 860ms linear;
  }

  &.ic-megaphone .i-horn {
    transform-origin: 8px 12px;
    animation: ic-megaphone-kick 780ms linear;
  }
  &.ic-megaphone .i-shout {
    transform-origin: 19px 12px;
    animation: ic-megaphone-shout 460ms ease-out 220ms;
  }
  &.ic-megaphone .i-shout-2 {
    animation-delay: 280ms;
  }

  &.ic-alarm .i-body {
    transform-origin: 12px 20px;
    animation: ic-alarm-shiver 860ms linear;
  }
  &.ic-alarm .i-hammer {
    transform-origin: 12px 5.4px;
    animation: ic-alarm-hammer 860ms linear;
  }
  &.ic-alarm .i-bell-l {
    animation: ic-alarm-bell-l 860ms linear;
  }
  &.ic-alarm .i-bell-r {
    animation: ic-alarm-bell-r 860ms linear;
  }

  &.ic-hourglass .i-glass {
    transform-origin: 12px 12px;
    animation: ic-hourglass-flip 980ms linear;
  }
  &.ic-hourglass .i-sand-top {
    transform-origin: 12px 9.6px;
    animation: ic-hourglass-drain 980ms linear;
  }
  &.ic-hourglass .i-sand-pile {
    transform-origin: 12px 18.6px;
    animation: ic-hourglass-fill 980ms linear;
  }
  &.ic-hourglass .i-stream {
    stroke-dasharray: 0 0.28;
    animation: ic-hourglass-stream 980ms linear;
  }

  &.ic-timer .i-crown {
    animation: ic-timer-press 940ms ease-out;
  }
  &.ic-timer .i-hand {
    transform-origin: 12px 13.5px;
    animation: ic-timer-sweep 940ms linear;
  }
  &.ic-timer .i-wedge {
    stroke-dasharray: 1;
    animation: ic-timer-wedge 940ms linear;
  }

  &.ic-repeat .i-track {
    stroke-dasharray: 1 0.32;
    animation: ic-repeat-run 760ms ease-in-out;
  }
  &.ic-repeat .i-track-2 {
    animation-delay: 70ms;
  }
  &.ic-repeat .i-tip {
    animation: ic-repeat-nudge 760ms linear;
  }
  &.ic-repeat .i-tip-2 {
    animation: ic-repeat-nudge-2 760ms linear 70ms;
  }

  &.ic-sun .i-core {
    transform-origin: 12px 12px;
    animation: ic-sun-squint 860ms linear;
  }
  &.ic-sun .i-ray {
    transform-origin: 12px 12px;
    animation: ic-sun-flick 420ms linear 90ms;
  }
  &.ic-sun .i-ray-2 { animation-delay: 135ms; }
  &.ic-sun .i-ray-3 { animation-delay: 180ms; }
  &.ic-sun .i-ray-4 { animation-delay: 225ms; }
  &.ic-sun .i-ray-5 { animation-delay: 270ms; }
  &.ic-sun .i-ray-6 { animation-delay: 315ms; }
  &.ic-sun .i-ray-7 { animation-delay: 360ms; }
  &.ic-sun .i-ray-8 { animation-delay: 405ms; }

  &.ic-cloud .i-puff {
    transform-origin: 12px 18.5px;
    animation: ic-cloud-billow 860ms linear;
  }
  &.ic-cloud .i-wisp {
    animation: ic-cloud-wisp 620ms ease-out 200ms;
  }

  &.ic-bolt .i-strike {
    transform-origin: 10.5px 21.2px;
    animation: ic-bolt-strike 760ms linear;
  }
  &.ic-bolt .i-glow {
    transform-origin: 10.5px 21.2px;
    animation: ic-bolt-glow 760ms linear;
  }
  &.ic-bolt .i-spark {
    transform-origin: 10.5px 21px;
    animation: ic-bolt-spark 420ms ease-out 200ms;
  }

  &.ic-sparkles .i-big {
    transform-origin: 10px 13px;
    animation: ic-sparkles-glint 820ms linear;
  }
  &.ic-sparkles .i-plus {
    transform-origin: 18px 5.5px;
    animation: ic-sparkles-twinkle 560ms var(--swift) 180ms;
  }
  &.ic-sparkles .i-speck {
    transform-origin: 19px 17.5px;
    animation: ic-sparkles-wink 500ms linear 300ms;
  }
  &.ic-sparkles .i-glint {
    transform-origin: 4.5px 4.7px;
    animation: ic-sparkles-new 480ms ease-out 360ms;
  }
}

/* reply */
@keyframes ic-reply-head {
  0% { transform: translateX(0); animation-timing-function: ease-out; }
  20% { transform: translateX(1.4px); animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.4); }
  42% { transform: translateX(-2.2px); animation-timing-function: ease-out; }
  62% { transform: translateX(0.5px); animation-timing-function: ease-in-out; }
  80% { transform: translateX(-0.15px); }
  100% { transform: translateX(0); }
}
@keyframes ic-reply-trail {
  0% { transform: scaleX(1); animation-timing-function: ease-out; }
  20% { transform: scaleX(0.907); animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.4); }
  42% { transform: scaleX(1.147); animation-timing-function: ease-out; }
  62% { transform: scaleX(0.967); animation-timing-function: ease-in-out; }
  80% { transform: scaleX(1.01); }
  100% { transform: scaleX(1); }
}
@keyframes ic-reply-echo {
  0%, 38% { opacity: 0; transform: translateX(-2px); }
  42% { opacity: 0.4; transform: translateX(-2.2px); }
  80%, 100% { opacity: 0; transform: translateX(-5.5px); }
}

/* at */
@keyframes ic-at-write {
  0% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(0.4, 0, 0.8, 0.6); }
  30% { stroke-dashoffset: 0.8; animation-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1); }
  100% { stroke-dashoffset: 0; }
}
@keyframes ic-at-dip {
  0%, 18% { transform: scale(1); animation-timing-function: ease-out; }
  32% { transform: scale(0.78); animation-timing-function: ease-in-out; }
  52% { transform: scale(1.1); animation-timing-function: ease-in-out; }
  70% { transform: scale(0.97); }
  86%, 100% { transform: scale(1); }
}

/* video */
@keyframes ic-video-rec {
  0% { opacity: 1; transform: scale(1); }
  8% { transform: scale(1.3); }
  16%, 22% { opacity: 1; transform: scale(1); }
  23%, 38% { opacity: 0; }
  39%, 52% { opacity: 1; }
  53%, 68% { opacity: 0; }
  69%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes ic-video-zoom {
  0% { transform: none; animation-timing-function: ease-out; }
  14% { transform: translateX(-0.6px) scaleY(0.92); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  42% { transform: translateX(1.8px) scaleY(1.16); animation-timing-function: ease-in-out; }
  58% { transform: translateX(1.5px) scaleY(1.12); animation-timing-function: ease-in-out; }
  80% { transform: translateX(-0.25px); animation-timing-function: ease-in-out; }
  100% { transform: none; }
}

/* megaphone */
@keyframes ic-megaphone-kick {
  0% { transform: none; animation-timing-function: ease-out; }
  22% { transform: rotate(6deg); animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1); }
  38% { transform: translateX(-0.8px) rotate(-7deg); animation-timing-function: ease-in-out; }
  58% { transform: translateX(-0.3px) rotate(-5deg); animation-timing-function: ease-in-out; }
  80% { transform: rotate(1.2deg); animation-timing-function: ease-in-out; }
  100% { transform: none; }
}
@keyframes ic-megaphone-shout {
  0% { opacity: 0; transform: translateX(-1.5px) scale(0.6); }
  25% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 0; transform: translateX(0.8px) scale(1.25); }
}

/* alarm */
@keyframes ic-alarm-shiver {
  0%, 8% { transform: none; }
  14%, 30%, 46%, 62% { transform: translateY(-0.5px) rotate(-3deg); }
  22%, 38%, 54%, 70% { transform: translateY(-0.5px) rotate(3deg); }
  80% { transform: rotate(-0.8deg); }
  90%, 100% { transform: none; }
}
@keyframes ic-alarm-hammer {
  0% { opacity: 0; transform: rotate(0); }
  8% { opacity: 1; }
  14%, 30%, 46%, 62% { transform: rotate(-42deg); }
  22%, 38%, 54%, 70% { transform: rotate(42deg); }
  78% { opacity: 1; transform: rotate(0); }
  88%, 100% { opacity: 0; transform: rotate(0); }
}
@keyframes ic-alarm-bell-l {
  0%, 10% { transform: none; }
  14%, 30%, 46%, 62% { transform: translate(-0.8px, -1.1px); }
  22%, 38%, 54%, 70% { transform: none; }
  100% { transform: none; }
}
@keyframes ic-alarm-bell-r {
  0%, 14% { transform: none; }
  22%, 38%, 54%, 70% { transform: translate(0.8px, -1.1px); }
  30%, 46%, 62%, 78% { transform: none; }
  100% { transform: none; }
}

/* hourglass: ends turned over, which looks the same as the rest pose */
@keyframes ic-hourglass-drain {
  0% { transform: scale(1); animation-timing-function: ease-in-out; }
  50%, 100% { transform: scale(0.15, 0); }
}
@keyframes ic-hourglass-fill {
  0% { opacity: 1; transform: scale(0.2, 0); animation-timing-function: ease-in-out; }
  50%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes ic-hourglass-stream {
  0% { opacity: 0; stroke-dashoffset: 0; }
  6% { opacity: 1; }
  46% { opacity: 1; }
  52% { opacity: 0; stroke-dashoffset: -0.84; }
  100% { opacity: 0; stroke-dashoffset: -0.84; }
}
@keyframes ic-hourglass-flip {
  0%, 50% { transform: rotate(0); animation-timing-function: ease-in-out; }
  60% { transform: rotate(-12deg); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
  86% { transform: rotate(192deg); animation-timing-function: ease-in-out; }
  100% { transform: rotate(180deg); }
}

/* timer */
@keyframes ic-timer-press {
  0% { transform: none; }
  8% { transform: translateY(1.3px); }
  18%, 100% { transform: none; }
}
@keyframes ic-timer-sweep {
  0%, 12% { transform: rotate(0); animation-timing-function: cubic-bezier(0.45, 0, 0.35, 1); }
  70% { transform: rotate(372deg); animation-timing-function: ease-in-out; }
  84% { transform: rotate(356deg); animation-timing-function: ease-in-out; }
  100% { transform: rotate(360deg); }
}
@keyframes ic-timer-wedge {
  0%, 12% { opacity: 1; stroke-dashoffset: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.35, 1); }
  68% { opacity: 1; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}

/* repeat */
@keyframes ic-repeat-run {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -1.32; }
}
@keyframes ic-repeat-nudge {
  0%, 55% { transform: none; animation-timing-function: ease-out; }
  72% { transform: translateX(1.4px); animation-timing-function: ease-in-out; }
  88% { transform: translateX(-0.3px); animation-timing-function: ease-in-out; }
  100% { transform: none; }
}
@keyframes ic-repeat-nudge-2 {
  0%, 55% { transform: none; animation-timing-function: ease-out; }
  72% { transform: translateX(-1.4px); animation-timing-function: ease-in-out; }
  88% { transform: translateX(0.3px); animation-timing-function: ease-in-out; }
  100% { transform: none; }
}

/* sun */
@keyframes ic-sun-squint {
  0% { transform: scale(1); animation-timing-function: ease-out; }
  12% { transform: scale(0.84); animation-timing-function: ease-in-out; }
  40% { transform: scale(1.1); animation-timing-function: ease-in-out; }
  70% { transform: scale(1.04); animation-timing-function: ease-in-out; }
  100% { transform: scale(1); }
}
@keyframes ic-sun-flick {
  0% { transform: scale(1); animation-timing-function: ease-out; }
  25% { transform: scale(0.88); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  55% { transform: scale(1.28); animation-timing-function: ease-in-out; }
  100% { transform: scale(1); }
}

/* cloud */
@keyframes ic-cloud-billow {
  0% { transform: none; animation-timing-function: ease-out; }
  18% { transform: scale(1.03, 0.94); animation-timing-function: ease-in-out; }
  42% { transform: translateY(-0.6px) scale(0.97, 1.07); animation-timing-function: ease-in-out; }
  64% { transform: scale(1.015, 0.98); animation-timing-function: ease-in-out; }
  82% { transform: scale(0.995, 1.01); }
  100% { transform: none; }
}
@keyframes ic-cloud-wisp {
  0% { opacity: 0; transform: translate(-1.2px, 1.2px); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(1.8px, -1.4px); }
}

/* bolt */
@keyframes ic-bolt-strike {
  0% { transform: none; animation-timing-function: ease-out; }
  20% { transform: translateY(-1.6px) scaleY(1.04); animation-timing-function: cubic-bezier(0.6, 0, 1, 0.6); }
  30% { transform: translateY(0.4px) scaleY(0.9); animation-timing-function: ease-out; }
  46% { transform: translateY(-0.3px) scaleY(1.02); animation-timing-function: ease-in-out; }
  64%, 100% { transform: none; }
}
@keyframes ic-bolt-glow {
  0%, 28% { opacity: 0; transform: none; }
  30% { opacity: 1; transform: translateY(0.4px) scaleY(0.9); }
  38% { opacity: 0.2; transform: translateY(0) scaleY(1); }
  44% { opacity: 1; }
  70%, 100% { opacity: 0; transform: none; }
}
@keyframes ic-bolt-spark {
  0% { opacity: 1; transform: scale(0.5); }
  60% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.4); }
}

/* sparkles */
@keyframes ic-sparkles-glint {
  0% { transform: none; animation-timing-function: ease-out; }
  22% { transform: scale(0.72, 1.28); animation-timing-function: ease-in-out; }
  46% { transform: scale(1.22, 0.8); animation-timing-function: ease-in-out; }
  68% { transform: scale(0.95, 1.05); animation-timing-function: ease-in-out; }
  84% { transform: scale(1.02, 0.98); }
  100% { transform: none; }
}
@keyframes ic-sparkles-twinkle {
  0% { transform: rotate(0) scale(1); }
  30% { transform: rotate(0) scale(0.2); }
  70% { transform: rotate(80deg) scale(1.3); }
  100% { transform: rotate(90deg) scale(1); }
}
@keyframes ic-sparkles-wink {
  0% { opacity: 1; transform: scale(1); animation-timing-function: ease-in; }
  30% { opacity: 1; transform: scale(0); animation-timing-function: ease-out; }
  65% { transform: scale(1.5); animation-timing-function: ease-in-out; }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes ic-sparkles-new {
  0% { opacity: 0; transform: scale(0) rotate(-45deg); }
  40% { opacity: 1; transform: scale(1.1) rotate(0); }
  100% { opacity: 0; transform: scale(0.3) rotate(20deg); }
}

/* Motion for People and feelings (sets/people.js). */

:where(a, button, label, summary, [role="button"], .ic-play, .ic-host):is(
    :hover,
    :focus-visible
  )
  .ic,
.ic-play .ic {
  &.ic-user .i-head {
    animation: ic-user-nod 720ms ease-in-out;
  }
  &.ic-user .i-body {
    transform-origin: 12px 20px;
    animation: ic-user-dip 720ms ease-in-out;
  }

  &.ic-user-plus .i-person {
    transform-origin: 9px 20px;
    animation: ic-user-plus-lean 820ms ease-in-out;
  }
  &.ic-user-plus .i-cross {
    transform-origin: 19px 11px;
    animation: ic-user-plus-spin 860ms linear;
  }

  &.ic-user-check .i-tick {
    stroke-dasharray: 1;
    animation: ic-user-check-redraw 860ms linear;
  }
  &.ic-user-check .i-person {
    transform-origin: 9px 20px;
    animation: ic-user-check-proud 860ms ease-in-out;
  }

  &.ic-contact .i-scan {
    animation: ic-contact-scan 900ms linear;
  }
  &.ic-contact .i-line {
    stroke-dasharray: 1;
  }
  &.ic-contact .i-line-1 {
    animation: ic-contact-line-1 900ms ease-in-out;
  }
  &.ic-contact .i-line-2 {
    animation: ic-contact-line-2 900ms ease-in-out;
  }
  &.ic-contact .i-photo {
    animation: ic-contact-photo 900ms ease-in-out;
  }

  &.ic-smile .i-face {
    transform-origin: 12px 12px;
    animation: ic-smile-tilt 860ms ease-in-out;
  }
  &.ic-smile .i-wink {
    transform-box: fill-box;
    transform-origin: center;
    animation: ic-smile-wink 860ms ease-in-out;
  }
  &.ic-smile .i-mouth {
    transform-origin: 12px 14.2px;
    animation: ic-smile-grin 860ms var(--swift);
  }

  &.ic-frown .i-eyes {
    animation: ic-frown-droop 960ms ease-in-out;
  }
  &.ic-frown .i-mouth {
    animation: ic-frown-wobble 960ms linear;
  }
  &.ic-frown .i-tear {
    transform-box: fill-box;
    transform-origin: 50% 0%;
    animation: ic-frown-tear 960ms linear;
  }

  /* thumbs-down is thumbs-up drawn upside down, so the same motion plays mirrored. */
  &.ic-thumbs-up .i-arm,
  &.ic-thumbs-down .i-arm {
    transform-origin: 5px 20.5px;
    animation: ic-thumbs-pump 820ms ease-in-out;
  }
  &.ic-thumbs-up .i-hand,
  &.ic-thumbs-down .i-hand {
    transform-origin: 6.5px 20.5px;
    animation: ic-thumbs-flex 820ms ease-in-out;
  }
  &.ic-thumbs-up .i-burst,
  &.ic-thumbs-down .i-burst {
    transform-box: fill-box;
    transform-origin: 0% 100%;
    animation: ic-thumbs-burst 820ms ease-out;
  }

  &.ic-award .i-tail-l {
    transform-origin: 8.6px 13.4px;
    animation: ic-award-flutter-l 900ms ease-in-out;
  }
  &.ic-award .i-tail-r {
    transform-origin: 15.4px 13.4px;
    animation: ic-award-flutter-r 900ms ease-in-out;
  }
  &.ic-award .i-boss {
    transform-box: fill-box;
    transform-origin: center;
    animation: ic-award-boss 900ms ease-out;
  }
  &.ic-award .i-glint {
    transform-box: fill-box;
    transform-origin: center;
    animation: ic-award-glint 900ms ease-out;
  }

  &.ic-trophy .i-cup {
    transform-origin: 12px 20.5px;
    animation: ic-trophy-hoist 900ms linear;
  }
  &.ic-trophy .i-bit {
    transform-box: fill-box;
    transform-origin: center;
  }
  &.ic-trophy .i-bit-1 {
    animation: ic-trophy-bit-1 900ms linear;
  }
  &.ic-trophy .i-bit-2 {
    animation: ic-trophy-bit-2 900ms linear;
  }
  &.ic-trophy .i-bit-3 {
    animation: ic-trophy-bit-3 900ms linear;
  }

  &.ic-crown .i-crown {
    transform-origin: 12px 17.5px;
    animation: ic-crown-hop 900ms linear;
  }
  &.ic-crown .i-band {
    animation: ic-crown-band 900ms ease-out;
  }
  &.ic-crown .i-jewel {
    transform-box: fill-box;
    transform-origin: center;
    animation: ic-crown-jewel 900ms ease-out;
  }

  &.ic-gem .i-facets {
    transform-origin: 12px 12px;
    animation: ic-gem-turn 900ms ease-in-out;
  }
  &.ic-gem .i-flash {
    transform-box: fill-box;
    transform-origin: 100% 100%;
    animation: ic-gem-flash 900ms ease-out;
  }
}

@keyframes ic-user-nod {
  0%,
  84%,
  100% {
    transform: none;
  }
  18% {
    transform: translateY(-0.6px);
  }
  44% {
    transform: translateY(1.2px);
  }
  66% {
    transform: translateY(-0.2px);
  }
}
@keyframes ic-user-dip {
  0%,
  28%,
  84%,
  100% {
    transform: none;
  }
  46% {
    transform: scaleY(0.92);
  }
  66% {
    transform: scaleY(1.02);
  }
}

@keyframes ic-user-plus-lean {
  0%,
  78%,
  100% {
    transform: none;
  }
  24% {
    transform: translateX(-0.8px) rotate(-5deg);
  }
  56% {
    transform: translateX(0.2px) rotate(1deg);
  }
}
@keyframes ic-user-plus-spin {
  0% {
    opacity: 1;
    transform: none;
    animation-timing-function: ease-in;
  }
  16% {
    opacity: 0;
    transform: rotate(-30deg) scale(0.2);
  }
  24% {
    opacity: 1;
    transform: rotate(-30deg) scale(0.2);
    animation-timing-function: cubic-bezier(0.3, 1.6, 0.5, 1);
  }
  64%,
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes ic-user-check-redraw {
  0% {
    stroke-dashoffset: 0;
    animation-timing-function: ease-in;
  }
  20%,
  28% {
    stroke-dashoffset: 1;
    animation-timing-function: ease-out;
  }
  58%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes ic-user-check-proud {
  0%,
  48%,
  90%,
  100% {
    transform: none;
  }
  62% {
    transform: scaleY(1.07);
  }
  76% {
    transform: scaleY(0.98);
  }
}

@keyframes ic-contact-scan {
  0% {
    opacity: 0;
    transform: none;
  }
  8% {
    opacity: 1;
    transform: translateY(0.4px);
  }
  78% {
    opacity: 1;
    transform: translateY(11px);
  }
  90%,
  100% {
    opacity: 0;
    transform: translateY(11.5px);
  }
}
@keyframes ic-contact-line-1 {
  0%,
  22% {
    stroke-dashoffset: 0;
  }
  30%,
  34% {
    stroke-dashoffset: 1;
  }
  52%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes ic-contact-line-2 {
  0%,
  46% {
    stroke-dashoffset: 0;
  }
  54%,
  58% {
    stroke-dashoffset: 1;
  }
  76%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes ic-contact-photo {
  0%,
  30%,
  56%,
  100% {
    transform: none;
  }
  42% {
    transform: translateY(-0.6px);
  }
}

@keyframes ic-smile-tilt {
  0%,
  100% {
    transform: none;
  }
  24%,
  68% {
    transform: rotate(-9deg);
  }
  86% {
    transform: rotate(1.5deg);
  }
}
@keyframes ic-smile-wink {
  0%,
  26%,
  62%,
  100% {
    transform: none;
  }
  34%,
  54% {
    transform: scale(1.35, 0.2);
  }
}
@keyframes ic-smile-grin {
  0%,
  22%,
  100% {
    transform: none;
  }
  38%,
  64% {
    transform: scale(1.18, 1.14);
  }
}

@keyframes ic-frown-droop {
  0%,
  100% {
    transform: none;
  }
  18%,
  72% {
    transform: translateY(0.7px);
  }
}
@keyframes ic-frown-wobble {
  0%,
  16%,
  56%,
  100% {
    transform: none;
  }
  24% {
    transform: translate(-0.4px, 0.3px);
  }
  32% {
    transform: translate(0.4px, 0.3px);
  }
  40% {
    transform: translate(-0.3px, 0.3px);
  }
  48% {
    transform: translate(0.2px, 0.2px);
  }
}
@keyframes ic-frown-tear {
  0%,
  18% {
    opacity: 0;
    transform: scale(0.4);
    animation-timing-function: ease-out;
  }
  30% {
    opacity: 1;
    transform: none;
    animation-timing-function: ease-in-out;
  }
  44% {
    transform: translateY(0.6px) scale(0.95, 1.1);
    animation-timing-function: cubic-bezier(0.5, 0, 1, 1);
  }
  78% {
    opacity: 1;
    transform: translateY(4px);
    animation-timing-function: ease-out;
  }
  92%,
  100% {
    opacity: 0;
    transform: translateY(4.6px);
  }
}

@keyframes ic-thumbs-pump {
  0% {
    transform: none;
  }
  18% {
    transform: translateY(1px) rotate(5deg);
  }
  42% {
    transform: translateY(-1.6px) rotate(-6deg);
  }
  60% {
    transform: translateY(0.3px) rotate(1deg);
  }
  76%,
  100% {
    transform: none;
  }
}
@keyframes ic-thumbs-flex {
  0%,
  26%,
  64%,
  100% {
    transform: none;
  }
  42% {
    transform: rotate(-5deg);
  }
}
@keyframes ic-thumbs-burst {
  0%,
  36% {
    opacity: 0;
    transform: scale(0.5);
  }
  46% {
    opacity: 1;
    transform: none;
  }
  72%,
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}

@keyframes ic-award-flutter-l {
  0%,
  100% {
    transform: none;
  }
  18% {
    transform: rotate(6deg);
  }
  38% {
    transform: rotate(-5deg);
  }
  58% {
    transform: rotate(3deg);
  }
  78% {
    transform: rotate(-1deg);
  }
}
@keyframes ic-award-flutter-r {
  0%,
  100% {
    transform: none;
  }
  24% {
    transform: rotate(-4deg);
  }
  44% {
    transform: rotate(6deg);
  }
  64% {
    transform: rotate(-3deg);
  }
  84% {
    transform: rotate(1deg);
  }
}
@keyframes ic-award-boss {
  0%,
  8%,
  52%,
  100% {
    transform: none;
  }
  22% {
    transform: scale(1.5);
  }
  36% {
    transform: scale(0.9);
  }
}
@keyframes ic-award-glint {
  0%,
  18% {
    opacity: 0;
    transform: translate(-3px, 2.4px) rotate(0) scale(0.3);
  }
  40% {
    opacity: 1;
    transform: translate(0, 0) rotate(45deg) scale(1.1);
  }
  72%,
  100% {
    opacity: 0;
    transform: translate(0, 0) rotate(90deg) scale(0.5);
  }
}

@keyframes ic-trophy-hoist {
  0% {
    transform: none;
    animation-timing-function: ease-out;
  }
  12% {
    transform: translateY(0) rotate(0) scale(1.04, 0.94);
    animation-timing-function: ease-out;
  }
  34% {
    transform: translateY(-1.8px) rotate(-5deg) scale(1);
    animation-timing-function: ease-in-out;
  }
  56% {
    transform: translateY(-1.8px) rotate(4deg) scale(1);
    animation-timing-function: ease-in;
  }
  72% {
    transform: translateY(0) rotate(0) scale(1.02, 0.96);
    animation-timing-function: ease-out;
  }
  84%,
  100% {
    transform: none;
  }
}
@keyframes ic-trophy-bit-1 {
  0%,
  26% {
    opacity: 0;
    transform: none;
    animation-timing-function: ease-out;
  }
  30% {
    opacity: 1;
  }
  48% {
    transform: translate(-4px, -3.2px) rotate(-120deg);
    animation-timing-function: ease-in;
  }
  88% {
    opacity: 1;
    transform: translate(-6px, 1px) rotate(-320deg);
  }
  100% {
    opacity: 0;
    transform: translate(-6.3px, 1.8px) rotate(-360deg);
  }
}
@keyframes ic-trophy-bit-2 {
  0%,
  30% {
    opacity: 0;
    transform: none;
    animation-timing-function: ease-out;
  }
  34% {
    opacity: 1;
  }
  52% {
    transform: translate(0.8px, -3.6px) rotate(140deg);
    animation-timing-function: ease-in;
  }
  88% {
    opacity: 1;
    transform: translate(2px, 0) rotate(330deg);
  }
  100% {
    opacity: 0;
    transform: translate(2.2px, 0.8px) rotate(380deg);
  }
}
@keyframes ic-trophy-bit-3 {
  0%,
  28% {
    opacity: 0;
    transform: none;
    animation-timing-function: ease-out;
  }
  32% {
    opacity: 1;
  }
  50% {
    transform: translate(4px, -3.2px) rotate(120deg);
    animation-timing-function: ease-in;
  }
  88% {
    opacity: 1;
    transform: translate(6px, 1px) rotate(300deg);
  }
  100% {
    opacity: 0;
    transform: translate(6.3px, 1.8px) rotate(340deg);
  }
}

@keyframes ic-crown-hop {
  0% {
    transform: none;
    animation-timing-function: ease-out;
  }
  12% {
    transform: translateY(0.5px) rotate(0) scaleY(0.92);
    animation-timing-function: ease-out;
  }
  38% {
    transform: translateY(-3.2px) rotate(-8deg) scaleY(1);
    animation-timing-function: ease-in;
  }
  58% {
    transform: none;
    animation-timing-function: ease-out;
  }
  65% {
    transform: translateY(0.4px) rotate(0) scaleY(0.94);
    animation-timing-function: ease-in-out;
  }
  77% {
    transform: translateY(-0.5px);
    animation-timing-function: ease-in-out;
  }
  88%,
  100% {
    transform: none;
  }
}
@keyframes ic-crown-band {
  0%,
  56%,
  78%,
  100% {
    transform: none;
  }
  65% {
    transform: translateY(0.6px);
  }
}
@keyframes ic-crown-jewel {
  0%,
  58%,
  92%,
  100% {
    transform: none;
  }
  68% {
    transform: scale(1.5);
  }
  80% {
    transform: scale(0.9);
  }
}

@keyframes ic-gem-turn {
  0% {
    transform: none;
  }
  12% {
    transform: scaleX(1.1);
  }
  62% {
    transform: scaleX(-1.05);
  }
  76%,
  100% {
    transform: scaleX(-1);
  }
}
@keyframes ic-gem-flash {
  0%,
  36% {
    opacity: 0;
    transform: scale(0.4);
  }
  48% {
    opacity: 1;
    transform: none;
  }
  74%,
  100% {
    opacity: 0;
    transform: scale(1.4);
  }
}

/* Motion for Media and sound (sets/media.js). What each icon does is in its motion note. */

:where(a, button, label, summary, [role="button"], .ic-play, .ic-host):is(
    :hover,
    :focus-visible
  )
  .ic,
.ic-play .ic {
  &.ic-play .i-tri {
    transform-origin: 7.5px 12px;
    animation: ic-play-go 720ms linear;
  }
  &.ic-play .i-ghost {
    animation: ic-play-ghost 720ms ease-out;
  }

  &.ic-pause .i-bar {
    transform-origin: 8px 19.5px;
    animation: ic-pause-press 640ms linear;
  }
  &.ic-pause .i-bar-2 {
    transform-origin: 16px 19.5px;
    animation-delay: 110ms;
  }

  &.ic-stop .i-block {
    transform-origin: 12px 19px;
    animation: ic-stop-skid 780ms linear;
  }
  &.ic-stop .i-skid {
    animation: ic-stop-marks 780ms ease-out;
  }

  &.ic-skip-forward .i-tri {
    transform-origin: 15.3px 12px;
    animation: ic-skip-forward-dart 720ms linear;
  }
  &.ic-skip-forward .i-bar {
    animation: ic-skip-forward-knock 720ms linear;
  }
  &.ic-skip-back .i-tri {
    transform-origin: 8.7px 12px;
    animation: ic-skip-back-dart 720ms linear;
  }
  &.ic-skip-back .i-bar {
    animation: ic-skip-back-knock 720ms linear;
  }

  &.ic-shuffle .i-strand {
    transform-origin: 3px 17.5px;
    animation: ic-shuffle-riffle 780ms linear;
  }
  &.ic-shuffle .i-strand-2 {
    transform-origin: 3px 6.5px;
    animation: ic-shuffle-riffle-2 780ms linear 60ms;
  }

  &.ic-volume .i-cone {
    transform-origin: 12.5px 12px;
    animation: ic-volume-thump 780ms linear;
  }
  &.ic-volume .i-wave {
    transform-origin: 12px 12px;
    animation: ic-volume-swell 520ms linear 80ms;
  }
  &.ic-volume .i-wave-2 {
    animation-delay: 170ms;
  }
  &.ic-volume .i-wave-3 {
    animation: ic-volume-extra 480ms ease-out 280ms;
  }

  &.ic-mute .i-cross {
    transform-origin: 18.5px 12px;
    animation: ic-mute-open 720ms linear;
  }
  &.ic-mute .i-cross-2 {
    animation-name: ic-mute-open-2;
  }
  &.ic-mute .i-peek {
    animation: ic-mute-peek 720ms linear;
  }

  &.ic-music .i-note {
    animation: ic-music-bob 820ms linear;
  }
  &.ic-music .i-note-2 {
    animation-name: ic-music-bob-2;
  }
  &.ic-music .i-beam {
    transform-origin: 14.5px 6px;
    animation: ic-music-seesaw 820ms linear;
  }
  &.ic-music .i-float {
    animation: ic-music-float 640ms ease-out 180ms;
  }

  /* Ends one hole further on, which looks the same as the rest pose. */
  &.ic-film .i-holes {
    animation: ic-film-advance 780ms linear;
  }
  &.ic-film .i-last {
    animation: ic-film-out 780ms linear;
  }
  &.ic-film .i-next {
    animation: ic-film-in 780ms linear;
  }
  &.ic-film .i-flicker {
    animation: ic-film-flicker 780ms steps(1);
  }

  &.ic-radio .i-antenna {
    transform-origin: 7.5px 8.5px;
    animation: ic-radio-sway 860ms linear;
  }
  &.ic-radio .i-signal {
    animation: ic-radio-signal 860ms steps(1);
  }
  &.ic-radio .i-knob {
    transform-origin: 16px 14.5px;
    animation: ic-radio-tune 860ms linear 60ms;
  }
}

/* play */
@keyframes ic-play-go {
  0% { transform: none; animation-timing-function: ease-out; }
  20% { transform: translateX(-1px) scaleX(0.9); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  42% { transform: translateX(1.2px) scaleX(1.05); animation-timing-function: ease-in-out; }
  64% { transform: translateX(-0.25px); animation-timing-function: ease-in-out; }
  100% { transform: none; }
}
@keyframes ic-play-ghost {
  0%, 36% { opacity: 0; transform: translateX(1px); }
  42% { opacity: 1; transform: translateX(1.2px); }
  90%, 100% { opacity: 0; transform: translateX(5px); }
}

/* pause */
@keyframes ic-pause-press {
  0% { transform: none; animation-timing-function: ease-in; }
  25% { transform: scaleY(0.84); animation-timing-function: ease-out; }
  55% { transform: scaleY(1.05); animation-timing-function: ease-in-out; }
  78% { transform: scaleY(0.99); }
  100% { transform: none; }
}

/* stop */
@keyframes ic-stop-skid {
  0% { transform: none; animation-timing-function: ease-out; }
  18% { transform: translateX(-1.2px); animation-timing-function: cubic-bezier(0.5, 0, 0.7, 0.4); }
  34% { transform: translateX(1.4px) skewX(-14deg); animation-timing-function: ease-out; }
  52% { transform: translateX(0.6px) skewX(5deg); animation-timing-function: ease-in-out; }
  70% { transform: translateX(0.1px) skewX(-1.5deg); animation-timing-function: ease-in-out; }
  100% { transform: none; }
}
@keyframes ic-stop-marks {
  0%, 26% { opacity: 0; transform: translateX(1.5px); }
  36% { opacity: 1; transform: translateX(0.8px); }
  80%, 100% { opacity: 0; transform: translateX(-1px); }
}

/* skip-forward / skip-back */
@keyframes ic-skip-forward-dart {
  0% { transform: none; animation-timing-function: ease-out; }
  16% { transform: translateX(-1.2px); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5); }
  30% { transform: translateX(2.4px) scaleX(0.82); animation-timing-function: ease-out; }
  40% { transform: translateX(2.4px) scaleX(1.04); animation-timing-function: ease-in-out; }
  62% { transform: translateX(-0.3px); animation-timing-function: ease-in-out; }
  100% { transform: none; }
}
@keyframes ic-skip-forward-knock {
  0%, 28% { transform: none; animation-timing-function: ease-out; }
  42% { transform: translateX(2.4px); animation-timing-function: ease-in-out; }
  56% { transform: translateX(2px); animation-timing-function: ease-in-out; }
  80% { transform: translateX(-0.3px); animation-timing-function: ease-in-out; }
  100% { transform: none; }
}
@keyframes ic-skip-back-dart {
  0% { transform: none; animation-timing-function: ease-out; }
  16% { transform: translateX(1.2px); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5); }
  30% { transform: translateX(-2.4px) scaleX(0.82); animation-timing-function: ease-out; }
  40% { transform: translateX(-2.4px) scaleX(1.04); animation-timing-function: ease-in-out; }
  62% { transform: translateX(0.3px); animation-timing-function: ease-in-out; }
  100% { transform: none; }
}
@keyframes ic-skip-back-knock {
  0%, 28% { transform: none; animation-timing-function: ease-out; }
  42% { transform: translateX(-2.4px); animation-timing-function: ease-in-out; }
  56% { transform: translateX(-2px); animation-timing-function: ease-in-out; }
  80% { transform: translateX(0.3px); animation-timing-function: ease-in-out; }
  100% { transform: none; }
}

/* shuffle */
@keyframes ic-shuffle-riffle {
  0% { transform: none; animation-timing-function: ease-in-out; }
  30% { transform: skewY(6deg); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  55% { transform: skewY(-4.5deg); animation-timing-function: ease-in-out; }
  76% { transform: skewY(1.2deg); animation-timing-function: ease-in-out; }
  100% { transform: none; }
}
@keyframes ic-shuffle-riffle-2 {
  0% { transform: none; animation-timing-function: ease-in-out; }
  30% { transform: skewY(-6deg); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  55% { transform: skewY(4.5deg); animation-timing-function: ease-in-out; }
  76% { transform: skewY(-1.2deg); animation-timing-function: ease-in-out; }
  100% { transform: none; }
}

/* volume */
@keyframes ic-volume-thump {
  0% { transform: none; animation-timing-function: ease-out; }
  12% { transform: scale(0.92); animation-timing-function: ease-out; }
  26% { transform: scale(1.06); animation-timing-function: ease-in-out; }
  44% { transform: scale(0.98); animation-timing-function: ease-in-out; }
  62%, 100% { transform: none; }
}
@keyframes ic-volume-swell {
  0% { transform: none; animation-timing-function: ease-out; }
  20% { transform: scale(0.9); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  50% { transform: scale(1.14); animation-timing-function: ease-in-out; }
  78% { transform: scale(0.98); }
  100% { transform: none; }
}
@keyframes ic-volume-extra {
  0% { opacity: 0; transform: translateX(-2.5px); }
  40% { opacity: 1; transform: translateX(-0.5px); }
  100% { opacity: 0; transform: translateX(1px); }
}

/* mute */
@keyframes ic-mute-open {
  0% { transform: none; animation-timing-function: ease-out; }
  28% { transform: rotate(-24deg) scale(0.9); animation-timing-function: cubic-bezier(0.6, 0, 1, 0.6); }
  40% { transform: rotate(6deg) scale(1.08); animation-timing-function: ease-out; }
  58% { transform: rotate(-2deg); animation-timing-function: ease-in-out; }
  100% { transform: none; }
}
@keyframes ic-mute-open-2 {
  0% { transform: none; animation-timing-function: ease-out; }
  28% { transform: rotate(24deg) scale(0.9); animation-timing-function: cubic-bezier(0.6, 0, 1, 0.6); }
  40% { transform: rotate(-6deg) scale(1.08); animation-timing-function: ease-out; }
  58% { transform: rotate(2deg); animation-timing-function: ease-in-out; }
  100% { transform: none; }
}
@keyframes ic-mute-peek {
  0%, 8% { opacity: 0; transform: translateX(-1.5px); }
  26% { opacity: 1; transform: translateX(0.6px); }
  38% { opacity: 1; transform: translateX(0.8px); }
  42%, 100% { opacity: 0; transform: translateX(0.8px); }
}

/* music */
@keyframes ic-music-bob {
  0% { transform: none; animation-timing-function: ease-in-out; }
  20% { transform: translateY(-1.2px); animation-timing-function: ease-in-out; }
  45% { transform: translateY(1.2px); animation-timing-function: ease-in-out; }
  68% { transform: translateY(-0.4px); animation-timing-function: ease-in-out; }
  86%, 100% { transform: none; }
}
@keyframes ic-music-bob-2 {
  0% { transform: none; animation-timing-function: ease-in-out; }
  20% { transform: translateY(1.2px); animation-timing-function: ease-in-out; }
  45% { transform: translateY(-1.2px); animation-timing-function: ease-in-out; }
  68% { transform: translateY(0.4px); animation-timing-function: ease-in-out; }
  86%, 100% { transform: none; }
}
@keyframes ic-music-seesaw {
  0% { transform: none; animation-timing-function: ease-in-out; }
  20% { transform: rotate(12.2deg); animation-timing-function: ease-in-out; }
  45% { transform: rotate(-12.2deg); animation-timing-function: ease-in-out; }
  68% { transform: rotate(4deg); animation-timing-function: ease-in-out; }
  86%, 100% { transform: none; }
}
@keyframes ic-music-float {
  0% { opacity: 0; transform: translate(0, 1px) rotate(0); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(1.5px, -5px) rotate(12deg); }
}

/* film */
@keyframes ic-film-advance {
  0%, 16% { transform: none; animation-timing-function: cubic-bezier(0.6, 0, 0.3, 1); }
  42% { transform: translateY(5px); animation-timing-function: ease-in-out; }
  56%, 100% { transform: translateY(4.5px); }
}
@keyframes ic-film-out {
  0%, 20% { opacity: 1; }
  38%, 100% { opacity: 0; }
}
@keyframes ic-film-in {
  0%, 20% { opacity: 0; }
  38%, 100% { opacity: 1; }
}
@keyframes ic-film-flicker {
  0%, 20% { opacity: 0; }
  26% { opacity: 1; }
  32% { opacity: 0.3; }
  38% { opacity: 0.9; }
  48% { opacity: 0; }
  54% { opacity: 0.6; }
  60%, 100% { opacity: 0; }
}

/* radio */
@keyframes ic-radio-sway {
  0% { transform: none; animation-timing-function: ease-in-out; }
  18% { transform: rotate(9deg); animation-timing-function: ease-in-out; }
  40% { transform: rotate(-7deg); animation-timing-function: ease-in-out; }
  60% { transform: rotate(3deg); animation-timing-function: ease-in-out; }
  78% { transform: rotate(-1deg); animation-timing-function: ease-in-out; }
  100% { transform: none; }
}
@keyframes ic-radio-signal {
  0% { opacity: 0; }
  38% { opacity: 1; }
  46% { opacity: 0; }
  54% { opacity: 1; }
  66%, 100% { opacity: 0; }
}
@keyframes ic-radio-tune {
  0% { transform: none; animation-timing-function: ease-out; }
  14% { transform: rotate(-30deg); animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1); }
  66% { transform: rotate(378deg); animation-timing-function: ease-in-out; }
  84% { transform: rotate(356deg); animation-timing-function: ease-in-out; }
  100% { transform: rotate(360deg); }
}

/* Motion for the files and data set (sets/files.js). The trigger wrapper is the same in every set. */

:where(a, button, label, summary, [role="button"], .ic-play, .ic-host):is(
    :hover,
    :focus-visible
  )
  .ic,
.ic-play .ic {
  &.ic-file .i-sheet {
    animation: ic-file-lift 820ms var(--swift);
  }
  &.ic-file .i-fold {
    transform-origin: 16.2px 5.3px;
    animation: ic-file-flick 820ms linear;
  }
  &.ic-file .i-flap {
    animation: ic-file-flap 820ms linear;
  }
  &.ic-file .i-ink {
    animation: ic-file-text 620ms ease-out 200ms both;
  }
  &.ic-file .i-ink-2 {
    animation-delay: 300ms;
  }

  &.ic-folder .i-front {
    transform-origin: 12px 20.5px;
    animation: ic-folder-open 860ms linear;
  }
  &.ic-folder .i-sheet {
    transform-origin: 12px 12px;
    animation: ic-folder-peek 860ms linear;
  }

  &.ic-image .i-sun {
    animation: ic-image-sun 960ms linear;
  }
  &.ic-image .i-star {
    transform-box: fill-box;
    transform-origin: center;
    animation: ic-image-star 960ms linear;
  }

  &.ic-paperclip .i-clip {
    animation: ic-paperclip-slide 820ms linear;
  }
  &.ic-paperclip .i-leg {
    transform-origin: 16px 16.5px;
    animation: ic-paperclip-grip 820ms linear;
  }

  &.ic-archive .i-lid {
    transform-origin: 3px 8.5px;
    animation: ic-archive-lid 900ms linear;
  }
  &.ic-archive .i-doc {
    animation: ic-archive-drop 900ms linear;
  }
  &.ic-archive .i-box {
    transform-origin: 12px 20.5px;
    animation: ic-archive-thud 900ms linear;
  }

  &.ic-note .i-pad {
    transform-origin: 12px 4px;
    animation: ic-note-flutter 900ms linear;
  }
  &.ic-note .i-curl {
    transform-origin: 17px 17px;
    animation: ic-note-curl 900ms linear 60ms;
  }
  &.ic-note .i-gust {
    animation: ic-note-gust 900ms linear;
  }
  &.ic-note .i-gust-2 {
    animation-delay: 70ms;
  }

  &.ic-list .i-bul {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: ic-list-hop 560ms linear;
  }
  &.ic-list .i-ln {
    transform-origin: 9.5px 12px;
    animation: ic-list-stretch 560ms linear;
  }
  &.ic-list .i-row-2 > * {
    animation-delay: 120ms;
  }
  &.ic-list .i-row-3 > * {
    animation-delay: 240ms;
  }

  &.ic-checklist .i-tick {
    transform-box: fill-box;
    transform-origin: 36% 100%;
    animation: ic-checklist-flick 520ms linear;
  }
  &.ic-checklist .i-bar {
    animation: ic-checklist-slide 520ms linear 60ms;
  }
  &.ic-checklist .i-tick-2 {
    animation-delay: 140ms;
  }
  &.ic-checklist .i-bar-2 {
    animation-delay: 200ms;
  }
  &.ic-checklist .i-tick-3 {
    animation-delay: 280ms;
  }
  &.ic-checklist .i-bar-3 {
    animation-delay: 340ms;
  }

  &.ic-quote .i-mark-1 {
    transform-origin: 6.9px 15.5px;
    animation: ic-quote-crook 820ms linear;
  }
  &.ic-quote .i-mark-2 {
    transform-origin: 15.9px 15.5px;
    animation: ic-quote-crook 820ms linear 50ms;
  }

  &.ic-chart .i-col {
    transform-origin: 12px 16.5px;
  }
  &.ic-chart .i-col-1 {
    animation: ic-chart-one 860ms linear;
  }
  &.ic-chart .i-col-2 {
    animation: ic-chart-two 860ms linear 50ms;
  }
  &.ic-chart .i-col-3 {
    animation: ic-chart-three 860ms linear 100ms;
  }

  &.ic-newspaper .i-paper {
    transform-origin: 12px 20px;
    animation: ic-newspaper-snap 780ms linear;
  }
  &.ic-newspaper .i-type {
    animation: ic-newspaper-lag 780ms linear;
  }

  &.ic-database .i-record {
    animation: ic-database-record 900ms linear;
  }
  &.ic-database .i-top {
    animation: ic-database-dip 900ms linear;
  }
  &.ic-database .i-band {
    animation: ic-database-dip 900ms linear 90ms;
  }
  &.ic-database .i-base {
    transform-origin: 12px 21px;
    animation: ic-database-settle 900ms linear;
  }
}

@keyframes ic-file-lift {
  0%,
  20% {
    transform: translateY(0);
  }
  42% {
    transform: translateY(-0.8px);
  }
  70% {
    transform: translateY(0.2px);
  }
}
/* A reflection across the corner's diagonal: scaleY runs 1 → −1 → 1 so the flap lifts out and back. */
@keyframes ic-file-flick {
  0% {
    transform: rotate(45deg) scaleY(1) rotate(-45deg);
    animation-timing-function: ease-out;
  }
  14% {
    transform: rotate(45deg) scaleY(1.15) rotate(-45deg);
    animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1);
  }
  36%,
  54% {
    transform: rotate(45deg) scaleY(-0.85) rotate(-45deg);
    animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.6);
  }
  70% {
    transform: rotate(45deg) scaleY(1.12) rotate(-45deg);
    animation-timing-function: ease-in-out;
  }
  84% {
    transform: rotate(45deg) scaleY(0.96) rotate(-45deg);
  }
  100% {
    transform: rotate(45deg) scaleY(1) rotate(-45deg);
  }
}
@keyframes ic-file-flap {
  0%,
  22% {
    opacity: 0;
  }
  34%,
  56% {
    opacity: 1;
  }
  68%,
  100% {
    opacity: 0;
  }
}
@keyframes ic-file-text {
  0% {
    opacity: 1;
    stroke-dashoffset: 1;
  }
  45% {
    stroke-dashoffset: 0;
  }
  72% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes ic-folder-open {
  0% {
    transform: skewX(0) scaleY(1);
    animation-timing-function: ease-out;
  }
  10% {
    transform: skewX(2deg) scaleY(1.03);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  36%,
  56% {
    transform: skewX(-16deg) scaleY(0.66);
    animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.6);
  }
  72% {
    transform: skewX(3deg) scaleY(1.04);
    animation-timing-function: ease-in-out;
  }
  86% {
    transform: skewX(-1deg) scaleY(0.99);
  }
  100% {
    transform: skewX(0) scaleY(1);
  }
}
@keyframes ic-folder-peek {
  0%,
  16% {
    opacity: 0;
    transform: translateY(3px) rotate(0);
  }
  24% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  42% {
    transform: translateY(-2.6px) rotate(-5deg);
    animation-timing-function: ease-in-out;
  }
  54% {
    opacity: 1;
    transform: translateY(-2px) rotate(-3deg);
    animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5);
  }
  68%,
  100% {
    opacity: 0;
    transform: translateY(3px) rotate(0);
  }
}

@keyframes ic-image-sun {
  0% {
    opacity: 1;
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  10% {
    transform: translateY(-0.8px);
    animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.6);
  }
  36% {
    opacity: 1;
  }
  42%,
  58% {
    opacity: 0;
    transform: translateY(5px);
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.3, 1);
  }
  66% {
    opacity: 1;
  }
  84% {
    transform: translateY(-0.6px);
    animation-timing-function: ease-in-out;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes ic-image-star {
  0%,
  36% {
    opacity: 0;
    transform: scale(0.3) rotate(0);
  }
  44% {
    opacity: 1;
    transform: scale(1.25) rotate(45deg);
  }
  52% {
    transform: scale(0.8) rotate(45deg);
  }
  60% {
    opacity: 1;
    transform: scale(1.1) rotate(45deg);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(0.3) rotate(90deg);
  }
}

/* The free leg springs open as the page slides in, then snaps shut; the clip recoils at the snap. */
@keyframes ic-paperclip-grip {
  0% {
    transform: rotate(0);
    animation-timing-function: ease-out;
  }
  12% {
    transform: rotate(-4deg);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  32%,
  46% {
    transform: rotate(18deg);
    animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5);
  }
  56% {
    transform: rotate(-4deg);
    animation-timing-function: ease-out;
  }
  70% {
    transform: rotate(1.5deg);
    animation-timing-function: ease-in-out;
  }
  84% {
    transform: rotate(-0.5deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes ic-paperclip-slide {
  0% {
    transform: translate(0, 0);
    animation-timing-function: ease-out;
  }
  18% {
    transform: translate(0.9px, -0.9px);
    animation-timing-function: cubic-bezier(0.5, 0, 0.7, 1);
  }
  46% {
    transform: translate(-0.2px, 0.2px);
    animation-timing-function: ease-out;
  }
  60% {
    transform: translate(-0.9px, 0.9px);
    animation-timing-function: ease-in-out;
  }
  76% {
    transform: translate(0.2px, -0.2px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes ic-archive-lid {
  0% {
    transform: rotate(0);
    animation-timing-function: ease-out;
  }
  8% {
    transform: rotate(2deg);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  28%,
  50% {
    transform: rotate(-26deg);
    animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5);
  }
  63% {
    transform: rotate(0);
    animation-timing-function: ease-out;
  }
  72% {
    transform: rotate(-3deg);
    animation-timing-function: ease-in;
  }
  81%,
  100% {
    transform: rotate(0);
  }
}
@keyframes ic-archive-drop {
  0%,
  24% {
    opacity: 0;
    transform: translateY(-1.5px);
  }
  32% {
    opacity: 1;
    transform: translateY(-1px);
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6);
  }
  48% {
    opacity: 1;
  }
  56%,
  100% {
    opacity: 0;
    transform: translateY(7px);
  }
}
@keyframes ic-archive-thud {
  0%,
  62% {
    transform: scaleY(1);
    animation-timing-function: ease-out;
  }
  68% {
    transform: scaleY(0.94);
    animation-timing-function: ease-in-out;
  }
  80% {
    transform: scaleY(1.02);
  }
  90%,
  100% {
    transform: scaleY(1);
  }
}

@keyframes ic-note-flutter {
  0% {
    transform: skewX(0) scaleY(1);
    animation-timing-function: cubic-bezier(0.3, 0.6, 0.4, 1);
  }
  20% {
    transform: skewX(9deg) scaleY(0.86);
    animation-timing-function: ease-in-out;
  }
  36% {
    transform: skewX(-3deg) scaleY(0.96);
    animation-timing-function: ease-in-out;
  }
  52% {
    transform: skewX(4deg) scaleY(0.91);
    animation-timing-function: ease-in-out;
  }
  68% {
    transform: skewX(-1.5deg) scaleY(0.99);
    animation-timing-function: ease-in-out;
  }
  84% {
    transform: skewX(0.5deg) scaleY(1);
  }
  100% {
    transform: skewX(0) scaleY(1);
  }
}
@keyframes ic-note-curl {
  0% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  22% {
    transform: scale(1.35);
    animation-timing-function: ease-in-out;
  }
  40% {
    transform: scale(0.9);
    animation-timing-function: ease-in-out;
  }
  56% {
    transform: scale(1.18);
    animation-timing-function: ease-in-out;
  }
  72% {
    transform: scale(0.97);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes ic-note-gust {
  0% {
    opacity: 0;
    transform: translateX(0);
    animation-timing-function: cubic-bezier(0.3, 0.6, 0.4, 1);
  }
  8% {
    opacity: 1;
  }
  30%,
  100% {
    opacity: 0;
    transform: translateX(3px);
  }
}

@keyframes ic-list-hop {
  0% {
    transform: translateY(0) scale(1, 1);
    animation-timing-function: ease-out;
  }
  14% {
    transform: translateY(0) scale(1.25, 0.75);
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1);
  }
  40% {
    transform: translateY(-2.6px) scale(0.9, 1.12);
    animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.45);
  }
  60% {
    transform: translateY(0) scale(1.3, 0.72);
    animation-timing-function: ease-out;
  }
  76% {
    transform: translateY(0) scale(0.95, 1.05);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: translateY(0) scale(1, 1);
  }
}
@keyframes ic-list-stretch {
  0%,
  58% {
    transform: scaleX(1);
    animation-timing-function: ease-out;
  }
  72% {
    transform: scaleX(1.09);
    animation-timing-function: ease-in-out;
  }
  88% {
    transform: scaleX(0.98);
  }
  100% {
    transform: scaleX(1);
  }
}

@keyframes ic-checklist-flick {
  0% {
    transform: rotate(0) scale(1);
    animation-timing-function: ease-out;
  }
  26% {
    transform: rotate(-16deg) scale(0.82);
    animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.6);
  }
  46% {
    transform: rotate(8deg) scale(1.2);
    animation-timing-function: ease-out;
  }
  66% {
    transform: rotate(-2deg) scale(0.97);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: rotate(0) scale(1);
  }
}
@keyframes ic-checklist-slide {
  0%,
  36% {
    transform: translateX(0);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  56% {
    transform: translateX(1.6px);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes ic-quote-crook {
  0% {
    transform: translateY(0) rotate(0);
    animation-timing-function: ease-out;
  }
  12% {
    transform: translateY(-1px) rotate(-6deg);
    animation-timing-function: ease-in-out;
  }
  26% {
    transform: translateY(-1.3px) rotate(26deg);
    animation-timing-function: ease-in-out;
  }
  40% {
    transform: translateY(-1.3px) rotate(-4deg);
    animation-timing-function: ease-in-out;
  }
  54% {
    transform: translateY(-1.3px) rotate(26deg);
    animation-timing-function: ease-in-out;
  }
  70% {
    transform: translateY(-0.4px) rotate(-3deg);
    animation-timing-function: ease-in-out;
  }
  85% {
    transform: translateY(0) rotate(1deg);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}

@keyframes ic-chart-one {
  0% {
    transform: scaleY(1);
    animation-timing-function: ease-out;
  }
  16% {
    transform: scaleY(0.8);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  44% {
    transform: scaleY(1.9);
    animation-timing-function: ease-in-out;
  }
  70% {
    transform: scaleY(0.94);
    animation-timing-function: ease-in-out;
  }
  86% {
    transform: scaleY(1.03);
  }
  100% {
    transform: scaleY(1);
  }
}
@keyframes ic-chart-two {
  0% {
    transform: scaleY(1);
    animation-timing-function: ease-out;
  }
  16% {
    transform: scaleY(1.05);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  44% {
    transform: scaleY(0.68);
    animation-timing-function: ease-in-out;
  }
  70% {
    transform: scaleY(1.05);
    animation-timing-function: ease-in-out;
  }
  86% {
    transform: scaleY(0.99);
  }
  100% {
    transform: scaleY(1);
  }
}
@keyframes ic-chart-three {
  0% {
    transform: scaleY(1);
    animation-timing-function: ease-out;
  }
  16% {
    transform: scaleY(0.82);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  46% {
    transform: scaleY(1.8);
    animation-timing-function: ease-in-out;
  }
  72% {
    transform: scaleY(0.94);
    animation-timing-function: ease-in-out;
  }
  87% {
    transform: scaleY(1.02);
  }
  100% {
    transform: scaleY(1);
  }
}

@keyframes ic-newspaper-snap {
  0% {
    transform: rotate(0) scaleX(1);
    animation-timing-function: ease-out;
  }
  16% {
    transform: rotate(-3deg) scaleX(0.9);
    animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1);
  }
  32% {
    transform: rotate(2.5deg) scaleX(1.05);
    animation-timing-function: ease-in-out;
  }
  48% {
    transform: rotate(-1deg) scaleX(0.99);
    animation-timing-function: ease-in-out;
  }
  64% {
    transform: rotate(0.4deg) scaleX(1);
  }
  100% {
    transform: rotate(0) scaleX(1);
  }
}
@keyframes ic-newspaper-lag {
  0%,
  18% {
    transform: translateX(0);
    animation-timing-function: ease-in-out;
  }
  30% {
    transform: translateX(-0.9px);
    animation-timing-function: ease-in-out;
  }
  46% {
    transform: translateX(1px);
    animation-timing-function: ease-in-out;
  }
  62% {
    transform: translateX(-0.4px);
    animation-timing-function: ease-in-out;
  }
  78% {
    transform: translateX(0.15px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes ic-database-record {
  0% {
    opacity: 0;
    transform: translateY(-1px);
  }
  8% {
    opacity: 1;
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5);
  }
  28% {
    opacity: 1;
    transform: translateY(5.8px);
  }
  34%,
  100% {
    opacity: 0;
    transform: translateY(7px);
  }
}
/* The weight of the record runs down the stack: the lid, then the band, then the base. */
@keyframes ic-database-dip {
  0%,
  28% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.3, 0.6, 0.4, 1);
  }
  38% {
    transform: translateY(1.4px);
    animation-timing-function: ease-in-out;
  }
  54% {
    transform: translateY(-0.4px);
    animation-timing-function: ease-in-out;
  }
  68% {
    transform: translateY(0.1px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes ic-database-settle {
  0%,
  40% {
    transform: scale(1, 1);
    animation-timing-function: ease-out;
  }
  50% {
    transform: scale(1.03, 0.95);
    animation-timing-function: ease-in-out;
  }
  64% {
    transform: scale(0.99, 1.01);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: scale(1, 1);
  }
}

/* Motion for Editing and layout (sets/editing.js). The trigger wrapper is the same in every set. */

:where(a, button, label, summary, [role="button"], .ic-play, .ic-host):is(
    :hover,
    :focus-visible
  )
  .ic,
.ic-play .ic {
  &.ic-zoom-in .i-lens,
  &.ic-zoom-out .i-lens {
    transform-origin: 20.5px 20.5px;
  }
  &.ic-zoom-in .i-sign,
  &.ic-zoom-out .i-sign {
    transform-origin: 10.5px 10.5px;
  }
  &.ic-zoom-in .i-lens {
    animation: ic-zoom-in-lens 780ms linear;
  }
  &.ic-zoom-in .i-sign {
    animation: ic-zoom-in-sign 780ms linear 40ms;
  }
  &.ic-zoom-out .i-lens {
    animation: ic-zoom-out-lens 780ms linear;
  }
  &.ic-zoom-out .i-sign {
    animation: ic-zoom-out-sign 780ms linear 40ms;
  }

  &.ic-maximize .i-tl,
  &.ic-minimize .i-tl {
    --x: -1;
    --y: -1;
  }
  &.ic-maximize .i-tr,
  &.ic-minimize .i-tr {
    --x: 1;
    --y: -1;
  }
  &.ic-maximize .i-bl,
  &.ic-minimize .i-bl {
    --x: -1;
    --y: 1;
  }
  &.ic-maximize .i-br,
  &.ic-minimize .i-br {
    --x: 1;
    --y: 1;
  }
  &.ic-maximize .i-window,
  &.ic-minimize .i-window {
    transform-origin: 12px 12px;
  }
  &.ic-maximize .i-corner {
    animation: ic-maximize-fling 760ms linear;
  }
  &.ic-maximize .i-window {
    animation: ic-maximize-window 760ms linear;
  }
  &.ic-minimize .i-corner {
    animation: ic-minimize-pinch 760ms linear;
  }
  &.ic-minimize .i-window {
    animation: ic-minimize-window 760ms linear;
  }

  &.ic-sidebar .i-divider {
    animation: ic-sidebar-divider 880ms linear;
  }
  &.ic-sidebar .i-panel {
    transform-origin: 3px 12px;
    animation: ic-sidebar-panel 880ms linear;
  }

  &.ic-columns .i-fill {
    transform-origin: 12px 4px;
    animation: ic-columns-fill 660ms linear both;
  }
  &.ic-columns .i-fill-2 {
    animation-delay: 110ms;
  }
  &.ic-columns .i-fill-3 {
    animation-delay: 220ms;
  }

  &.ic-table .i-cell {
    animation: ic-table-hop 960ms linear;
  }

  &.ic-layers .i-top {
    transform-origin: 12px 8px;
    animation: ic-layers-top 820ms linear;
  }
  &.ic-layers .i-middle {
    animation: ic-layers-middle 820ms linear 30ms;
  }
  &.ic-layers .i-bottom {
    animation: ic-layers-bottom 820ms linear 60ms;
  }

  &.ic-crop .i-near {
    animation: ic-crop-near 800ms linear;
  }
  &.ic-crop .i-far {
    animation: ic-crop-far 800ms linear;
  }
  &.ic-crop .i-keep {
    animation: ic-crop-keep 800ms linear;
  }

  &.ic-scissors .i-blade {
    transform-origin: 12px 12px;
  }
  &.ic-scissors .i-blade-a {
    animation: ic-scissors-a 820ms linear;
  }
  &.ic-scissors .i-blade-b {
    animation: ic-scissors-b 820ms linear;
  }
  &.ic-scissors .i-bit {
    animation: ic-scissors-bit 820ms linear;
  }

  &.ic-type .i-bar {
    animation: ic-type-bar 820ms linear;
  }
  &.ic-type .i-arm {
    transform-origin: 12px 4.5px;
  }
  &.ic-type .i-arm-l {
    animation: ic-type-arm-l 820ms linear;
  }
  &.ic-type .i-arm-r {
    animation: ic-type-arm-r 820ms linear;
  }
  &.ic-type .i-stem {
    transform-origin: 12px 19.5px;
    animation: ic-type-stem 820ms linear;
  }

  &.ic-bold .i-bowl-top {
    transform-origin: 7px 8.25px;
    animation: ic-bold-puff 620ms linear;
  }
  &.ic-bold .i-bowl-bottom {
    transform-origin: 7px 15.75px;
    animation: ic-bold-puff 620ms linear 120ms;
  }

  &.ic-italic .i-letter {
    transform-origin: 12px 12px;
    animation: ic-italic-lean 820ms linear;
  }
  &.ic-italic .i-serif-top {
    animation: ic-italic-serif-top 820ms linear;
  }
  &.ic-italic .i-serif-bottom {
    animation: ic-italic-serif-bottom 820ms linear;
  }

  &.ic-underline .i-rule {
    stroke-dasharray: 1 1.2;
    animation: ic-underline-strike 880ms linear;
  }
  &.ic-underline .i-letter {
    animation: ic-underline-dip 880ms linear;
  }

  &.ic-align-left .i-line {
    animation: ic-align-left-snap 760ms linear;
  }
  &.ic-align-left .i-line-1 {
    --d: 3.5;
  }
  &.ic-align-left .i-line-2 {
    --d: 6;
    animation-delay: 40ms;
  }
  &.ic-align-left .i-line-3 {
    --d: 2.5;
    animation-delay: 80ms;
  }
  &.ic-align-left .i-line-4 {
    --d: 7;
    animation-delay: 120ms;
  }
  &.ic-align-left .i-guide {
    animation: ic-align-left-guide 880ms linear;
  }

  &.ic-list-ordered .i-num {
    transform-box: fill-box;
    transform-origin: center;
    animation: ic-list-ordered-flip 560ms linear;
  }
  &.ic-list-ordered .i-num-2 {
    animation-delay: 180ms;
  }

  &.ic-palette .i-board {
    transform-origin: 13px 18px;
    animation: ic-palette-tip 900ms linear;
  }
  &.ic-palette .i-paint {
    transform-box: fill-box;
    transform-origin: center;
    animation: ic-palette-dab 500ms linear;
  }
  &.ic-palette .i-paint-2 {
    animation-delay: 110ms;
  }
  &.ic-palette .i-paint-3 {
    animation-delay: 220ms;
  }
  &.ic-palette .i-paint-4 {
    animation-delay: 330ms;
  }
}

/* The lens leans toward the eye while the sign swells inside it. */
@keyframes ic-zoom-in-lens {
  0% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  16% {
    transform: scale(0.96);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  44% {
    transform: scale(1.08);
    animation-timing-function: ease-in-out;
  }
  66% {
    transform: scale(0.99);
    animation-timing-function: ease-in-out;
  }
  84% {
    transform: scale(1.01);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes ic-zoom-in-sign {
  0% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  16% {
    transform: scale(0.72);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  44% {
    transform: scale(1.45);
    animation-timing-function: ease-in-out;
  }
  64% {
    transform: scale(0.94);
    animation-timing-function: ease-in-out;
  }
  82% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes ic-zoom-out-lens {
  0% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  16% {
    transform: scale(1.03);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  44% {
    transform: scale(0.92);
    animation-timing-function: ease-in-out;
  }
  66% {
    transform: scale(1.01);
    animation-timing-function: ease-in-out;
  }
  84% {
    transform: scale(0.995);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes ic-zoom-out-sign {
  0% {
    transform: scaleX(1);
    animation-timing-function: ease-out;
  }
  16% {
    transform: scaleX(1.2);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  44% {
    transform: scaleX(0.45);
    animation-timing-function: ease-in-out;
  }
  64% {
    transform: scaleX(1.07);
    animation-timing-function: ease-in-out;
  }
  82% {
    transform: scaleX(0.98);
  }
  100% {
    transform: scaleX(1);
  }
}

/* --x and --y point each corner outward. */
@keyframes ic-maximize-fling {
  0% {
    transform: translate(0, 0);
    animation-timing-function: ease-out;
  }
  16% {
    transform: translate(calc(var(--x) * -0.9px), calc(var(--y) * -0.9px));
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  42% {
    transform: translate(calc(var(--x) * 1.5px), calc(var(--y) * 1.5px));
    animation-timing-function: ease-in-out;
  }
  62% {
    transform: translate(calc(var(--x) * -0.35px), calc(var(--y) * -0.35px));
    animation-timing-function: ease-in-out;
  }
  80% {
    transform: translate(calc(var(--x) * 0.1px), calc(var(--y) * 0.1px));
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes ic-maximize-window {
  0%,
  14% {
    opacity: 0;
    transform: scale(0.3);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  24% {
    opacity: 1;
  }
  44% {
    transform: scale(1.14);
    animation-timing-function: ease-in-out;
  }
  60% {
    opacity: 1;
    transform: scale(1);
  }
  82%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
@keyframes ic-minimize-pinch {
  0% {
    transform: translate(0, 0);
    animation-timing-function: ease-out;
  }
  16% {
    transform: translate(calc(var(--x) * 0.9px), calc(var(--y) * 0.9px));
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  42% {
    transform: translate(calc(var(--x) * -1.5px), calc(var(--y) * -1.5px));
    animation-timing-function: ease-in-out;
  }
  62% {
    transform: translate(calc(var(--x) * 0.35px), calc(var(--y) * 0.35px));
    animation-timing-function: ease-in-out;
  }
  80% {
    transform: translate(calc(var(--x) * -0.1px), calc(var(--y) * -0.1px));
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes ic-minimize-window {
  0%,
  14% {
    opacity: 0;
    transform: scale(1.2);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  24% {
    opacity: 1;
  }
  46% {
    opacity: 1;
    transform: scale(0.3);
  }
  60%,
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}

@keyframes ic-sidebar-divider {
  0% {
    transform: translateX(0);
    animation-timing-function: ease-out;
  }
  12% {
    transform: translateX(0.8px);
    animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1);
  }
  36%,
  50% {
    transform: translateX(-5px);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  72% {
    transform: translateX(0.6px);
    animation-timing-function: ease-in-out;
  }
  86% {
    transform: translateX(-0.15px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes ic-sidebar-panel {
  0%,
  46% {
    opacity: 0;
    transform: scaleX(0.23);
  }
  50% {
    opacity: 1;
    transform: scaleX(0.23);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  72% {
    transform: scaleX(1.09);
    animation-timing-function: ease-in-out;
  }
  80% {
    opacity: 1;
  }
  86% {
    transform: scaleX(0.98);
  }
  100% {
    opacity: 0;
    transform: scaleX(1);
  }
}

@keyframes ic-columns-fill {
  0% {
    opacity: 0;
    transform: scaleY(0);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  8% {
    opacity: 1;
  }
  34% {
    transform: scaleY(1.05);
    animation-timing-function: ease-in-out;
  }
  48% {
    transform: scaleY(1);
  }
  72% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scaleY(1);
  }
}

/* Right, down, left: the selection steps like arrow keys. */
@keyframes ic-table-hop {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  10%,
  22% {
    opacity: 1;
    transform: translate(0, 0);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  34%,
  46% {
    transform: translate(9px, 0);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  58%,
  68% {
    transform: translate(9px, 5.4px);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  80% {
    opacity: 1;
    transform: translate(0, 5.4px);
  }
  100% {
    opacity: 0;
    transform: translate(0, 5.4px);
  }
}

@keyframes ic-layers-top {
  0% {
    transform: translateY(0) rotate(0);
    animation-timing-function: ease-out;
  }
  14% {
    transform: translateY(0.7px) rotate(0);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  40% {
    transform: translateY(-2.8px) rotate(-5deg);
    animation-timing-function: ease-in-out;
  }
  58% {
    transform: translateY(-2.4px) rotate(2deg);
    animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5);
  }
  74% {
    transform: translateY(0.4px) rotate(0);
    animation-timing-function: ease-out;
  }
  88% {
    transform: translateY(-0.1px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}
@keyframes ic-layers-middle {
  0% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  14% {
    transform: translateY(0.4px);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  42%,
  56% {
    transform: translateY(-1.1px);
    animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5);
  }
  74% {
    transform: translateY(0.3px);
    animation-timing-function: ease-out;
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes ic-layers-bottom {
  0%,
  14% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  42%,
  56% {
    transform: translateY(0.9px);
    animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5);
  }
  74% {
    transform: translateY(-0.25px);
    animation-timing-function: ease-out;
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes ic-crop-near {
  0% {
    transform: translate(0, 0);
    animation-timing-function: ease-out;
  }
  14% {
    transform: translate(-0.6px, 0.6px);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  40%,
  56% {
    transform: translate(1.7px, -1.7px);
    animation-timing-function: ease-in-out;
  }
  76% {
    transform: translate(-0.3px, 0.3px);
    animation-timing-function: ease-in-out;
  }
  90% {
    transform: translate(0.1px, -0.1px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes ic-crop-far {
  0% {
    transform: translate(0, 0);
    animation-timing-function: ease-out;
  }
  14% {
    transform: translate(0.6px, -0.6px);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  40%,
  56% {
    transform: translate(-1.7px, 1.7px);
    animation-timing-function: ease-in-out;
  }
  76% {
    transform: translate(0.3px, -0.3px);
    animation-timing-function: ease-in-out;
  }
  90% {
    transform: translate(-0.1px, 0.1px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes ic-crop-keep {
  0%,
  28% {
    opacity: 0;
  }
  40%,
  56% {
    opacity: 1;
  }
  72%,
  100% {
    opacity: 0;
  }
}

/* Blade A closes with a negative turn, blade B with a positive one; both hinge on the pivot. */
@keyframes ic-scissors-a {
  0% {
    transform: rotate(0);
    animation-timing-function: ease-out;
  }
  12% {
    transform: rotate(7deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.5);
  }
  28% {
    transform: rotate(-28deg);
    animation-timing-function: ease-out;
  }
  44% {
    transform: rotate(6deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.5);
  }
  60% {
    transform: rotate(-28deg);
    animation-timing-function: ease-out;
  }
  76% {
    transform: rotate(3deg);
    animation-timing-function: ease-in-out;
  }
  90% {
    transform: rotate(-0.5deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes ic-scissors-b {
  0% {
    transform: rotate(0);
    animation-timing-function: ease-out;
  }
  12% {
    transform: rotate(-7deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.5);
  }
  28% {
    transform: rotate(28deg);
    animation-timing-function: ease-out;
  }
  44% {
    transform: rotate(-6deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.5);
  }
  60% {
    transform: rotate(28deg);
    animation-timing-function: ease-out;
  }
  76% {
    transform: rotate(-3deg);
    animation-timing-function: ease-in-out;
  }
  90% {
    transform: rotate(0.5deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes ic-scissors-bit {
  0%,
  58% {
    opacity: 0;
    transform: translate(0, 0) rotate(0);
  }
  62% {
    opacity: 1;
    transform: translate(0, 0) rotate(0);
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6);
  }
  78% {
    opacity: 1;
  }
  90%,
  100% {
    opacity: 0;
    transform: translate(0.4px, 4px) rotate(0);
  }
}

@keyframes ic-type-bar {
  0% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  12% {
    transform: translateY(0.5px);
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1);
  }
  32% {
    transform: translateY(-3.2px);
    animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.45);
  }
  48% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  58% {
    transform: translateY(-0.5px);
    animation-timing-function: ease-in;
  }
  68%,
  100% {
    transform: translateY(0);
  }
}
@keyframes ic-type-arm-l {
  0% {
    transform: rotate(0);
    animation-timing-function: ease-out;
  }
  12% {
    transform: rotate(-4deg);
    animation-timing-function: ease-in-out;
  }
  32% {
    transform: rotate(8deg);
    animation-timing-function: ease-in-out;
  }
  48% {
    transform: rotate(0);
    animation-timing-function: ease-out;
  }
  56% {
    transform: rotate(-13deg);
    animation-timing-function: ease-in-out;
  }
  70% {
    transform: rotate(5deg);
    animation-timing-function: ease-in-out;
  }
  84% {
    transform: rotate(-1.5deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes ic-type-arm-r {
  0% {
    transform: rotate(0);
    animation-timing-function: ease-out;
  }
  12% {
    transform: rotate(4deg);
    animation-timing-function: ease-in-out;
  }
  32% {
    transform: rotate(-8deg);
    animation-timing-function: ease-in-out;
  }
  48% {
    transform: rotate(0);
    animation-timing-function: ease-out;
  }
  56% {
    transform: rotate(13deg);
    animation-timing-function: ease-in-out;
  }
  70% {
    transform: rotate(-5deg);
    animation-timing-function: ease-in-out;
  }
  84% {
    transform: rotate(1.5deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes ic-type-stem {
  0%,
  46% {
    transform: scaleY(1);
    animation-timing-function: ease-out;
  }
  54% {
    transform: scaleY(0.92);
    animation-timing-function: ease-in-out;
  }
  68% {
    transform: scaleY(1.02);
  }
  82%,
  100% {
    transform: scaleY(1);
  }
}

@keyframes ic-bold-puff {
  0% {
    transform: scaleX(1);
    animation-timing-function: ease-out;
  }
  16% {
    transform: scaleX(0.88);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  42% {
    transform: scaleX(1.22);
    animation-timing-function: ease-in-out;
  }
  62% {
    transform: scaleX(0.96);
    animation-timing-function: ease-in-out;
  }
  80% {
    transform: scaleX(1.03);
  }
  100% {
    transform: scaleX(1);
  }
}

@keyframes ic-italic-lean {
  0% {
    transform: skewX(0);
    animation-timing-function: ease-out;
  }
  20% {
    transform: skewX(13deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1);
  }
  46% {
    transform: skewX(-13deg);
    animation-timing-function: ease-in-out;
  }
  64% {
    transform: skewX(4deg);
    animation-timing-function: ease-in-out;
  }
  82% {
    transform: skewX(-1.5deg);
  }
  100% {
    transform: skewX(0);
  }
}
@keyframes ic-italic-serif-top {
  0%,
  26% {
    transform: translateX(0);
    animation-timing-function: ease-out;
  }
  52% {
    transform: translateX(1px);
    animation-timing-function: ease-in-out;
  }
  70% {
    transform: translateX(-0.3px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes ic-italic-serif-bottom {
  0%,
  26% {
    transform: translateX(0);
    animation-timing-function: ease-out;
  }
  52% {
    transform: translateX(-1px);
    animation-timing-function: ease-in-out;
  }
  70% {
    transform: translateX(0.3px);
  }
  100% {
    transform: translateX(0);
  }
}

/* With a 1 + 1.2 dash on a unit path, one full period of offset wipes the line out to the right
   and draws it back in from the left. */
@keyframes ic-underline-strike {
  0% {
    stroke-dashoffset: 0;
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6);
  }
  30%,
  40% {
    stroke-dashoffset: -1.1;
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.3, 1);
  }
  82%,
  100% {
    stroke-dashoffset: -2.2;
  }
}
@keyframes ic-underline-dip {
  0%,
  40% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  56% {
    transform: translateY(1px);
    animation-timing-function: ease-in-out;
  }
  72% {
    transform: translateY(-0.3px);
    animation-timing-function: ease-in-out;
  }
  86%,
  100% {
    transform: translateY(0);
  }
}

/* --d is how far each line drifts before it snaps back and knocks against the edge. */
@keyframes ic-align-left-snap {
  0% {
    transform: translateX(0);
    animation-timing-function: ease-out;
  }
  12% {
    transform: translateX(-0.4px);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  38% {
    transform: translateX(calc(var(--d) * 1px));
    animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5);
  }
  56% {
    transform: translateX(-0.6px);
    animation-timing-function: ease-out;
  }
  72% {
    transform: translateX(0.2px);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes ic-align-left-guide {
  0%,
  46% {
    opacity: 0;
  }
  54% {
    opacity: 1;
  }
  80%,
  100% {
    opacity: 0;
  }
}

@keyframes ic-list-ordered-flip {
  0% {
    transform: scaleY(1);
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5);
  }
  22% {
    transform: scaleY(0.05);
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1);
  }
  44% {
    transform: scaleY(1.18);
    animation-timing-function: ease-in-out;
  }
  62% {
    transform: scaleY(0.94);
    animation-timing-function: ease-in-out;
  }
  80% {
    transform: scaleY(1.02);
  }
  100% {
    transform: scaleY(1);
  }
}

@keyframes ic-palette-tip {
  0% {
    transform: rotate(0);
    animation-timing-function: ease-out;
  }
  14% {
    transform: rotate(3deg);
    animation-timing-function: ease-in-out;
  }
  44% {
    transform: rotate(-4deg);
    animation-timing-function: ease-in-out;
  }
  68% {
    transform: rotate(1.5deg);
    animation-timing-function: ease-in-out;
  }
  84% {
    transform: rotate(-0.5deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes ic-palette-dab {
  0% {
    transform: scale(1);
    animation-timing-function: ease-in;
  }
  22% {
    transform: scale(0.5);
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1);
  }
  46% {
    transform: scale(1.35);
    animation-timing-function: ease-in-out;
  }
  64% {
    transform: scale(0.92);
    animation-timing-function: ease-in-out;
  }
  80% {
    transform: scale(1.04);
  }
  100% {
    transform: scale(1);
  }
}

/* Motion for Build and system (sets/build.js). Notes for each icon live in `motion` there. */

:where(a, button, label, summary, [role="button"], .ic-play, .ic-host):is(
    :hover,
    :focus-visible
  )
  .ic,
.ic-play .ic {
  &.ic-code .i-lt {
    animation: ic-code-lt 820ms linear;
  }
  &.ic-code .i-gt {
    animation: ic-code-gt 820ms linear;
  }
  &.ic-code .i-slash {
    transform-origin: 12px 12px;
    animation: ic-code-slash 820ms linear;
  }

  &.ic-terminal .i-caret {
    animation: ic-terminal-caret 1000ms linear;
  }
  &.ic-terminal .i-typed {
    animation: ic-terminal-type 1000ms linear;
  }
  &.ic-terminal .i-prompt {
    animation: ic-terminal-enter 1000ms linear;
  }

  &.ic-git-branch .i-branch {
    stroke-dasharray: 1;
    animation: ic-git-branch-grow 900ms linear;
  }
  &.ic-git-branch .i-tip {
    transform-origin: 17.5px 6px;
    animation: ic-git-branch-tip 900ms linear;
  }
  &.ic-git-branch .i-ripple {
    transform-origin: 17.5px 6px;
    animation: ic-git-branch-ripple 900ms linear;
  }

  &.ic-bug .i-bug {
    animation: ic-bug-scurry 1000ms linear;
  }
  &.ic-bug .i-legs-a {
    animation: ic-bug-step-a 1000ms linear;
  }
  &.ic-bug .i-legs-b {
    animation: ic-bug-step-b 1000ms linear;
  }
  &.ic-bug .i-feelers {
    transform-origin: 12px 7px;
    animation: ic-bug-feel 1000ms linear;
  }

  &.ic-cpu .i-pins-t {
    animation: ic-cpu-pin-t 380ms linear;
  }
  &.ic-cpu .i-pins-r {
    animation: ic-cpu-pin-r 380ms linear 100ms;
  }
  &.ic-cpu .i-pins-b {
    animation: ic-cpu-pin-b 380ms linear 200ms;
  }
  &.ic-cpu .i-pins-l {
    animation: ic-cpu-pin-l 380ms linear 300ms;
  }
  &.ic-cpu .i-core {
    transform-origin: 12px 12px;
    animation: ic-cpu-core 900ms linear;
  }
  &.ic-cpu .i-heat {
    transform-origin: 12px 12px;
    animation: ic-cpu-heat 900ms linear;
  }

  &.ic-server .i-unit-t {
    animation: ic-server-drawer 950ms linear;
  }
  &.ic-server .i-unit-b {
    animation: ic-server-clunk 950ms linear;
  }
  &.ic-server .i-led-t {
    animation: ic-server-led-t 950ms linear;
  }
  &.ic-server .i-led-b {
    animation: ic-server-led-b 950ms linear;
  }

  &.ic-plug .i-plug {
    animation: ic-plug-push 860ms linear;
  }
  &.ic-plug .i-cord {
    transform-origin: 12px 21.5px;
    animation: ic-plug-cord 860ms linear;
  }
  &.ic-plug .i-spark {
    transform-origin: 12px 1.5px;
    animation: ic-plug-spark 860ms linear;
  }

  &.ic-power .i-half {
    stroke-dasharray: 1;
    animation: ic-power-charge 1000ms linear;
  }
  &.ic-power .i-stem {
    animation: ic-power-press 1000ms linear;
  }

  &.ic-bluetooth .i-rune {
    animation: ic-bluetooth-dim 1000ms linear;
  }
  &.ic-bluetooth .i-trace {
    stroke-dasharray: 0.22 1;
    animation: ic-bluetooth-trace 1000ms linear;
  }
  &.ic-bluetooth .i-ping {
    transform-origin: 12px 12px;
    animation: ic-bluetooth-ping 1000ms linear;
  }

  &.ic-toggle .i-knob {
    transform-box: fill-box;
    transform-origin: center;
    animation: ic-toggle-knob 1000ms linear;
  }
  &.ic-toggle .i-tint {
    animation: ic-toggle-tint 1000ms linear;
  }

  &.ic-loader .i-spoke {
    transform-origin: 12px 12px;
    animation: ic-loader-pass 360ms linear;
  }
  &.ic-loader .i-s2 {
    animation-delay: 70ms;
  }
  &.ic-loader .i-s3 {
    animation-delay: 140ms;
  }
  &.ic-loader .i-s4 {
    animation-delay: 210ms;
  }
  &.ic-loader .i-s5 {
    animation-delay: 280ms;
  }
  &.ic-loader .i-s6 {
    animation-delay: 350ms;
  }
  &.ic-loader .i-s7 {
    animation-delay: 420ms;
  }
  &.ic-loader .i-s8 {
    animation: ic-loader-lead 900ms linear;
  }

  &.ic-command .i-middle {
    transform-origin: 12px 12px;
    animation: ic-command-middle 900ms linear;
  }
  &.ic-command .i-loop-tl {
    animation: ic-command-tl 700ms linear;
  }
  &.ic-command .i-loop-tr {
    animation: ic-command-tr 700ms linear 60ms;
  }
  &.ic-command .i-loop-br {
    animation: ic-command-br 700ms linear 120ms;
  }
  &.ic-command .i-loop-bl {
    animation: ic-command-bl 700ms linear 180ms;
  }

  &.ic-puzzle .i-piece {
    transform-origin: 10px 14px;
    animation: ic-puzzle-lift 950ms linear;
  }
  &.ic-puzzle .i-slot {
    animation: ic-puzzle-slot 950ms linear;
  }

  &.ic-bot .i-eyes {
    transform-origin: 12px 13.6px;
    animation: ic-bot-blink 1000ms linear;
  }
  &.ic-bot .i-antenna {
    transform-origin: 12px 8px;
    animation: ic-bot-boing 1000ms linear;
  }
  &.ic-bot .i-beep {
    transform-origin: 12px 4px;
    animation: ic-bot-beep 1000ms linear;
  }

  &.ic-keyboard .i-key {
    animation: ic-keyboard-tap 180ms linear;
  }
  &.ic-keyboard .i-k2 {
    animation-delay: 90ms;
  }
  &.ic-keyboard .i-k4 {
    animation-delay: 170ms;
  }
  &.ic-keyboard .i-k8 {
    animation-delay: 260ms;
  }
  &.ic-keyboard .i-k1 {
    animation-delay: 340ms;
  }
  &.ic-keyboard .i-k9 {
    animation-delay: 420ms;
  }
  &.ic-keyboard .i-k3 {
    animation-delay: 500ms;
  }
  &.ic-keyboard .i-k5,
  &.ic-keyboard .i-k6 {
    animation: none;
  }
  &.ic-keyboard .i-space {
    transform-origin: 12px 15.3px;
    animation: ic-keyboard-space 260ms linear 610ms;
  }
  &.ic-keyboard .i-text {
    animation: ic-keyboard-text 1000ms linear;
  }

  &.ic-monitor .i-glow {
    transform-origin: 12px 10px;
    animation: ic-monitor-on 950ms linear;
  }
  &.ic-monitor .i-glint {
    animation: ic-monitor-glint 950ms linear;
  }
}

/* code */
@keyframes ic-code-lt {
  0% {
    transform: translateX(0);
    animation-timing-function: ease-out;
  }
  12% {
    transform: translateX(0.8px);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  34%,
  50% {
    transform: translateX(-1.6px);
    animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5);
  }
  64% {
    transform: translateX(0.4px);
    animation-timing-function: ease-in-out;
  }
  78%,
  100% {
    transform: translateX(0);
  }
}
@keyframes ic-code-gt {
  0% {
    transform: translateX(0);
    animation-timing-function: ease-out;
  }
  12% {
    transform: translateX(-0.8px);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  34%,
  50% {
    transform: translateX(1.6px);
    animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5);
  }
  64% {
    transform: translateX(-0.4px);
    animation-timing-function: ease-in-out;
  }
  78%,
  100% {
    transform: translateX(0);
  }
}
@keyframes ic-code-slash {
  0% {
    transform: rotate(0);
    animation-timing-function: ease-out;
  }
  12% {
    transform: rotate(-14deg);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  50% {
    transform: rotate(192deg);
    animation-timing-function: ease-in-out;
  }
  62%,
  100% {
    transform: rotate(180deg);
  }
}

/* terminal */
@keyframes ic-terminal-caret {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  5%,
  10% {
    opacity: 0;
  }
  14% {
    opacity: 1;
    transform: translateX(0);
    animation-timing-function: steps(5, end);
  }
  54%,
  66% {
    opacity: 1;
    transform: translateX(4.6px);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.3, 1.25);
  }
  84%,
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes ic-terminal-type {
  0%,
  14% {
    opacity: 1;
    stroke-dashoffset: 1;
    animation-timing-function: steps(5, end);
  }
  54%,
  64% {
    opacity: 1;
    stroke-dashoffset: 0;
    animation-timing-function: ease-in;
  }
  74%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}
@keyframes ic-terminal-enter {
  0%,
  56% {
    transform: translateX(0);
    animation-timing-function: ease-out;
  }
  62% {
    transform: translateX(1.2px);
    animation-timing-function: ease-in-out;
  }
  72%,
  100% {
    transform: translateX(0);
  }
}

/* git-branch */
@keyframes ic-git-branch-grow {
  0% {
    stroke-dashoffset: 0;
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5);
  }
  18%,
  24% {
    stroke-dashoffset: 0.95;
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  56%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes ic-git-branch-tip {
  0% {
    transform: scale(1);
    animation-timing-function: ease-in;
  }
  14%,
  52% {
    transform: scale(0);
    animation-timing-function: ease-out;
  }
  62% {
    transform: scale(1.3);
    animation-timing-function: ease-in-out;
  }
  72% {
    transform: scale(0.92);
    animation-timing-function: ease-in-out;
  }
  82%,
  100% {
    transform: scale(1);
  }
}
@keyframes ic-git-branch-ripple {
  0%,
  56% {
    opacity: 0;
    transform: scale(1);
  }
  62% {
    opacity: 0.9;
    animation-timing-function: ease-out;
  }
  90%,
  100% {
    opacity: 0;
    transform: scale(2);
  }
}

/* bug */
@keyframes ic-bug-scurry {
  0% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  50% {
    transform: translateY(-2.2px);
    animation-timing-function: ease-in-out;
  }
  60% {
    transform: translateY(-2.2px);
    animation-timing-function: ease-in-out;
  }
  88%,
  100% {
    transform: translateY(0);
  }
}
@keyframes ic-bug-step-a {
  0%,
  88%,
  100% {
    transform: translateY(0);
  }
  10%,
  30%,
  50%,
  70% {
    transform: translateY(-1.1px);
  }
  20%,
  40%,
  60%,
  78% {
    transform: translateY(0.7px);
  }
}
@keyframes ic-bug-step-b {
  0%,
  88%,
  100% {
    transform: translateY(0);
  }
  10%,
  30%,
  50%,
  70% {
    transform: translateY(0.7px);
  }
  20%,
  40%,
  60%,
  78% {
    transform: translateY(-1.1px);
  }
}
@keyframes ic-bug-feel {
  0%,
  10% {
    transform: rotate(0);
  }
  16% {
    transform: rotate(-10deg);
  }
  23% {
    transform: rotate(7deg);
  }
  30%,
  58% {
    transform: rotate(0);
  }
  64% {
    transform: rotate(9deg);
  }
  70% {
    transform: rotate(-6deg);
  }
  78%,
  100% {
    transform: rotate(0);
  }
}

/* cpu */
@keyframes ic-cpu-pin-t {
  0%,
  100% {
    transform: translateY(0);
  }
  35% {
    transform: translateY(-1.1px);
  }
}
@keyframes ic-cpu-pin-r {
  0%,
  100% {
    transform: translateX(0);
  }
  35% {
    transform: translateX(1.1px);
  }
}
@keyframes ic-cpu-pin-b {
  0%,
  100% {
    transform: translateY(0);
  }
  35% {
    transform: translateY(1.1px);
  }
}
@keyframes ic-cpu-pin-l {
  0%,
  100% {
    transform: translateX(0);
  }
  35% {
    transform: translateX(-1.1px);
  }
}
@keyframes ic-cpu-core {
  0%,
  46% {
    transform: scale(1);
    animation-timing-function: ease-in;
  }
  52% {
    transform: scale(0.8);
    animation-timing-function: ease-out;
  }
  62% {
    transform: scale(1.3);
    animation-timing-function: ease-in-out;
  }
  74% {
    transform: scale(0.94);
    animation-timing-function: ease-in-out;
  }
  84%,
  100% {
    transform: scale(1);
  }
}
@keyframes ic-cpu-heat {
  0%,
  56% {
    opacity: 0;
    transform: scale(1);
  }
  62% {
    opacity: 1;
    animation-timing-function: ease-out;
  }
  90%,
  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}

/* server */
@keyframes ic-server-drawer {
  0% {
    transform: translateX(0);
    animation-timing-function: ease-out;
  }
  10% {
    transform: translateX(-0.5px);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  34%,
  56% {
    transform: translateX(2.8px);
    animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.6);
  }
  70% {
    transform: translateX(-0.35px);
    animation-timing-function: ease-out;
  }
  80%,
  100% {
    transform: translateX(0);
  }
}
@keyframes ic-server-clunk {
  0%,
  68% {
    transform: translateY(0);
  }
  73% {
    transform: translateY(0.5px);
  }
  82%,
  100% {
    transform: translateY(0);
  }
}
@keyframes ic-server-led-t {
  0%,
  30% {
    opacity: 1;
  }
  34%,
  44% {
    opacity: 0.15;
  }
  38%,
  50% {
    opacity: 1;
  }
  56%,
  100% {
    opacity: 1;
  }
}
@keyframes ic-server-led-b {
  0%,
  32% {
    opacity: 1;
  }
  36%,
  48% {
    opacity: 1;
  }
  42%,
  54% {
    opacity: 0.15;
  }
  60%,
  100% {
    opacity: 1;
  }
}

/* plug */
@keyframes ic-plug-push {
  0% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  14% {
    transform: translateY(0.8px);
    animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1);
  }
  32%,
  56% {
    transform: translateY(-2px);
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5);
  }
  70% {
    transform: translateY(0.4px);
    animation-timing-function: ease-out;
  }
  80%,
  100% {
    transform: translateY(0);
  }
}
@keyframes ic-plug-cord {
  0% {
    transform: scaleY(1);
    animation-timing-function: ease-out;
  }
  14% {
    transform: scaleY(0.855);
    animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1);
  }
  32%,
  56% {
    transform: scaleY(1.36);
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5);
  }
  70% {
    transform: scaleY(0.93);
    animation-timing-function: ease-out;
  }
  80%,
  100% {
    transform: scaleY(1);
  }
}
@keyframes ic-plug-spark {
  0%,
  30% {
    opacity: 0;
    transform: translateY(-2px) scale(0.5);
  }
  34% {
    opacity: 1;
    animation-timing-function: ease-out;
  }
  54%,
  100% {
    opacity: 0;
    transform: translateY(-2px) scale(1.25);
  }
}

/* power */
@keyframes ic-power-charge {
  0%,
  8% {
    stroke-dashoffset: 0;
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5);
  }
  30%,
  36% {
    stroke-dashoffset: 0.9;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  70%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes ic-power-press {
  0% {
    transform: translateY(0);
    animation-timing-function: ease-in;
  }
  12%,
  64% {
    transform: translateY(1.6px);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  74% {
    transform: translateY(-0.9px);
    animation-timing-function: ease-in-out;
  }
  84% {
    transform: translateY(0.25px);
    animation-timing-function: ease-in-out;
  }
  92%,
  100% {
    transform: translateY(0);
  }
}

/* bluetooth */
@keyframes ic-bluetooth-dim {
  0% {
    opacity: 1;
  }
  12%,
  58% {
    opacity: 0.3;
  }
  66%,
  100% {
    opacity: 1;
  }
}
@keyframes ic-bluetooth-trace {
  0%,
  8% {
    opacity: 0;
    stroke-dashoffset: 0.22;
  }
  12% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }
  56% {
    opacity: 1;
  }
  60%,
  100% {
    opacity: 0;
    stroke-dashoffset: -1;
  }
}
@keyframes ic-bluetooth-ping {
  0%,
  62% {
    opacity: 0;
    transform: scale(0.8);
  }
  68% {
    opacity: 1;
    transform: scale(1);
  }
  75% {
    opacity: 0.2;
  }
  81% {
    opacity: 1;
    transform: scale(1.05);
  }
  96%,
  100% {
    opacity: 0;
    transform: scale(1.15);
  }
}

/* toggle */
@keyframes ic-toggle-knob {
  0% {
    transform: translateX(0) scale(1);
    animation-timing-function: ease-out;
  }
  8% {
    transform: translateX(0.6px) scale(0.9, 1.1);
    animation-timing-function: ease-in;
  }
  22% {
    transform: translateX(-4.5px) scale(1.35, 0.85);
    animation-timing-function: ease-out;
  }
  32% {
    transform: translateX(-9px) scale(0.84, 1.12);
    animation-timing-function: ease-in-out;
  }
  40%,
  48% {
    transform: translateX(-9px) scale(1);
    animation-timing-function: ease-out;
  }
  54% {
    transform: translateX(-9.6px) scale(0.9, 1.1);
    animation-timing-function: ease-in;
  }
  68% {
    transform: translateX(-4.5px) scale(1.35, 0.85);
    animation-timing-function: ease-out;
  }
  78% {
    transform: translateX(0) scale(0.84, 1.12);
    animation-timing-function: ease-in-out;
  }
  87% {
    transform: translateX(0) scale(1.05, 0.96);
    animation-timing-function: ease-in-out;
  }
  95%,
  100% {
    transform: translateX(0) scale(1);
  }
}
@keyframes ic-toggle-tint {
  0%,
  72% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* loader */
@keyframes ic-loader-pass {
  0% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  30% {
    opacity: 1;
    transform: scale(1.18);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: scale(1);
  }
}
@keyframes ic-loader-lead {
  0% {
    opacity: 1;
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  10% {
    opacity: 0.5;
    transform: scale(0.82);
    animation-timing-function: ease-in-out;
  }
  24%,
  60% {
    opacity: 1;
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  70% {
    transform: scale(1.28);
    animation-timing-function: ease-in-out;
  }
  82% {
    transform: scale(0.95);
    animation-timing-function: ease-in-out;
  }
  92%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* command */
@keyframes ic-command-middle {
  0%,
  10% {
    transform: scale(1);
    animation-timing-function: ease-in-out;
  }
  44% {
    transform: scale(0.84);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.3, 1);
  }
  62% {
    transform: scale(1.08);
    animation-timing-function: ease-in-out;
  }
  78%,
  100% {
    transform: scale(1);
  }
}
@keyframes ic-command-tl {
  0% {
    transform: translate(0, 0);
    animation-timing-function: ease-in-out;
  }
  36% {
    transform: translate(1.2px, 1.2px);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.3, 1);
  }
  60% {
    transform: translate(-0.6px, -0.6px);
    animation-timing-function: ease-in-out;
  }
  80%,
  100% {
    transform: translate(0, 0);
  }
}
@keyframes ic-command-tr {
  0% {
    transform: translate(0, 0);
    animation-timing-function: ease-in-out;
  }
  36% {
    transform: translate(-1.2px, 1.2px);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.3, 1);
  }
  60% {
    transform: translate(0.6px, -0.6px);
    animation-timing-function: ease-in-out;
  }
  80%,
  100% {
    transform: translate(0, 0);
  }
}
@keyframes ic-command-br {
  0% {
    transform: translate(0, 0);
    animation-timing-function: ease-in-out;
  }
  36% {
    transform: translate(-1.2px, -1.2px);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.3, 1);
  }
  60% {
    transform: translate(0.6px, 0.6px);
    animation-timing-function: ease-in-out;
  }
  80%,
  100% {
    transform: translate(0, 0);
  }
}
@keyframes ic-command-bl {
  0% {
    transform: translate(0, 0);
    animation-timing-function: ease-in-out;
  }
  36% {
    transform: translate(1.2px, -1.2px);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.3, 1);
  }
  60% {
    transform: translate(-0.6px, 0.6px);
    animation-timing-function: ease-in-out;
  }
  80%,
  100% {
    transform: translate(0, 0);
  }
}

/* puzzle */
@keyframes ic-puzzle-lift {
  0% {
    transform: translate(0, 0);
    animation-timing-function: ease-out;
  }
  10% {
    transform: translate(0, 0.4px) scale(0.97);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  34%,
  52% {
    transform: translate(-1.2px, -2.4px) rotate(-10deg);
    animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5);
  }
  66% {
    transform: translate(0, 0.3px) scale(1.03, 0.96);
    animation-timing-function: ease-out;
  }
  76% {
    transform: translate(0, -0.2px) scale(0.99, 1.01);
    animation-timing-function: ease-in-out;
  }
  86%,
  100% {
    transform: translate(0, 0);
  }
}
@keyframes ic-puzzle-slot {
  0%,
  12% {
    opacity: 0;
  }
  30%,
  60% {
    opacity: 1;
  }
  68%,
  100% {
    opacity: 0;
  }
}

/* bot */
@keyframes ic-bot-blink {
  0%,
  4% {
    transform: scaleY(1);
  }
  9% {
    transform: scaleY(0.1);
  }
  14% {
    transform: scaleY(1);
  }
  19% {
    transform: scaleY(0.1);
  }
  25%,
  100% {
    transform: scaleY(1);
  }
}
@keyframes ic-bot-boing {
  0%,
  22% {
    transform: rotate(0) scaleY(1);
    animation-timing-function: ease-in;
  }
  30% {
    transform: rotate(0) scaleY(0.7);
    animation-timing-function: ease-out;
  }
  38% {
    transform: rotate(-22deg) scaleY(1.05);
    animation-timing-function: ease-in-out;
  }
  48% {
    transform: rotate(16deg);
    animation-timing-function: ease-in-out;
  }
  58% {
    transform: rotate(-10deg);
    animation-timing-function: ease-in-out;
  }
  68% {
    transform: rotate(5deg);
    animation-timing-function: ease-in-out;
  }
  78% {
    transform: rotate(-2deg);
    animation-timing-function: ease-in-out;
  }
  88%,
  100% {
    transform: rotate(0) scaleY(1);
  }
}
@keyframes ic-bot-beep {
  0%,
  60% {
    opacity: 0;
    transform: scale(0.8);
  }
  66% {
    opacity: 1;
    transform: scale(1);
  }
  72% {
    opacity: 0.2;
  }
  78% {
    opacity: 1;
    transform: scale(1.08);
  }
  94%,
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

/* keyboard */
@keyframes ic-keyboard-tap {
  0%,
  100% {
    opacity: 1;
    transform: translateY(0);
  }
  40% {
    opacity: 0.35;
    transform: translateY(0.8px);
  }
}
@keyframes ic-keyboard-space {
  0%,
  100% {
    transform: translateY(0) scaleX(1);
  }
  35% {
    transform: translateY(0.9px) scaleX(0.84);
  }
  70% {
    transform: translateY(-0.15px) scaleX(1.03);
  }
}
@keyframes ic-keyboard-text {
  0%,
  4% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
  5% {
    opacity: 1;
    stroke-dashoffset: 1;
    animation-timing-function: steps(7, end);
  }
  60%,
  80% {
    opacity: 1;
    stroke-dashoffset: 0;
    animation-timing-function: ease-in;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

/* monitor */
@keyframes ic-monitor-on {
  0% {
    opacity: 0;
    transform: scale(0.2, 0.06);
    animation-timing-function: ease-out;
  }
  8% {
    opacity: 1;
    transform: scale(1, 0.06);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.3, 1);
  }
  26% {
    transform: scale(1, 1.06);
    animation-timing-function: ease-in-out;
  }
  34% {
    transform: scale(1);
  }
  40% {
    opacity: 0.55;
  }
  46%,
  74% {
    opacity: 1;
    transform: scale(1);
    animation-timing-function: ease-in;
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
@keyframes ic-monitor-glint {
  0%,
  40% {
    opacity: 0;
    transform: translateX(-5px);
    animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1);
  }
  48% {
    opacity: 0.7;
  }
  64% {
    opacity: 0.7;
  }
  74%,
  100% {
    opacity: 0;
    transform: translateX(5px);
  }
}

/* Motion for Devices and status (sets/things.js). Notes for each icon live in `motion` there. */

:where(a, button, label, summary, [role="button"], .ic-play, .ic-host):is(
    :hover,
    :focus-visible
  )
  .ic,
.ic-play .ic {
  &.ic-laptop .i-lid {
    transform-origin: 12px 15.5px;
    animation: ic-laptop-lid 900ms linear;
  }
  &.ic-laptop .i-ink {
    animation: ic-laptop-type 900ms linear;
  }
  &.ic-laptop .i-ink-2 {
    animation-name: ic-laptop-type-2;
  }
  &.ic-laptop .i-sleep {
    animation: ic-laptop-sleep 900ms linear;
  }

  &.ic-watch .i-minute {
    transform-origin: 12px 12px;
    animation: ic-watch-sweep 900ms linear;
  }
  &.ic-watch .i-case {
    transform-origin: 12px 12px;
    animation: ic-watch-buzz 900ms linear;
  }
  &.ic-watch .i-buzz {
    transform-origin: 12px 12px;
    animation: ic-watch-hum 900ms linear;
  }

  &.ic-wifi .i-node {
    transform-origin: 12px 18px;
    animation: ic-wifi-node 900ms linear;
  }
  &.ic-wifi .i-arc {
    transform-origin: 12px 18px;
    animation: ic-wifi-ripple-1 900ms linear;
  }
  &.ic-wifi .i-arc-2 {
    animation-name: ic-wifi-ripple-2;
  }
  &.ic-wifi .i-arc-3 {
    animation-name: ic-wifi-ripple-3;
  }
  &.ic-wifi .i-wave {
    transform-origin: 12px 18px;
    animation: ic-wifi-wave 900ms linear;
  }

  &.ic-battery .i-bar {
    transform-origin: 0 13.7px;
    animation: ic-battery-bar-1 950ms linear;
  }
  &.ic-battery .i-bar-2 {
    animation-name: ic-battery-bar-2;
  }
  &.ic-battery .i-bar-3 {
    animation-name: ic-battery-bar-3;
  }
  &.ic-battery .i-bolt {
    transform-origin: 10.75px 12.3px;
    animation: ic-battery-bolt 950ms linear;
  }
  &.ic-battery .i-nub {
    transform-origin: 20.4px 12px;
    animation: ic-battery-nub 950ms linear;
  }

  &.ic-headphones .i-band {
    transform-origin: 12px 12px;
    animation: ic-headphones-band 900ms linear;
  }
  &.ic-headphones .i-cup-l {
    animation: ic-headphones-cup-l 900ms linear;
  }
  &.ic-headphones .i-cup-r {
    animation: ic-headphones-cup-r 900ms linear;
  }
  &.ic-headphones .i-note {
    transform-origin: 12px 15px;
    animation: ic-headphones-note 900ms linear;
  }

  &.ic-camera .i-body {
    transform-origin: 12px 20px;
    animation: ic-camera-press 760ms linear;
  }
  &.ic-camera .i-lens {
    transform-origin: 12px 13.2px;
    animation: ic-camera-iris 760ms linear;
  }
  &.ic-camera .i-led {
    transform-origin: 17.6px 9.6px;
    animation: ic-camera-led 760ms linear;
  }
  &.ic-camera .i-flash {
    transform-origin: 20px 6px;
    animation: ic-camera-flash 760ms linear;
  }

  &.ic-bulb .i-glow {
    transform-origin: 12px 9.3px;
    animation: ic-bulb-glow 1000ms linear;
  }
  &.ic-bulb .i-filament {
    transform-origin: 12px 12.5px;
    animation: ic-bulb-filament 1000ms linear;
  }
  &.ic-bulb .i-ray {
    transform-origin: 12px 9.3px;
    animation: ic-bulb-ray 1000ms linear;
  }
  &.ic-bulb .i-glass {
    transform-origin: 12px 16.5px;
    animation: ic-bulb-catch 1000ms linear;
  }

  &.ic-target .i-dart {
    transform-origin: 12px 12px;
    animation: ic-target-dart 1000ms linear;
  }
  &.ic-target .i-inner {
    transform-origin: 12px 12px;
    animation: ic-target-inner 1000ms linear;
  }
  &.ic-target .i-outer {
    transform-origin: 12px 12px;
    animation: ic-target-outer 1000ms linear;
  }
  &.ic-target .i-eye {
    transform-origin: 12px 12px;
    animation: ic-target-eye 1000ms linear;
  }

  &.ic-info .i-stem {
    transform-origin: 12px 16.8px;
    animation: ic-info-crouch 860ms linear;
  }
  &.ic-info .i-tittle {
    transform-origin: 12px 8px;
    animation: ic-info-toss 860ms linear;
  }

  &.ic-alert .i-bar {
    transform-origin: 12px 13.4px;
    animation: ic-alert-jolt 900ms linear;
  }
  &.ic-alert .i-dot {
    transform-origin: 12px 16.7px;
    animation: ic-alert-blink 900ms linear;
  }
  &.ic-alert .i-flare {
    transform-origin: 12px 8px;
    animation: ic-alert-flare 900ms linear;
  }

  &.ic-help .i-query {
    transform-origin: 12px 20px;
    animation: ic-help-tilt 1000ms linear;
  }
  &.ic-help .i-dot {
    transform-origin: 12px 16.7px;
    animation: ic-help-dot 1000ms linear;
  }
}

/* laptop */
@keyframes ic-laptop-lid {
  0% {
    transform: scaleY(1);
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5);
  }
  22%,
  30% {
    transform: scaleY(0.08);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  46% {
    transform: scaleY(1.07);
    animation-timing-function: ease-in-out;
  }
  58% {
    transform: scaleY(0.97);
    animation-timing-function: ease-in-out;
  }
  70%,
  100% {
    transform: scaleY(1);
  }
}
@keyframes ic-laptop-sleep {
  0%,
  20% {
    opacity: 0;
  }
  25%,
  31% {
    opacity: 1;
  }
  38%,
  100% {
    opacity: 0;
  }
}
@keyframes ic-laptop-type {
  0%,
  46% {
    opacity: 0;
    stroke-dashoffset: 1;
    animation-timing-function: ease-out;
  }
  47% {
    opacity: 1;
    stroke-dashoffset: 1;
    animation-timing-function: ease-out;
  }
  62%,
  84% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}
@keyframes ic-laptop-type-2 {
  0%,
  58% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
  59% {
    opacity: 1;
    stroke-dashoffset: 1;
    animation-timing-function: ease-out;
  }
  76%,
  86% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

/* watch */
@keyframes ic-watch-sweep {
  0% {
    transform: rotate(0);
    animation-timing-function: ease-out;
  }
  14% {
    transform: rotate(-25deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1);
  }
  56% {
    transform: rotate(372deg);
    animation-timing-function: ease-in-out;
  }
  66%,
  100% {
    transform: rotate(360deg);
  }
}
@keyframes ic-watch-buzz {
  0%,
  56% {
    transform: rotate(0);
  }
  61% {
    transform: rotate(-5deg);
  }
  66% {
    transform: rotate(5deg);
  }
  71% {
    transform: rotate(-4deg);
  }
  76% {
    transform: rotate(3deg);
  }
  82% {
    transform: rotate(-1.5deg);
  }
  90%,
  100% {
    transform: rotate(0);
  }
}
@keyframes ic-watch-hum {
  0%,
  56% {
    opacity: 0;
    transform: scale(0.85);
  }
  62% {
    opacity: 1;
    transform: scale(1);
  }
  68% {
    opacity: 0.4;
    transform: scale(1.04);
  }
  74% {
    opacity: 1;
    transform: scale(1);
  }
  90%,
  100% {
    opacity: 0;
    transform: scale(1.12);
  }
}

/* wifi */
@keyframes ic-wifi-node {
  0% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  12% {
    transform: translateY(0.8px) scale(0.7);
    animation-timing-function: ease-out;
  }
  24% {
    transform: scale(1.35);
    animation-timing-function: ease-in-out;
  }
  38%,
  100% {
    transform: scale(1);
  }
}
@keyframes ic-wifi-ripple-1 {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  12% {
    opacity: 0.35;
    transform: scale(0.94);
  }
  22%,
  26% {
    opacity: 1;
  }
  30% {
    transform: scale(1.18);
    animation-timing-function: ease-in-out;
  }
  46%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes ic-wifi-ripple-2 {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  12%,
  24% {
    opacity: 0.35;
    transform: scale(0.95);
  }
  34% {
    opacity: 1;
  }
  40% {
    transform: scale(1.12);
    animation-timing-function: ease-in-out;
  }
  56%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes ic-wifi-ripple-3 {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  12%,
  34% {
    opacity: 0.35;
    transform: scale(0.96);
  }
  44% {
    opacity: 1;
  }
  50% {
    transform: scale(1.08);
    animation-timing-function: ease-in-out;
  }
  66%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes ic-wifi-wave {
  0%,
  48% {
    opacity: 0;
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  54% {
    opacity: 0.8;
  }
  84%,
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}

/* battery */
@keyframes ic-battery-bar-1 {
  0%,
  18% {
    opacity: 1;
    transform: scaleY(1);
    animation-timing-function: ease-in;
  }
  26%,
  50% {
    opacity: 0;
    transform: scaleY(0);
    animation-timing-function: ease-out;
  }
  54% {
    opacity: 1;
  }
  58% {
    transform: scaleY(1.2);
    animation-timing-function: ease-in-out;
  }
  66%,
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
@keyframes ic-battery-bar-2 {
  0%,
  10% {
    opacity: 1;
    transform: scaleY(1);
    animation-timing-function: ease-in;
  }
  18%,
  60% {
    opacity: 0;
    transform: scaleY(0);
    animation-timing-function: ease-out;
  }
  64% {
    opacity: 1;
  }
  68% {
    transform: scaleY(1.2);
    animation-timing-function: ease-in-out;
  }
  76%,
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
@keyframes ic-battery-bar-3 {
  0%,
  2% {
    opacity: 1;
    transform: scaleY(1);
    animation-timing-function: ease-in;
  }
  10%,
  70% {
    opacity: 0;
    transform: scaleY(0);
    animation-timing-function: ease-out;
  }
  74% {
    opacity: 1;
  }
  79% {
    transform: scaleY(1.3);
    animation-timing-function: ease-in-out;
  }
  88%,
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
@keyframes ic-battery-bolt {
  0%,
  26% {
    opacity: 0;
    transform: scale(0.4) rotate(-20deg);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1.4);
  }
  36% {
    opacity: 1;
    transform: scale(1.1) rotate(4deg);
    animation-timing-function: ease-in-out;
  }
  44%,
  54% {
    opacity: 1;
    transform: scale(1);
    animation-timing-function: ease-in;
  }
  64%,
  100% {
    opacity: 0;
    transform: scale(0.7);
  }
}
@keyframes ic-battery-nub {
  0%,
  80% {
    transform: scaleX(1);
  }
  85% {
    transform: scaleX(1.5);
  }
  92%,
  100% {
    transform: scaleX(1);
  }
}

/* headphones */
@keyframes ic-headphones-band {
  0% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  26% {
    transform: scale(1.16, 1.04);
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5);
  }
  36% {
    transform: scale(0.97, 1);
    animation-timing-function: ease-out;
  }
  46%,
  100% {
    transform: scale(1);
  }
}
@keyframes ic-headphones-cup-l {
  0% {
    transform: translate(0, 0);
    animation-timing-function: ease-out;
  }
  26% {
    transform: translate(-1.3px, -0.4px);
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5);
  }
  36% {
    transform: translate(0.3px, 0);
    animation-timing-function: ease-out;
  }
  46%,
  58% {
    transform: translate(0, 0);
    animation-timing-function: ease-out;
  }
  62% {
    transform: translate(-0.5px, 0);
    animation-timing-function: ease-in;
  }
  68%,
  76% {
    transform: translate(0, 0);
    animation-timing-function: ease-out;
  }
  80% {
    transform: translate(-0.5px, 0);
    animation-timing-function: ease-in;
  }
  86%,
  100% {
    transform: translate(0, 0);
  }
}
@keyframes ic-headphones-cup-r {
  0% {
    transform: translate(0, 0);
    animation-timing-function: ease-out;
  }
  26% {
    transform: translate(1.3px, -0.4px);
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5);
  }
  36% {
    transform: translate(-0.3px, 0);
    animation-timing-function: ease-out;
  }
  46%,
  58% {
    transform: translate(0, 0);
    animation-timing-function: ease-out;
  }
  62% {
    transform: translate(0.5px, 0);
    animation-timing-function: ease-in;
  }
  68%,
  76% {
    transform: translate(0, 0);
    animation-timing-function: ease-out;
  }
  80% {
    transform: translate(0.5px, 0);
    animation-timing-function: ease-in;
  }
  86%,
  100% {
    transform: translate(0, 0);
  }
}
@keyframes ic-headphones-note {
  0%,
  38% {
    opacity: 0;
    transform: translate(0, 1px) scale(0.6);
    animation-timing-function: ease-out;
  }
  50% {
    opacity: 1;
    transform: translate(0.4px, -1.6px) rotate(-8deg) scale(1);
    animation-timing-function: ease-in-out;
  }
  68% {
    opacity: 1;
    transform: translate(1.6px, -4.2px) rotate(8deg);
    animation-timing-function: ease-in;
  }
  88%,
  100% {
    opacity: 0;
    transform: translate(2.6px, -6.8px) rotate(-6deg);
  }
}

/* camera */
@keyframes ic-camera-press {
  0% {
    transform: scaleY(1);
    animation-timing-function: ease-out;
  }
  12% {
    transform: scale(1.02, 0.94);
    animation-timing-function: ease-in-out;
  }
  26% {
    transform: scale(0.99, 1.02);
    animation-timing-function: ease-in-out;
  }
  38%,
  100% {
    transform: scale(1);
  }
}
@keyframes ic-camera-iris {
  0%,
  10% {
    transform: scale(1);
    animation-timing-function: cubic-bezier(0.6, 0, 1, 0.6);
  }
  18%,
  26% {
    transform: scale(0.18);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  46% {
    transform: scale(1.14);
    animation-timing-function: ease-in-out;
  }
  60% {
    transform: scale(0.95);
    animation-timing-function: ease-in-out;
  }
  74%,
  100% {
    transform: scale(1);
  }
}
@keyframes ic-camera-led {
  0%,
  16% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  24% {
    transform: scale(1.8);
    animation-timing-function: ease-in-out;
  }
  44%,
  100% {
    transform: scale(1);
  }
}
@keyframes ic-camera-flash {
  0%,
  18% {
    opacity: 0;
    transform: scale(0.5);
    animation-timing-function: ease-out;
  }
  26% {
    opacity: 1;
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  56%,
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}

/* bulb */
@keyframes ic-bulb-glow {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  5% {
    opacity: 0.9;
  }
  9% {
    opacity: 0.1;
  }
  15% {
    opacity: 0.7;
  }
  19% {
    opacity: 0;
  }
  28% {
    opacity: 0;
    transform: scale(0.8);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  40% {
    opacity: 1;
    transform: scale(1.04);
  }
  72% {
    opacity: 1;
    transform: scale(1);
    animation-timing-function: ease-in;
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
@keyframes ic-bulb-filament {
  0% {
    transform: translateY(0);
  }
  5% {
    transform: translateY(-0.6px);
  }
  9% {
    transform: translateY(0);
  }
  15% {
    transform: translateY(-0.4px);
  }
  19%,
  28% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  40% {
    transform: translateY(-1.1px) scale(1.15);
    animation-timing-function: ease-in-out;
  }
  72% {
    transform: translateY(-0.7px) scale(1.08);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes ic-bulb-ray {
  0%,
  30% {
    opacity: 0;
    transform: scale(0.65);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  44% {
    opacity: 1;
    transform: scale(1.06);
    animation-timing-function: ease-in-out;
  }
  60% {
    opacity: 1;
    transform: scale(0.98);
  }
  74% {
    opacity: 1;
    transform: scale(1);
    animation-timing-function: ease-in;
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
  }
}
@keyframes ic-bulb-catch {
  0%,
  30% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  37% {
    transform: translateY(-0.7px);
    animation-timing-function: ease-in;
  }
  46%,
  100% {
    transform: translateY(0);
  }
}

/* target */
@keyframes ic-target-dart {
  0% {
    opacity: 0;
    transform: translate(8px, -8px);
    animation-timing-function: cubic-bezier(0.5, 0, 1, 0.6);
  }
  8% {
    opacity: 1;
  }
  24% {
    opacity: 1;
    transform: translate(0, 0) rotate(0);
    animation-timing-function: ease-out;
  }
  31% {
    transform: rotate(-7deg);
    animation-timing-function: ease-in-out;
  }
  38% {
    transform: rotate(5deg);
    animation-timing-function: ease-in-out;
  }
  45% {
    transform: rotate(-3deg);
    animation-timing-function: ease-in-out;
  }
  52% {
    transform: rotate(1.5deg);
    animation-timing-function: ease-in-out;
  }
  58%,
  72% {
    opacity: 1;
    transform: translate(0, 0) rotate(0);
    animation-timing-function: cubic-bezier(0.4, 0, 0.8, 0.6);
  }
  90%,
  100% {
    opacity: 0;
    transform: translate(3.5px, -3.5px);
  }
}
@keyframes ic-target-eye {
  0%,
  24% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  28% {
    transform: scale(0.6);
    animation-timing-function: ease-in-out;
  }
  40%,
  100% {
    transform: scale(1);
  }
}
@keyframes ic-target-inner {
  0%,
  24% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  29% {
    transform: scale(0.84);
    animation-timing-function: ease-in-out;
  }
  38% {
    transform: scale(1.08);
    animation-timing-function: ease-in-out;
  }
  48%,
  100% {
    transform: scale(1);
  }
}
@keyframes ic-target-outer {
  0%,
  28% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  33% {
    transform: scale(0.95);
    animation-timing-function: ease-in-out;
  }
  43% {
    transform: scale(1.04);
    animation-timing-function: ease-in-out;
  }
  54%,
  100% {
    transform: scale(1);
  }
}

/* info */
@keyframes ic-info-crouch {
  0% {
    transform: scaleY(1);
    animation-timing-function: ease-in-out;
  }
  18% {
    transform: scaleY(0.55);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  30% {
    transform: scaleY(1.14);
    animation-timing-function: ease-in-out;
  }
  42%,
  60% {
    transform: scaleY(1);
    animation-timing-function: ease-in;
  }
  66% {
    transform: scaleY(0.78);
    animation-timing-function: ease-out;
  }
  76% {
    transform: scaleY(1.04);
    animation-timing-function: ease-in-out;
  }
  86%,
  100% {
    transform: scaleY(1);
  }
}
@keyframes ic-info-toss {
  0% {
    transform: translateY(0);
    animation-timing-function: ease-in-out;
  }
  18% {
    transform: translateY(2.5px);
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1);
  }
  28% {
    transform: translateY(-1.5px) scale(0.85, 1.25);
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1);
  }
  42% {
    transform: translateY(-2.5px) scale(1);
    animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5);
  }
  60% {
    transform: translateY(0) scale(0.9, 1.15);
    animation-timing-function: ease-out;
  }
  66% {
    transform: translateY(1.2px) scale(1.35, 0.7);
    animation-timing-function: ease-in-out;
  }
  76% {
    transform: translateY(-0.4px) scale(0.95, 1.05);
    animation-timing-function: ease-in-out;
  }
  86%,
  100% {
    transform: translateY(0) scale(1);
  }
}

/* alert */
@keyframes ic-alert-jolt {
  0% {
    transform: translateY(0) scaleY(1);
    animation-timing-function: ease-out;
  }
  12% {
    transform: translateY(0.6px) scaleY(0.75);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  26% {
    transform: translateY(-1.8px) scaleY(1.2);
    animation-timing-function: ease-in-out;
  }
  44% {
    transform: translateY(0.2px) scaleY(0.96);
    animation-timing-function: ease-in-out;
  }
  56%,
  100% {
    transform: translateY(0) scaleY(1);
  }
}
@keyframes ic-alert-blink {
  0%,
  22% {
    opacity: 1;
    transform: scale(1);
  }
  28% {
    transform: scale(1.7);
  }
  36% {
    opacity: 1;
    transform: scale(1);
  }
  42% {
    opacity: 0.2;
  }
  52% {
    opacity: 1;
  }
  58% {
    transform: scale(1.7);
  }
  66% {
    opacity: 1;
    transform: scale(1);
  }
  72% {
    opacity: 0.2;
  }
  82%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes ic-alert-flare {
  0%,
  22% {
    opacity: 0;
    transform: scale(0.8);
  }
  28% {
    opacity: 1;
    transform: scale(1);
  }
  40%,
  52% {
    opacity: 0;
    transform: scale(1.1);
  }
  52.1% {
    transform: scale(0.8);
  }
  58% {
    opacity: 1;
    transform: scale(1);
  }
  72%,
  100% {
    opacity: 0;
    transform: scale(1.1);
  }
}

/* help */
@keyframes ic-help-tilt {
  0% {
    transform: rotate(0);
    animation-timing-function: ease-out;
  }
  10% {
    transform: rotate(6deg);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.3, 1);
  }
  28%,
  38% {
    transform: rotate(-18deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1);
  }
  56%,
  64% {
    transform: rotate(13deg);
    animation-timing-function: ease-in-out;
  }
  78% {
    transform: rotate(-3deg);
    animation-timing-function: ease-in-out;
  }
  88%,
  100% {
    transform: rotate(0);
  }
}
@keyframes ic-help-dot {
  0%,
  78% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  84% {
    transform: translateY(-1.2px);
    animation-timing-function: ease-in;
  }
  90% {
    transform: translateY(0) scale(1.2, 0.8);
  }
  96%,
  100% {
    transform: translateY(0) scale(1);
  }
}

/* Motion for the money and places set (sets/world.js). The trigger wrapper is the same in every set. */

:where(a, button, label, summary, [role="button"], .ic-play, .ic-host):is(
    :hover,
    :focus-visible
  )
  .ic,
.ic-play .ic {
  &.ic-wallet .i-card {
    transform-origin: 10.5px 6.5px;
    animation: ic-wallet-card 820ms linear;
  }
  &.ic-wallet .i-stripe {
    animation: ic-wallet-stripe 820ms linear;
  }
  &.ic-wallet .i-sides {
    transform-origin: 10.5px 6.5px;
    animation: ic-wallet-sides 820ms linear;
  }
  &.ic-wallet .i-body {
    transform-origin: 12px 20.5px;
    animation: ic-wallet-body 820ms ease-in-out;
  }

  &.ic-receipt .i-rows {
    animation: ic-receipt-feed 900ms linear;
  }
  &.ic-receipt .i-row-1 {
    animation: ic-receipt-out 900ms linear;
  }
  &.ic-receipt .i-fresh {
    animation: ic-receipt-print 900ms linear;
  }

  &.ic-cart .i-item {
    animation: ic-cart-item 860ms linear;
  }
  &.ic-cart .i-basket {
    animation: ic-cart-catch 860ms linear;
  }

  &.ic-bag .i-handle {
    animation: ic-bag-handle 900ms linear;
  }
  &.ic-bag .i-sack {
    transform-origin: 12px 8px;
    animation: ic-bag-sack 900ms linear;
  }

  &.ic-gift .i-lid {
    transform-origin: 12px 10px;
    animation: ic-gift-lid 820ms linear;
  }
  &.ic-gift .i-box {
    transform-origin: 12px 21px;
    animation: ic-gift-box 820ms linear;
  }
  &.ic-gift .i-bit {
    transform-box: fill-box;
    transform-origin: center;
    animation: ic-gift-bit-1 820ms linear;
  }
  &.ic-gift .i-bit-2 {
    animation-name: ic-gift-bit-2;
  }
  &.ic-gift .i-bit-3 {
    animation-name: ic-gift-bit-3;
  }

  &.ic-coin .i-toss {
    animation: ic-coin-toss 900ms linear;
  }
  &.ic-coin .i-face {
    transform-origin: 12px 12px;
    animation: ic-coin-flip 900ms linear;
  }
  &.ic-coin .i-shadow {
    transform-origin: 12px 22.5px;
    animation: ic-coin-shadow 900ms linear;
  }
  &.ic-coin .i-glint {
    transform-origin: 19.9px 3.6px;
    animation: ic-coin-glint 900ms linear;
  }

  &.ic-building .i-lit {
    animation: ic-building-low 1000ms steps(1, end);
  }
  &.ic-building .i-lit-wing {
    animation-name: ic-building-wing;
  }
  &.ic-building .i-lit-top {
    animation-name: ic-building-top;
  }
  &.ic-building .i-lit-late {
    animation-name: ic-building-late;
  }

  &.ic-car .i-chassis {
    transform-origin: 7px 16.5px;
    animation: ic-car-rev 900ms linear;
  }
  &.ic-car .i-puff {
    transform-box: fill-box;
    transform-origin: center;
    animation: ic-car-puff 380ms ease-out 40ms both;
  }
  &.ic-car .i-puff-2 {
    animation-delay: 330ms;
  }

  &.ic-plane .i-jet {
    animation: ic-plane-surge 900ms linear;
  }
  &.ic-plane .i-roll {
    transform-origin: 12px 12px;
    animation: ic-plane-roll 900ms linear;
  }
  &.ic-plane .i-trail {
    stroke-dasharray: 1;
    animation: ic-plane-trail 900ms linear;
  }

  &.ic-map .i-panel-l {
    transform-origin: 9px 12px;
    animation: ic-map-fold 820ms linear;
  }
  &.ic-map .i-panel-r {
    transform-origin: 15px 12px;
    animation: ic-map-fold 820ms linear 60ms;
  }
  &.ic-map .i-here {
    transform-box: fill-box;
    transform-origin: center;
    animation: ic-map-here 880ms linear;
  }

  &.ic-compass .i-case {
    transform-origin: 12px 12px;
    animation: ic-compass-case 950ms linear;
  }
  &.ic-compass .i-needle {
    transform-origin: 12px 12px;
    animation: ic-compass-needle 950ms linear;
  }

  &.ic-flag .i-cloth {
    transform-origin: 6px 9.75px;
    animation: ic-flag-hoist 1000ms linear;
  }
}

/* The wallet squeezes, the card rises tilted with its sides stretching so it stays tucked in. */
@keyframes ic-wallet-card {
  0% {
    transform: rotate(0) translateY(0);
    animation-timing-function: ease-in-out;
  }
  10% {
    transform: rotate(0) translateY(0.5px);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  36%,
  48% {
    transform: rotate(-9deg) translateY(-3.2px);
    animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5);
  }
  64% {
    transform: rotate(0) translateY(0.5px);
    animation-timing-function: ease-out;
  }
  78% {
    transform: rotate(0) translateY(-0.4px);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: rotate(0) translateY(0);
  }
}
@keyframes ic-wallet-stripe {
  0%,
  16% {
    opacity: 0;
  }
  28%,
  52% {
    opacity: 1;
  }
  62%,
  100% {
    opacity: 0;
  }
}
@keyframes ic-wallet-sides {
  0%,
  10% {
    opacity: 1;
    transform: rotate(0) scaleY(0);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  36%,
  48% {
    opacity: 1;
    transform: rotate(-9deg) scaleY(1);
    animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5);
  }
  64%,
  100% {
    opacity: 1;
    transform: rotate(0) scaleY(0);
  }
}
@keyframes ic-wallet-body {
  0%,
  100% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.02, 0.95);
  }
  22%,
  62% {
    transform: scale(1);
  }
  70% {
    transform: scale(1.03, 0.95);
  }
  84% {
    transform: scale(0.99, 1.01);
  }
}

/* The fresh row prints, then the paper feeds up one row with a small overshoot. The end frame
   (rows up one, fresh row in the third slot) draws exactly the rest picture. */
@keyframes ic-receipt-print {
  0% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
  6% {
    opacity: 1;
    stroke-dashoffset: 1;
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  38%,
  100% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}
@keyframes ic-receipt-feed {
  0%,
  40% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1);
  }
  66% {
    transform: translateY(-3.35px);
    animation-timing-function: ease-in-out;
  }
  80%,
  100% {
    transform: translateY(-3px);
  }
}
@keyframes ic-receipt-out {
  0%,
  40% {
    opacity: 1;
  }
  52%,
  100% {
    opacity: 0;
  }
}

@keyframes ic-cart-item {
  0% {
    opacity: 0;
    transform: translateY(-10px);
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5);
  }
  10% {
    opacity: 1;
  }
  36% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  47% {
    transform: translateY(-1.6px);
    animation-timing-function: ease-in;
  }
  57% {
    transform: translateY(0.3px);
  }
  62%,
  84% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}
@keyframes ic-cart-catch {
  0%,
  36% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  42% {
    transform: translateY(1.1px);
    animation-timing-function: ease-in-out;
  }
  52% {
    transform: translateY(-0.3px);
    animation-timing-function: ease-in-out;
  }
  58% {
    transform: translateY(0.5px);
    animation-timing-function: ease-in-out;
  }
  70%,
  100% {
    transform: translateY(0);
  }
}

/* The hand takes the handle first; the bag follows a beat later, swings under it, and sits down. */
@keyframes ic-bag-handle {
  0% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  12% {
    transform: translateY(-1.5px);
    animation-timing-function: ease-in-out;
  }
  30%,
  60% {
    transform: translateY(-3px);
    animation-timing-function: ease-in;
  }
  74% {
    transform: translateY(0.8px);
    animation-timing-function: ease-out;
  }
  88%,
  100% {
    transform: translateY(0);
  }
}
@keyframes ic-bag-sack {
  0%,
  10% {
    transform: translateY(0) rotate(0) scaleY(1);
    animation-timing-function: cubic-bezier(0.3, 0.6, 0.3, 1);
  }
  30% {
    transform: translateY(-3px) rotate(9deg) scaleY(1);
    animation-timing-function: ease-in-out;
  }
  44% {
    transform: translateY(-3px) rotate(-6deg) scaleY(1);
    animation-timing-function: ease-in-out;
  }
  60% {
    transform: translateY(-3px) rotate(2.5deg) scaleY(1);
    animation-timing-function: ease-in;
  }
  74% {
    transform: translateY(0.8px) rotate(0) scaleY(0.94);
    animation-timing-function: ease-out;
  }
  88%,
  100% {
    transform: translateY(0) rotate(0) scaleY(1);
  }
}

@keyframes ic-gift-box {
  0% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  14% {
    transform: scale(1.04, 1.05);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  26%,
  58% {
    transform: scale(1);
  }
  64% {
    transform: scale(1.03, 0.93);
  }
  78%,
  100% {
    transform: scale(1);
  }
}
@keyframes ic-gift-lid {
  0% {
    transform: translateY(0) rotate(0);
    animation-timing-function: ease-out;
  }
  14% {
    transform: translateY(-0.5px) rotate(0);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  32%,
  44% {
    transform: translateY(-4.5px) rotate(-13deg);
    animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5);
  }
  60% {
    transform: translateY(0) rotate(0);
    animation-timing-function: ease-out;
  }
  70% {
    transform: translateY(-0.9px) rotate(2deg);
    animation-timing-function: ease-in;
  }
  80%,
  100% {
    transform: translateY(0) rotate(0);
  }
}
@keyframes ic-gift-bit-1 {
  0%,
  20% {
    opacity: 0;
    transform: translate(0, 1px) rotate(0);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  28% {
    opacity: 1;
  }
  48% {
    opacity: 1;
  }
  58%,
  100% {
    opacity: 0;
    transform: translate(-7px, -1.2px) rotate(-70deg);
  }
}
@keyframes ic-gift-bit-2 {
  0%,
  22% {
    opacity: 0;
    transform: translate(0, 1px);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  30% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  60%,
  100% {
    opacity: 0;
    transform: translate(0, -2px);
  }
}
@keyframes ic-gift-bit-3 {
  0%,
  24% {
    opacity: 0;
    transform: translate(0, 1px) rotate(0);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  32% {
    opacity: 1;
  }
  52% {
    opacity: 1;
  }
  62%,
  100% {
    opacity: 0;
    transform: translate(7px, -2.2px) rotate(70deg);
  }
}

@keyframes ic-coin-toss {
  0% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  6% {
    transform: translateY(0.6px);
    animation-timing-function: cubic-bezier(0.25, 0.7, 0.45, 1);
  }
  34% {
    transform: translateY(-5.5px);
    animation-timing-function: cubic-bezier(0.55, 0, 0.75, 0.3);
  }
  62% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  72% {
    transform: translateY(-1.1px);
    animation-timing-function: ease-in;
  }
  82%,
  100% {
    transform: translateY(0);
  }
}
@keyframes ic-coin-flip {
  0%,
  6% {
    transform: scaleX(1);
    animation-timing-function: ease-in-out;
  }
  20% {
    transform: scaleX(-1);
    animation-timing-function: ease-in-out;
  }
  34% {
    transform: scaleX(1);
    animation-timing-function: ease-in-out;
  }
  48% {
    transform: scaleX(-1);
    animation-timing-function: ease-in-out;
  }
  62%,
  100% {
    transform: scaleX(1);
  }
}
@keyframes ic-coin-shadow {
  0%,
  100% {
    opacity: 0;
    transform: scaleX(1);
  }
  8%,
  82% {
    opacity: 0.35;
  }
  34% {
    opacity: 0.2;
    transform: scaleX(0.5);
  }
  62% {
    opacity: 0.5;
    transform: scaleX(1);
  }
}
@keyframes ic-coin-glint {
  0%,
  64% {
    opacity: 0;
    transform: scale(0) rotate(0);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  74% {
    opacity: 1;
    transform: scale(1) rotate(45deg);
    animation-timing-function: ease-in;
  }
  92%,
  100% {
    opacity: 0;
    transform: scale(0.3) rotate(90deg);
  }
}

/* Floor by floor from the bottom, then out top-down; the corner office stays on late. */
@keyframes ic-building-low {
  0% {
    opacity: 0;
  }
  10%,
  70% {
    opacity: 1;
  }
  74% {
    opacity: 0;
  }
}
@keyframes ic-building-wing {
  0% {
    opacity: 0;
  }
  18%,
  66% {
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
}
@keyframes ic-building-top {
  0% {
    opacity: 0;
  }
  28%,
  62% {
    opacity: 1;
  }
  66% {
    opacity: 0;
  }
}
@keyframes ic-building-late {
  0% {
    opacity: 0;
  }
  38% {
    opacity: 1;
  }
  43% {
    opacity: 0;
  }
  47%,
  92% {
    opacity: 1;
  }
  96% {
    opacity: 0;
  }
}

/* Each rev squats the rear and lifts the nose; the wheels stay planted. */
@keyframes ic-car-rev {
  0% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  12% {
    transform: rotate(-4.5deg);
    animation-timing-function: ease-in-out;
  }
  26% {
    transform: rotate(0.8deg);
    animation-timing-function: ease-in-out;
  }
  34% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  46% {
    transform: rotate(-6deg);
    animation-timing-function: ease-in-out;
  }
  60% {
    transform: rotate(1.4deg);
    animation-timing-function: ease-in-out;
  }
  72% {
    transform: rotate(-0.6deg);
    animation-timing-function: ease-in-out;
  }
  84%,
  100% {
    transform: rotate(0);
  }
}
@keyframes ic-car-puff {
  0% {
    opacity: 0;
    transform: translate(0.6px, 0) scale(0.3);
  }
  20% {
    opacity: 0.9;
    transform: translate(0, -0.2px) scale(0.8);
  }
  100% {
    opacity: 0;
    transform: translate(-1.6px, -1.8px) scale(1.5);
  }
}

/* In the plane's own frame (nose up): it eases back, surges forward and rolls through its wings. */
@keyframes ic-plane-surge {
  0% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  12% {
    transform: translateY(0.7px);
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  50% {
    transform: translateY(-2.2px);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes ic-plane-roll {
  0%,
  14% {
    transform: scaleX(1);
    animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.6);
  }
  30% {
    transform: scaleX(0.06);
    animation-timing-function: cubic-bezier(0.2, 0.5, 0.4, 1);
  }
  48%,
  100% {
    transform: scaleX(1);
  }
}
@keyframes ic-plane-trail {
  0%,
  44% {
    opacity: 0;
    stroke-dashoffset: 1;
    animation-timing-function: ease-out;
  }
  48% {
    opacity: 0.8;
  }
  70% {
    opacity: 0.8;
    stroke-dashoffset: 0;
  }
  94%,
  100% {
    opacity: 0;
    stroke-dashoffset: -1;
  }
}

@keyframes ic-map-fold {
  0% {
    transform: scaleX(1);
    animation-timing-function: cubic-bezier(0.5, 0, 0.7, 0.4);
  }
  28%,
  40% {
    transform: scaleX(0.1);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1.2);
  }
  64% {
    transform: scaleX(1.12);
    animation-timing-function: ease-in-out;
  }
  80% {
    transform: scaleX(0.97);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: scaleX(1);
  }
}
@keyframes ic-map-here {
  0%,
  52% {
    transform: scale(1);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  64% {
    transform: scale(1.6);
    animation-timing-function: ease-in-out;
  }
  78% {
    transform: scale(0.85);
    animation-timing-function: ease-in-out;
  }
  90%,
  100% {
    transform: scale(1);
  }
}

/* The case is turned away and back; the needle is dragged a little, then swings and hunts. */
@keyframes ic-compass-case {
  0% {
    transform: rotate(0);
    animation-timing-function: ease-out;
  }
  10% {
    transform: rotate(10deg);
    animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1);
  }
  40%,
  48% {
    transform: rotate(-75deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1);
  }
  84%,
  100% {
    transform: rotate(0);
  }
}
@keyframes ic-compass-needle {
  0% {
    transform: rotate(0);
    animation-timing-function: ease-in-out;
  }
  14% {
    transform: rotate(4deg);
    animation-timing-function: ease-in-out;
  }
  38% {
    transform: rotate(-28deg);
    animation-timing-function: ease-in-out;
  }
  54% {
    transform: rotate(20deg);
    animation-timing-function: ease-in-out;
  }
  68% {
    transform: rotate(-11deg);
    animation-timing-function: ease-in-out;
  }
  80% {
    transform: rotate(5deg);
    animation-timing-function: ease-in-out;
  }
  90% {
    transform: rotate(-1.5deg);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: rotate(0);
  }
}

/* Down the pole, two hand-over-hand tugs back up, then the cloth ripples out. */
@keyframes ic-flag-hoist {
  0% {
    transform: translateY(0) skewY(0);
    animation-timing-function: ease-in;
  }
  16% {
    transform: translateY(6px) skewY(-7deg);
    animation-timing-function: ease-out;
  }
  26% {
    transform: translateY(6px) skewY(2deg);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  36%,
  42% {
    transform: translateY(3px) skewY(-3deg);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  54% {
    transform: translateY(-0.4px) skewY(-4deg);
    animation-timing-function: ease-in-out;
  }
  64% {
    transform: translateY(0) skewY(5deg);
    animation-timing-function: ease-in-out;
  }
  76% {
    transform: translateY(0) skewY(-3deg);
    animation-timing-function: ease-in-out;
  }
  88% {
    transform: translateY(0) skewY(1.5deg);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: translateY(0) skewY(0);
  }
}

/* Motion for Work and commerce (sets/work.js). The trigger wrapper is the same in every set. */

:where(a, button, label, summary, [role="button"], .ic-play, .ic-host):is(
    :hover,
    :focus-visible
  )
  .ic,
.ic-play .ic {
  &.ic-briefcase .i-clasp {
    transform-box: fill-box;
    transform-origin: 50% 0%;
    animation: ic-briefcase-clasp 900ms linear;
  }
  &.ic-briefcase .i-lid {
    transform-origin: 21px 12.5px;
    animation: ic-briefcase-lid 900ms linear;
  }
  &.ic-briefcase .i-paper {
    animation: ic-briefcase-paper 900ms linear;
  }

  &.ic-box .i-crate {
    transform-origin: 12px 21.2px;
    animation: ic-box-hop 900ms linear;
  }
  &.ic-box .i-tail {
    transform-origin: 16.1px 11.5px;
    animation: ic-box-tail 900ms linear;
  }

  &.ic-truck .i-rig {
    animation: ic-truck-roll 900ms linear;
  }
  &.ic-truck .i-body {
    transform-origin: 17px 17.5px;
    animation: ic-truck-pitch 900ms linear;
  }
  &.ic-truck .i-load {
    transform-origin: 14px 15px;
    animation: ic-truck-load 900ms linear;
  }
  &.ic-truck .i-speed {
    animation: ic-truck-speed 900ms linear;
  }

  &.ic-ticket .i-stub {
    transform-origin: 14.5px 18px;
    animation: ic-ticket-tear 900ms linear;
  }
  &.ic-ticket .i-main {
    transform-origin: 3.5px 12px;
    animation: ic-ticket-recoil 900ms linear;
  }

  &.ic-store .i-valance {
    transform-origin: 12px 9.5px;
    animation: ic-store-awning 900ms linear;
  }
  &.ic-store .i-door {
    transform-origin: 10px 12px;
    animation: ic-store-door 900ms linear;
  }

  &.ic-bank .i-roof {
    animation: ic-bank-roof 950ms linear;
  }
  &.ic-bank .i-seal {
    transform-box: fill-box;
    transform-origin: center;
    animation: ic-bank-seal 950ms linear;
  }
  &.ic-bank .i-col {
    transform-origin: 12px 18px;
    animation: ic-bank-col 950ms linear;
  }
  &.ic-bank .i-col-2 {
    animation-delay: 40ms;
  }
  &.ic-bank .i-col-3 {
    animation-delay: 80ms;
  }
  &.ic-bank .i-col-4 {
    animation-delay: 120ms;
  }

  &.ic-calculator .i-k1,
  &.ic-calculator .i-k2,
  &.ic-calculator .i-k3,
  &.ic-calculator .i-eq {
    transform-box: fill-box;
    transform-origin: center;
    animation: ic-calculator-press 170ms ease-out 60ms;
  }
  &.ic-calculator .i-k2 {
    animation-delay: 210ms;
  }
  &.ic-calculator .i-k3 {
    animation-delay: 360ms;
  }
  &.ic-calculator .i-eq {
    animation-delay: 540ms;
  }
  &.ic-calculator .i-d1 {
    animation: ic-calculator-d1 1000ms linear;
  }
  &.ic-calculator .i-d2 {
    animation: ic-calculator-d2 1000ms linear;
  }
  &.ic-calculator .i-d3 {
    animation: ic-calculator-d3 1000ms linear;
  }
  &.ic-calculator .i-sum {
    animation: ic-calculator-sum 1000ms linear;
  }

  &.ic-percent .i-pair {
    transform-origin: 12px 12px;
    animation: ic-percent-orbit 900ms linear;
  }
  &.ic-percent .i-slash {
    transform-origin: 12px 12px;
    animation: ic-percent-duck 900ms linear;
  }

  &.ic-trending-up .i-line,
  &.ic-trending-down .i-line {
    stroke-dasharray: 1;
    animation: ic-trending-line 1000ms linear;
  }
  &.ic-trending-up .i-head {
    transform-origin: 21px 7px;
    animation: ic-trending-up-head 1000ms linear;
  }
  &.ic-trending-down .i-head {
    transform-origin: 21px 17px;
    animation: ic-trending-down-head 1000ms linear;
  }

  &.ic-pie-chart .i-slice {
    transform-origin: 13.2px 10.8px;
    animation: ic-pie-chart-slice 900ms linear;
  }
  &.ic-pie-chart .i-pie {
    animation: ic-pie-chart-pie 900ms linear;
  }
  &.ic-pie-chart .i-crumb {
    animation: ic-pie-chart-crumb 900ms linear;
  }

  &.ic-activity .i-trace {
    transform-origin: 12px 12px;
    animation: ic-activity-beat 1000ms linear;
  }
  &.ic-activity .i-blip {
    animation: ic-activity-blip 1000ms linear;
  }
}

/* The clasp drops open, the top half hinges up at the back, a sheet peeks out, then it all shuts. */
@keyframes ic-briefcase-clasp {
  0% {
    transform: translateY(0) scaleY(1);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  12%,
  66% {
    transform: translateY(1.2px) scaleY(0.7);
    animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.5);
  }
  74% {
    transform: translateY(-0.3px) scaleY(1.05);
    animation-timing-function: ease-out;
  }
  84%,
  100% {
    transform: translateY(0) scaleY(1);
  }
}
@keyframes ic-briefcase-lid {
  0%,
  12% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  32% {
    transform: rotate(11deg);
    animation-timing-function: ease-in-out;
  }
  54% {
    transform: rotate(9deg);
    animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.4);
  }
  64% {
    transform: rotate(0);
    animation-timing-function: ease-out;
  }
  71% {
    transform: rotate(1.5deg);
    animation-timing-function: ease-in;
  }
  78%,
  100% {
    transform: rotate(0);
  }
}
@keyframes ic-briefcase-paper {
  0%,
  18% {
    opacity: 0;
    transform: translateY(1.5px);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  26% {
    opacity: 1;
  }
  36%,
  50% {
    opacity: 1;
    transform: translateY(-0.8px);
    animation-timing-function: ease-in;
  }
  60%,
  100% {
    opacity: 0;
    transform: translateY(1.5px);
  }
}

/* Hop, land on the front corner, tip flat; the loose tape end flaps up and sticks back down. */
@keyframes ic-box-hop {
  0% {
    transform: translateY(0) rotate(0) scaleY(1);
    animation-timing-function: ease-out;
  }
  10% {
    transform: translateY(0) rotate(0) scaleY(0.93);
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1);
  }
  30% {
    transform: translateY(-3.2px) rotate(-7deg) scaleY(1.02);
    animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5);
  }
  46% {
    transform: translateY(0) rotate(-6deg) scaleY(1);
    animation-timing-function: ease-in;
  }
  56% {
    transform: translateY(0) rotate(1.5deg) scaleY(0.95);
    animation-timing-function: ease-out;
  }
  66% {
    transform: translateY(0) rotate(-0.6deg) scaleY(1.01);
    animation-timing-function: ease-in-out;
  }
  76%,
  100% {
    transform: translateY(0) rotate(0) scaleY(1);
  }
}
@keyframes ic-box-tail {
  0%,
  46% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1);
  }
  56% {
    transform: rotate(-55deg);
    animation-timing-function: ease-in-out;
  }
  68% {
    transform: rotate(-20deg);
    animation-timing-function: ease-in-out;
  }
  76% {
    transform: rotate(-32deg);
    animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5);
  }
  88%,
  100% {
    transform: rotate(0);
  }
}

/* Rolls forward and brakes: the body dives onto the front wheels and the load lurches after it. */
@keyframes ic-truck-roll {
  0% {
    transform: translateX(0);
    animation-timing-function: ease-out;
  }
  8% {
    transform: translateX(-0.5px);
    animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1);
  }
  38% {
    transform: translateX(2px);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes ic-truck-pitch {
  0%,
  8% {
    transform: rotate(0);
    animation-timing-function: ease-in-out;
  }
  22% {
    transform: rotate(-2deg);
    animation-timing-function: ease-out;
  }
  40% {
    transform: rotate(4deg);
    animation-timing-function: ease-in-out;
  }
  56% {
    transform: rotate(-1.5deg);
    animation-timing-function: ease-in-out;
  }
  70% {
    transform: rotate(0.6deg);
    animation-timing-function: ease-in-out;
  }
  82%,
  100% {
    transform: rotate(0);
  }
}
@keyframes ic-truck-load {
  0%,
  36% {
    transform: rotate(0);
    animation-timing-function: ease-out;
  }
  46% {
    transform: rotate(3deg);
    animation-timing-function: ease-in-out;
  }
  60% {
    transform: rotate(-1deg);
    animation-timing-function: ease-in-out;
  }
  72%,
  100% {
    transform: rotate(0);
  }
}
@keyframes ic-truck-speed {
  0%,
  8% {
    opacity: 0;
    transform: translateX(1.5px);
  }
  18%,
  30% {
    opacity: 1;
    transform: translateX(0);
  }
  42%,
  100% {
    opacity: 0;
    transform: translateX(-1px);
  }
}

/* A tug in, then the stub rips down the perforation and swings off its bottom corner. */
@keyframes ic-ticket-tear {
  0% {
    transform: translate(0, 0) rotate(0);
    animation-timing-function: ease-out;
  }
  10% {
    transform: translate(-0.4px, 0) rotate(0);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  30%,
  48% {
    transform: translate(1.4px, 0.6px) rotate(20deg);
    animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5);
  }
  60% {
    transform: translate(0, 0) rotate(-2deg);
    animation-timing-function: ease-out;
  }
  70% {
    transform: translate(0, 0) rotate(1deg);
    animation-timing-function: ease-in-out;
  }
  80%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
}
@keyframes ic-ticket-recoil {
  0%,
  12% {
    transform: rotate(0);
    animation-timing-function: ease-out;
  }
  24% {
    transform: rotate(-3deg);
    animation-timing-function: ease-in-out;
  }
  40%,
  100% {
    transform: rotate(0);
  }
}

/* The valance rolls up tight, then drops open and flaps; the door swings in on its hinge. */
@keyframes ic-store-awning {
  0% {
    transform: scaleY(1);
    animation-timing-function: ease-out;
  }
  14% {
    transform: scaleY(0.2);
    animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.4);
  }
  34% {
    transform: scaleY(1.45);
    animation-timing-function: ease-in-out;
  }
  48% {
    transform: scaleY(0.85);
    animation-timing-function: ease-in-out;
  }
  62% {
    transform: scaleY(1.12);
    animation-timing-function: ease-in-out;
  }
  76% {
    transform: scaleY(0.97);
    animation-timing-function: ease-in-out;
  }
  88%,
  100% {
    transform: scaleY(1);
  }
}
@keyframes ic-store-door {
  0%,
  24% {
    transform: scaleX(1);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  40%,
  58% {
    transform: scaleX(0.2);
    animation-timing-function: cubic-bezier(0.5, 0, 0.7, 0.5);
  }
  74% {
    transform: scaleX(1.05);
    animation-timing-function: ease-out;
  }
  84%,
  100% {
    transform: scaleX(1);
  }
}

/* The roof rises on stretching columns, then drops; the columns take the load left to right. */
@keyframes ic-bank-roof {
  0% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  8% {
    transform: translateY(0.4px);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  32%,
  40% {
    transform: translateY(-2.2px);
    animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5);
  }
  50% {
    transform: translateY(0.9px);
    animation-timing-function: ease-out;
  }
  64% {
    transform: translateY(-0.2px);
    animation-timing-function: ease-in-out;
  }
  76%,
  100% {
    transform: translateY(0);
  }
}
@keyframes ic-bank-col {
  0% {
    transform: scaleY(1);
    animation-timing-function: ease-out;
  }
  8% {
    transform: scaleY(0.95);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  30%,
  38% {
    transform: scaleY(1.2);
    animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5);
  }
  48% {
    transform: scaleY(0.83);
    animation-timing-function: ease-out;
  }
  62% {
    transform: scaleY(1.03);
    animation-timing-function: ease-in-out;
  }
  74%,
  100% {
    transform: scaleY(1);
  }
}
@keyframes ic-bank-seal {
  0%,
  48% {
    transform: scale(1);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  58% {
    transform: scale(1.5);
    animation-timing-function: ease-in-out;
  }
  72% {
    transform: scale(0.9);
    animation-timing-function: ease-in-out;
  }
  84%,
  100% {
    transform: scale(1);
  }
}

@keyframes ic-calculator-press {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  35% {
    opacity: 0.45;
    transform: scale(0.55);
  }
}
/* Each key adds a digit on the right and pushes the ones before it left; = swaps them for a result. */
@keyframes ic-calculator-d1 {
  0%,
  8% {
    opacity: 0;
    transform: translateX(0);
  }
  12%,
  21% {
    opacity: 1;
    transform: translateX(0);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  26%,
  36% {
    opacity: 1;
    transform: translateX(-1.9px);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  41%,
  56% {
    opacity: 1;
    transform: translateX(-3.8px);
  }
  62%,
  100% {
    opacity: 0;
    transform: translateX(-3.8px);
  }
}
@keyframes ic-calculator-d2 {
  0%,
  23% {
    opacity: 0;
    transform: translateX(0);
  }
  27%,
  36% {
    opacity: 1;
    transform: translateX(0);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  41%,
  56% {
    opacity: 1;
    transform: translateX(-1.9px);
  }
  62%,
  100% {
    opacity: 0;
    transform: translateX(-1.9px);
  }
}
@keyframes ic-calculator-d3 {
  0%,
  38% {
    opacity: 0;
  }
  42%,
  56% {
    opacity: 1;
  }
  62%,
  100% {
    opacity: 0;
  }
}
@keyframes ic-calculator-sum {
  0%,
  58% {
    opacity: 0;
    stroke-dashoffset: 1;
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  60% {
    opacity: 1;
  }
  74%,
  86% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  98%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

/* The pair winds back, orbits half a turn and settles; % is symmetric, so 180deg is the rest pose. */
@keyframes ic-percent-orbit {
  0% {
    transform: rotate(0);
    animation-timing-function: ease-out;
  }
  12% {
    transform: rotate(-14deg);
    animation-timing-function: cubic-bezier(0.45, 0, 0.3, 1);
  }
  58% {
    transform: rotate(192deg);
    animation-timing-function: ease-in-out;
  }
  74% {
    transform: rotate(176deg);
    animation-timing-function: ease-in-out;
  }
  86% {
    transform: rotate(181.5deg);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: rotate(180deg);
  }
}
@keyframes ic-percent-duck {
  0%,
  14% {
    transform: scale(1);
    animation-timing-function: ease-in;
  }
  28%,
  34% {
    transform: scale(0.3);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  50% {
    transform: scale(1.08);
    animation-timing-function: ease-in-out;
  }
  62%,
  100% {
    transform: scale(1);
  }
}

/* Reel back from the tip to the start (4-18%), pause, redraw to the tip (21-74%) at a constant
   rate. The last leg starts 53% of the way along the stroke (49%), which is where the arrowhead
   fades back in to ride the tip home. */
@keyframes ic-trending-line {
  0%,
  4% {
    stroke-dashoffset: 0;
  }
  18%,
  21% {
    stroke-dashoffset: 1;
  }
  74%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes ic-trending-up-head {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    animation-timing-function: ease-in;
  }
  8% {
    opacity: 0;
    transform: translate(-2.5px, 2.5px) scale(1);
  }
  49% {
    opacity: 0;
    transform: translate(-8.5px, 8.5px) scale(1);
  }
  55% {
    opacity: 1;
  }
  74% {
    transform: translate(0, 0) scale(1);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  82% {
    transform: translate(0, 0) scale(1.25);
    animation-timing-function: ease-in-out;
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}
@keyframes ic-trending-down-head {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    animation-timing-function: ease-in;
  }
  8% {
    opacity: 0;
    transform: translate(-2.5px, -2.5px) scale(1);
  }
  49% {
    opacity: 0;
    transform: translate(-8.5px, -8.5px) scale(1);
  }
  55% {
    opacity: 1;
  }
  74% {
    transform: translate(0, 0) scale(1);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  82% {
    transform: translate(0, 0) scale(1.25);
    animation-timing-function: ease-in-out;
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

/* The slice sinks flush, pops out tilted (dropping a crumb) and settles back into its gap. */
@keyframes ic-pie-chart-slice {
  0% {
    transform: translate(0, 0) rotate(0);
    animation-timing-function: ease-in-out;
  }
  14% {
    transform: translate(-1.1px, 1.1px) rotate(0);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  36% {
    transform: translate(1.6px, -1.6px) rotate(-8deg);
    animation-timing-function: ease-in-out;
  }
  52% {
    transform: translate(1.1px, -1.1px) rotate(4deg);
    animation-timing-function: ease-in-out;
  }
  66% {
    transform: translate(-0.2px, 0.2px) rotate(-1deg);
    animation-timing-function: ease-in-out;
  }
  80%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
}
@keyframes ic-pie-chart-pie {
  0%,
  10% {
    transform: translate(0, 0);
    animation-timing-function: ease-out;
  }
  16% {
    transform: translate(-0.35px, 0.35px);
    animation-timing-function: ease-in-out;
  }
  30%,
  100% {
    transform: translate(0, 0);
  }
}
@keyframes ic-pie-chart-crumb {
  0%,
  30% {
    opacity: 0;
    transform: translate(0, 0);
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6);
  }
  34% {
    opacity: 1;
  }
  64% {
    opacity: 1;
  }
  74%,
  100% {
    opacity: 0;
    transform: translate(0.8px, 7.5px);
  }
}

/* Two beats: each peak spikes as the blip crosses it (flat parts sit on the scale axis). */
@keyframes ic-activity-beat {
  0%,
  20% {
    transform: scaleY(1);
    animation-timing-function: ease-out;
  }
  28% {
    transform: scaleY(1.3);
    animation-timing-function: ease-in-out;
  }
  38% {
    transform: scaleY(0.92);
    animation-timing-function: ease-in-out;
  }
  48% {
    transform: scaleY(1);
    animation-timing-function: ease-out;
  }
  58% {
    transform: scaleY(1.24);
    animation-timing-function: ease-in-out;
  }
  68% {
    transform: scaleY(0.95);
    animation-timing-function: ease-in-out;
  }
  80%,
  100% {
    transform: scaleY(1);
  }
}
@keyframes ic-activity-blip {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  5% {
    opacity: 1;
    transform: translate(0, 0);
  }
  14.1% {
    transform: translate(4px, 0);
  }
  29% {
    transform: translate(6.5px, -6px);
  }
  58.7% {
    transform: translate(11.5px, 6px);
  }
  73.6% {
    transform: translate(14px, 0);
  }
  85% {
    opacity: 1;
    transform: translate(19px, 0);
  }
  92%,
  100% {
    opacity: 0;
    transform: translate(19px, 0);
  }
}

/* Motion for Food, health and travel (sets/life.js). The trigger wrapper is the same in every set. */

:where(a, button, label, summary, [role="button"], .ic-play, .ic-host):is(
    :hover,
    :focus-visible
  )
  .ic,
.ic-play .ic {
  /* The steam curls up and drifts off, and fresh wisps rise out of the cup. */
  &.ic-coffee .i-steam {
    animation: ic-coffee-steam 820ms linear;
  }
  &.ic-coffee .i-steam-2 {
    animation-name: ic-coffee-steam-2;
    animation-delay: 130ms;
  }

  /* Fork and knife lean in, clink at the tips and spring apart. */
  &.ic-utensils .i-fork {
    transform-origin: 8px 21px;
    animation: ic-utensils-fork 800ms linear;
  }
  &.ic-utensils .i-knife {
    transform-origin: 17.5px 21px;
    animation: ic-utensils-knife 800ms linear;
  }
  &.ic-utensils .i-clink {
    transform-origin: 12.5px 2px;
    animation: ic-utensils-clink 800ms ease-out;
  }

  /* The pedals turn, the bike pops a wheelie and lands back on both wheels. */
  &.ic-bike .i-ride {
    transform-origin: 5.5px 20.1px;
    animation: ic-bike-wheelie 1000ms linear;
  }
  &.ic-bike .i-crank {
    transform-origin: 11px 16.5px;
    animation: ic-bike-crank 1000ms ease-in-out;
  }
  &.ic-bike .i-speed {
    animation: ic-bike-speed 1000ms ease-out;
  }

  /* The train rocks on its bogies as sleepers rush under it, and its lamp flashes. */
  &.ic-train .i-car {
    transform-origin: 12px 17px;
    animation: ic-train-rock 900ms ease-in-out;
  }
  &.ic-train .i-tie {
    animation: ic-train-tie 900ms linear;
  }
  &.ic-train .i-glow {
    transform-origin: 12px 13.8px;
    animation: ic-train-glow 900ms ease-out;
  }

  /* The rocket rumbles, fires, lifts off in a puff of smoke and eases back onto the pad. */
  &.ic-rocket .i-ship {
    animation: ic-rocket-launch 1000ms linear;
  }
  &.ic-rocket .i-thrust {
    transform-origin: 12px 18.4px;
    animation: ic-rocket-thrust 1000ms linear;
  }
  &.ic-rocket .i-puff {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: ic-rocket-puff-l 700ms ease-out 200ms;
  }
  &.ic-rocket .i-puff-2 {
    animation-name: ic-rocket-puff-r;
    animation-delay: 250ms;
  }

  /* The cap is tossed, turns in the air and lands; the tassel swings behind it. */
  &.ic-graduation .i-cap {
    transform-origin: 12px 11px;
    animation: ic-graduation-toss 1000ms linear;
  }
  &.ic-graduation .i-tassel {
    transform-origin: 21.5px 8.5px;
    animation: ic-graduation-tassel 1000ms ease-in-out;
  }

  /* The capsule twists open, a few grains spill out, and it clicks shut. */
  &.ic-pill .i-half-l {
    transform-origin: 12px 12px;
    animation: ic-pill-half-l 900ms ease-in-out;
  }
  &.ic-pill .i-half-r {
    transform-origin: 12px 12px;
    animation: ic-pill-half-r 900ms ease-in-out;
  }
  &.ic-pill .i-grain {
    animation: ic-pill-grain-1 900ms linear;
  }
  &.ic-pill .i-grain-2 {
    animation-name: ic-pill-grain-2;
  }
  &.ic-pill .i-grain-3 {
    animation-name: ic-pill-grain-3;
  }

  /* The cross beats twice like a pulse and the case thumps along with it. */
  &.ic-first-aid .i-cross {
    transform-origin: 12px 13.25px;
    animation: ic-first-aid-beat 900ms ease-in-out;
  }
  &.ic-first-aid .i-kit {
    transform-origin: 12px 20px;
    animation: ic-first-aid-thump 900ms ease-in-out;
  }

  /* It presses down with toes splayed, lifts away leaving a print, and steps back in. */
  &.ic-paw .i-foot {
    transform-origin: 12px 21px;
    animation: ic-paw-step 1000ms linear;
  }
  &.ic-paw .i-toe {
    animation: ic-paw-toe-1 1000ms ease-in-out;
  }
  &.ic-paw .i-toe-2 {
    animation-name: ic-paw-toe-2;
  }
  &.ic-paw .i-toe-3 {
    animation-name: ic-paw-toe-3;
  }
  &.ic-paw .i-toe-4 {
    animation-name: ic-paw-toe-4;
  }
  &.ic-paw .i-print {
    animation: ic-paw-print 1000ms linear;
  }

  /* The pillow is plumped, and a couple of z's drift up off it. */
  &.ic-bed .i-pillow {
    transform-origin: 8px 12.5px;
    animation: ic-bed-plump 700ms linear;
  }
  &.ic-bed .i-zz {
    animation: ic-bed-zz 680ms ease-out 140ms;
  }
  &.ic-bed .i-zz-2 {
    animation-delay: 300ms;
  }
}

@keyframes ic-coffee-steam {
  0% {
    opacity: 1;
    transform: none;
    animation-timing-function: ease-in;
  }
  42% {
    opacity: 0;
    transform: translate(0.6px, -3px);
  }
  43% {
    opacity: 0;
    transform: translate(0, 2px);
    animation-timing-function: ease-out;
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes ic-coffee-steam-2 {
  0% {
    opacity: 1;
    transform: none;
    animation-timing-function: ease-in;
  }
  42% {
    opacity: 0;
    transform: translate(-0.6px, -3px);
  }
  43% {
    opacity: 0;
    transform: translate(0, 2px);
    animation-timing-function: ease-out;
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes ic-utensils-fork {
  0% {
    transform: none;
    animation-timing-function: ease-out;
  }
  14% {
    transform: rotate(-3deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6);
  }
  34% {
    transform: rotate(4.5deg);
    animation-timing-function: ease-out;
  }
  48% {
    transform: rotate(2deg);
    animation-timing-function: ease-in-out;
  }
  62% {
    transform: rotate(-1.5deg);
    animation-timing-function: ease-in-out;
  }
  78% {
    transform: rotate(0.5deg);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: none;
  }
}
@keyframes ic-utensils-knife {
  0% {
    transform: none;
    animation-timing-function: ease-out;
  }
  14% {
    transform: rotate(3deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6);
  }
  34% {
    transform: rotate(-4.5deg);
    animation-timing-function: ease-out;
  }
  48% {
    transform: rotate(-2deg);
    animation-timing-function: ease-in-out;
  }
  62% {
    transform: rotate(1.5deg);
    animation-timing-function: ease-in-out;
  }
  78% {
    transform: rotate(-0.5deg);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: none;
  }
}
@keyframes ic-utensils-clink {
  0%,
  32% {
    opacity: 0;
    transform: scale(0.5);
  }
  36% {
    opacity: 1;
  }
  58%,
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

@keyframes ic-bike-wheelie {
  0% {
    transform: none;
    animation-timing-function: ease-in-out;
  }
  12% {
    transform: rotate(2deg);
    animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1);
  }
  40% {
    transform: rotate(-14deg);
    animation-timing-function: ease-in-out;
  }
  56% {
    transform: rotate(-11deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5);
  }
  72% {
    transform: rotate(1.5deg);
    animation-timing-function: ease-out;
  }
  84% {
    transform: rotate(-0.8deg);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: none;
  }
}
@keyframes ic-bike-crank {
  0% {
    transform: rotate(0);
  }
  80%,
  100% {
    transform: rotate(360deg);
  }
}
@keyframes ic-bike-speed {
  0%,
  12% {
    opacity: 0;
    transform: translateX(1.5px);
  }
  30% {
    opacity: 1;
  }
  60%,
  100% {
    opacity: 0;
    transform: translateX(-1.5px);
  }
}

@keyframes ic-train-rock {
  10% {
    transform: rotate(-3deg);
  }
  24% {
    transform: rotate(3deg) translateY(-0.4px);
  }
  38% {
    transform: rotate(-2.2deg);
  }
  52% {
    transform: rotate(1.8deg) translateY(-0.3px);
  }
  66% {
    transform: rotate(-1deg);
  }
  80% {
    transform: rotate(0.4deg);
  }
}
@keyframes ic-train-tie {
  0% {
    opacity: 1;
    transform: none;
    animation-timing-function: ease-in;
  }
  24% {
    opacity: 0;
    transform: translateY(1.8px) scaleX(1.1);
  }
  25% {
    opacity: 0;
    transform: translateY(-1.6px) scaleX(0.8);
    animation-timing-function: ease-out;
  }
  48% {
    opacity: 1;
    transform: none;
    animation-timing-function: ease-in;
  }
  72% {
    opacity: 0;
    transform: translateY(1.8px) scaleX(1.1);
  }
  73% {
    opacity: 0;
    transform: translateY(-1.6px) scaleX(0.8);
    animation-timing-function: ease-out;
  }
  96%,
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes ic-train-glow {
  0%,
  6% {
    opacity: 0;
    transform: scale(0.5);
  }
  10% {
    opacity: 1;
  }
  34% {
    opacity: 0;
    transform: scale(1.5);
  }
  46% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
  }
  76%,
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

@keyframes ic-rocket-launch {
  0% {
    transform: none;
  }
  4% {
    transform: translate(0.35px, 0.1px);
  }
  8% {
    transform: translate(-0.35px, 0);
  }
  12% {
    transform: translate(0.35px, 0.2px);
  }
  16% {
    transform: translate(-0.35px, 0.2px);
  }
  20% {
    transform: translate(0, 0.5px);
    animation-timing-function: cubic-bezier(0.5, 0, 0.7, 0.4);
  }
  34% {
    transform: translate(0, -1.6px);
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.3, 1);
  }
  52% {
    transform: translate(0, -3.2px);
    animation-timing-function: ease-in-out;
  }
  90% {
    transform: translate(0, 0.25px);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: none;
  }
}
@keyframes ic-rocket-thrust {
  0%,
  4% {
    opacity: 0;
    transform: scaleY(0.4);
  }
  8% {
    opacity: 1;
    transform: scaleY(0.8);
  }
  14% {
    transform: scaleY(0.6);
  }
  24% {
    transform: scaleY(1.5);
  }
  32% {
    transform: scaleY(1.1);
  }
  42% {
    transform: scaleY(1.4);
  }
  58% {
    transform: scaleY(0.9);
  }
  74% {
    opacity: 1;
    transform: scaleY(0.7);
  }
  88%,
  100% {
    opacity: 0;
    transform: scaleY(0.3);
  }
}
@keyframes ic-rocket-puff-l {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-2px, 0.4px) scale(1.5);
  }
}
@keyframes ic-rocket-puff-r {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(2px, 0.4px) scale(1.5);
  }
}

@keyframes ic-graduation-toss {
  0% {
    transform: none;
    animation-timing-function: ease-in-out;
  }
  12% {
    transform: translateY(1px) scale(1.03, 0.95);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1);
  }
  42% {
    transform: translateY(-3.6px) rotate(-10deg);
    animation-timing-function: ease-in-out;
  }
  54% {
    transform: translateY(-3.4px) rotate(4deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5);
  }
  72% {
    transform: translateY(0.6px) scale(1.03, 0.96);
    animation-timing-function: ease-out;
  }
  84% {
    transform: translateY(-0.4px);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: none;
  }
}
@keyframes ic-graduation-tassel {
  12% {
    transform: rotate(-6deg);
  }
  36% {
    transform: rotate(28deg);
  }
  56% {
    transform: rotate(-22deg);
  }
  72% {
    transform: rotate(16deg);
  }
  86% {
    transform: rotate(-6deg);
  }
}

@keyframes ic-pill-half-l {
  12% {
    transform: rotate(4deg);
  }
  34%,
  54% {
    transform: translateX(-2.2px) rotate(-10deg);
  }
  70% {
    transform: translateX(0.3px);
  }
  80% {
    transform: none;
  }
}
@keyframes ic-pill-half-r {
  12% {
    transform: rotate(-4deg);
  }
  34%,
  54% {
    transform: translateX(2.2px) rotate(10deg);
  }
  70% {
    transform: translateX(-0.3px);
  }
  80% {
    transform: none;
  }
}
@keyframes ic-pill-grain-1 {
  0%,
  30% {
    opacity: 0;
    transform: none;
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6);
  }
  34% {
    opacity: 1;
  }
  72%,
  100% {
    opacity: 0;
    transform: translate(-1.6px, 7px);
  }
}
@keyframes ic-pill-grain-2 {
  0%,
  36% {
    opacity: 0;
    transform: none;
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6);
  }
  40% {
    opacity: 1;
  }
  78%,
  100% {
    opacity: 0;
    transform: translate(0.4px, 8px);
  }
}
@keyframes ic-pill-grain-3 {
  0%,
  42% {
    opacity: 0;
    transform: none;
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6);
  }
  46% {
    opacity: 1;
  }
  82%,
  100% {
    opacity: 0;
    transform: translate(2px, 6.5px);
  }
}

@keyframes ic-first-aid-beat {
  12% {
    transform: scale(1.35);
  }
  24% {
    transform: scale(0.94);
  }
  36% {
    transform: scale(1.22);
  }
  52% {
    transform: scale(1);
  }
}
@keyframes ic-first-aid-thump {
  14% {
    transform: scale(1.04, 0.97);
  }
  26% {
    transform: scale(1);
  }
  38% {
    transform: scale(1.03, 0.98);
  }
  52% {
    transform: scale(1);
  }
}

@keyframes ic-paw-step {
  0% {
    opacity: 1;
    transform: none;
    animation-timing-function: ease-out;
  }
  14%,
  28% {
    opacity: 1;
    transform: translateY(0.6px) scale(1.04, 0.95);
    animation-timing-function: cubic-bezier(0.5, 0, 0.7, 0.4);
  }
  46% {
    opacity: 0;
    transform: translateY(-3px);
  }
  58% {
    opacity: 0;
    transform: translateY(-3px);
    animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1);
  }
  80% {
    opacity: 1;
    transform: translateY(0.3px);
    animation-timing-function: ease-in-out;
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes ic-paw-toe-1 {
  14%,
  28% {
    transform: translate(-0.8px, 0.3px);
  }
  44% {
    transform: none;
  }
}
@keyframes ic-paw-toe-2 {
  14%,
  28% {
    transform: translate(-0.4px, -0.7px);
  }
  44% {
    transform: none;
  }
}
@keyframes ic-paw-toe-3 {
  14%,
  28% {
    transform: translate(0.4px, -0.7px);
  }
  44% {
    transform: none;
  }
}
@keyframes ic-paw-toe-4 {
  14%,
  28% {
    transform: translate(0.8px, 0.3px);
  }
  44% {
    transform: none;
  }
}
@keyframes ic-paw-print {
  0%,
  14% {
    opacity: 0;
  }
  22%,
  64% {
    opacity: 1;
  }
  88%,
  100% {
    opacity: 0;
  }
}

@keyframes ic-bed-plump {
  0% {
    transform: none;
  }
  14% {
    transform: scale(1.12, 0.7);
  }
  34% {
    transform: scale(0.94, 1.18);
  }
  54% {
    transform: scale(1.03, 0.95);
  }
  72% {
    transform: scale(0.99, 1.02);
  }
  100% {
    transform: none;
  }
}
@keyframes ic-bed-zz {
  0% {
    opacity: 0;
    transform: translate(-1px, 1.2px) scale(0.6);
  }
  28% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(1.2px, -1.6px);
  }
}

/* Motion for Weather and nature (sets/nature.js). The trigger wrapper is the same in every set. */

:where(a, button, label, summary, [role="button"], .ic-play, .ic-host):is(
    :hover,
    :focus-visible
  )
  .ic,
.ic-play .ic {
  /* The cloud wrings itself out; two waves of rain fall and splash on the ground. */
  &.ic-cloud-rain .i-puff {
    transform-origin: 12px 15.5px;
    animation: ic-cloud-rain-wring 900ms ease-in-out;
  }
  &.ic-cloud-rain .i-rain {
    animation: ic-cloud-rain-fall 900ms linear;
  }
  &.ic-cloud-rain .i-rain-2 {
    animation-delay: 90ms;
  }
  &.ic-cloud-rain .i-rain-3 {
    animation-delay: 45ms;
  }
  &.ic-cloud-rain .i-splash {
    transform-origin: 12px 22.5px;
    animation: ic-cloud-rain-splash 900ms linear 40ms;
  }

  /* The flake turns one sixth while a glint runs round its arms. */
  &.ic-snowflake .i-flake {
    transform-origin: 12px 12px;
    animation: ic-snowflake-turn 900ms ease-in-out;
  }
  &.ic-snowflake .i-tip {
    transform-origin: 12px 12px;
    animation: ic-snowflake-tip 440ms ease-in-out;
  }
  &.ic-snowflake .i-tip-2 {
    animation-delay: 60ms;
  }
  &.ic-snowflake .i-tip-3 {
    animation-delay: 120ms;
  }
  &.ic-snowflake .i-tip-4 {
    animation-delay: 180ms;
  }
  &.ic-snowflake .i-tip-5 {
    animation-delay: 240ms;
  }
  &.ic-snowflake .i-tip-6 {
    animation-delay: 300ms;
  }

  /* Each gust streams out through its curl and blows back in from the left. */
  &.ic-wind .i-gust {
    stroke-dasharray: 1 0.5;
    animation: ic-wind-gust 620ms cubic-bezier(0.45, 0, 0.35, 1);
  }
  &.ic-wind .i-gust-1 {
    animation-delay: 140ms;
  }
  &.ic-wind .i-gust-3 {
    animation-delay: 280ms;
  }

  /* The bulb squeezes, the mercury shoots to the top, wavers and cools back down. */
  &.ic-thermometer .i-mercury {
    transform-origin: 10.5px 16px;
    animation: ic-thermometer-rise 950ms linear;
  }
  &.ic-thermometer .i-bulb {
    transform-origin: 10.5px 17px;
    animation: ic-thermometer-bulb 950ms ease-in-out;
  }

  /* A raindrop lands on the canopy and runs off; the canopy shakes the rest away. */
  &.ic-umbrella .i-drop {
    animation: ic-umbrella-drop 1000ms linear;
  }
  &.ic-umbrella .i-canopy {
    transform-origin: 12px 10.5px;
    animation: ic-umbrella-shake 1000ms linear;
  }
  &.ic-umbrella .i-fleck {
    animation: ic-umbrella-fleck 1000ms ease-out;
  }

  /* The drop stretches, falls and splashes, and a new one swells from the tip. */
  &.ic-droplet .i-drop {
    transform-origin: 12px 3px;
    animation: ic-droplet-fall 1000ms linear;
  }
  &.ic-droplet .i-ripple {
    transform-origin: 12px 21.5px;
    animation: ic-droplet-ripple 1000ms ease-out;
  }
  &.ic-droplet .i-bead-l {
    animation: ic-droplet-bead-l 1000ms linear;
  }
  &.ic-droplet .i-bead-r {
    animation: ic-droplet-bead-r 1000ms linear;
  }

  /* The flame flickers and flares, its heart leaps, and an ember floats off the tip. */
  &.ic-flame .i-blaze {
    transform-origin: 12px 21px;
    animation: ic-flame-flicker 900ms ease-in-out;
  }
  &.ic-flame .i-heart {
    transform-origin: 12px 19px;
    animation: ic-flame-heart 900ms ease-in-out;
  }
  &.ic-flame .i-ember {
    animation: ic-flame-ember 900ms ease-out;
  }

  /* The leaf lets go, drifts down side to side, and a new one unfurls from the stem. */
  &.ic-leaf .i-blade {
    transform-origin: 6px 18px;
    animation: ic-leaf-fall 1000ms linear;
  }

  /* The tree crouches, shoots up and the crown puffs out before it settles. */
  &.ic-tree .i-trunk {
    transform-origin: 12px 21.5px;
    animation: ic-tree-trunk 900ms linear;
  }
  &.ic-tree .i-crown {
    transform-origin: 12px 16.5px;
    animation: ic-tree-crown 900ms linear;
  }

  /* A flag is planted on the summit and flutters while the sun beams. */
  &.ic-mountain .i-flag {
    transform-origin: 10px 6.2px;
    animation: ic-mountain-plant 1000ms linear;
  }
  &.ic-mountain .i-pennant {
    transform-origin: 10px 2.3px;
    animation: ic-mountain-flutter 1000ms ease-in-out;
  }
  &.ic-mountain .i-sun {
    transform-origin: 18.5px 5px;
    animation: ic-mountain-sun 1000ms var(--swift);
  }
}

@keyframes ic-cloud-rain-wring {
  14% {
    transform: scale(1.05, 0.93);
  }
  30% {
    transform: scale(0.97, 1.04);
  }
  48% {
    transform: scale(1.01, 0.99);
  }
  60% {
    transform: scale(1);
  }
}
@keyframes ic-cloud-rain-fall {
  0% {
    opacity: 1;
    transform: translate(0, 0);
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6);
  }
  28% {
    opacity: 0;
    transform: translate(-1px, 3.2px);
  }
  29% {
    opacity: 0;
    transform: translate(0.9px, -3px);
    animation-timing-function: ease-out;
  }
  48% {
    opacity: 1;
    transform: translate(0, 0);
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6);
  }
  72% {
    opacity: 0;
    transform: translate(-1px, 3.2px);
  }
  73% {
    opacity: 0;
    transform: translate(0.9px, -3px);
    animation-timing-function: ease-out;
  }
  94%,
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes ic-cloud-rain-splash {
  0%,
  22% {
    opacity: 0;
    transform: scale(0.6);
  }
  28% {
    opacity: 1;
    transform: scale(1);
  }
  40% {
    opacity: 0;
    transform: scale(1.2) translateY(-0.3px);
  }
  66% {
    opacity: 0;
    transform: scale(0.6);
  }
  72% {
    opacity: 1;
    transform: scale(1);
  }
  86%,
  100% {
    opacity: 0;
    transform: scale(1.2) translateY(-0.3px);
  }
}

@keyframes ic-snowflake-turn {
  0% {
    transform: rotate(0);
  }
  14% {
    transform: rotate(-8deg);
    animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1);
  }
  62% {
    transform: rotate(66deg);
    animation-timing-function: ease-in-out;
  }
  82% {
    transform: rotate(58deg);
  }
  100% {
    transform: rotate(60deg);
  }
}
@keyframes ic-snowflake-tip {
  45% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(0.97);
  }
}

@keyframes ic-wind-gust {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -1.5;
  }
}

@keyframes ic-thermometer-rise {
  0% {
    transform: scaleY(1);
    animation-timing-function: ease-out;
  }
  12% {
    transform: scaleY(0.8);
    animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1);
  }
  40% {
    transform: scaleY(1.78);
    animation-timing-function: ease-in-out;
  }
  52% {
    transform: scaleY(1.6);
    animation-timing-function: ease-in-out;
  }
  62% {
    transform: scaleY(1.72);
    animation-timing-function: cubic-bezier(0.5, 0, 0.4, 1);
  }
  100% {
    transform: scaleY(1);
  }
}
@keyframes ic-thermometer-bulb {
  12% {
    transform: scale(1.3);
  }
  34% {
    transform: scale(0.85);
  }
  56% {
    transform: scale(1);
  }
}

@keyframes ic-umbrella-drop {
  0% {
    opacity: 0;
    transform: translate(0, -0.6px);
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6);
  }
  8% {
    opacity: 1;
  }
  24% {
    transform: translate(0, 1.7px) scale(1);
  }
  28% {
    transform: translate(0, 1.9px);
    animation-timing-function: ease-in;
  }
  48% {
    opacity: 1;
    transform: translate(4.8px, 4.3px);
    animation-timing-function: ease-out;
  }
  62% {
    opacity: 1;
    transform: translate(8.8px, 8.2px);
  }
  74%,
  100% {
    opacity: 0;
    transform: translate(11.2px, 9.8px);
  }
}
@keyframes ic-umbrella-shake {
  24% {
    transform: none;
  }
  28% {
    transform: translateY(0.5px) scale(1.02, 0.94);
  }
  36% {
    transform: none;
  }
  46% {
    transform: rotate(-7deg);
  }
  56% {
    transform: rotate(6deg);
  }
  66% {
    transform: rotate(-4deg);
  }
  76% {
    transform: rotate(2deg);
  }
  86% {
    transform: rotate(0);
  }
}
@keyframes ic-umbrella-fleck {
  0%,
  52% {
    opacity: 0;
    transform: none;
  }
  56% {
    opacity: 1;
  }
  74%,
  100% {
    opacity: 0;
    transform: translate(-2.2px, -1.4px);
  }
}

@keyframes ic-droplet-fall {
  0% {
    opacity: 1;
    transform: none;
    animation-timing-function: ease-in-out;
  }
  14% {
    transform: scale(0.95, 1.08);
    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.5);
  }
  30% {
    opacity: 1;
  }
  38% {
    opacity: 0;
    transform: translateY(3px) scale(0.9, 1.1);
  }
  39% {
    opacity: 0;
    transform: scale(0.05);
  }
  42% {
    opacity: 1;
    transform: scale(0.08);
    animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1);
  }
  76% {
    transform: scale(1.06);
    animation-timing-function: ease-in-out;
  }
  88% {
    transform: scale(0.98);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes ic-droplet-ripple {
  0%,
  33% {
    opacity: 0;
    transform: scale(0.4, 1);
  }
  37% {
    opacity: 1;
  }
  62%,
  100% {
    opacity: 0;
    transform: scale(1.25, 1);
  }
}
@keyframes ic-droplet-bead-l {
  0%,
  35% {
    opacity: 0;
    transform: none;
    animation-timing-function: ease-out;
  }
  37% {
    opacity: 1;
  }
  47% {
    transform: translate(-1.3px, -2.4px);
    animation-timing-function: ease-in;
  }
  60%,
  100% {
    opacity: 0;
    transform: translate(-2.4px, -0.4px);
  }
}
@keyframes ic-droplet-bead-r {
  0%,
  35% {
    opacity: 0;
    transform: none;
    animation-timing-function: ease-out;
  }
  37% {
    opacity: 1;
  }
  49% {
    transform: translate(1.4px, -2.8px);
    animation-timing-function: ease-in;
  }
  62%,
  100% {
    opacity: 0;
    transform: translate(2.6px, -0.6px);
  }
}

@keyframes ic-flame-flicker {
  10% {
    transform: skewX(4deg) scaleY(0.95);
  }
  24% {
    transform: skewX(-5deg) scale(1.02, 1.09);
  }
  38% {
    transform: skewX(3deg) scaleY(0.98);
  }
  52% {
    transform: skewX(-3deg) scaleY(1.05);
  }
  66% {
    transform: skewX(2deg) scaleY(0.99);
  }
  80% {
    transform: skewX(-1deg);
  }
}
@keyframes ic-flame-heart {
  8% {
    transform: scale(0.85);
  }
  24% {
    transform: scale(1.2, 1.4);
  }
  42% {
    transform: scale(0.92);
  }
  60% {
    transform: scale(1.08, 1.12);
  }
  78% {
    transform: scale(1);
  }
}
@keyframes ic-flame-ember {
  0%,
  20% {
    opacity: 0;
    transform: translate(-0.6px, 1.4px);
  }
  28% {
    opacity: 1;
  }
  52% {
    transform: translate(0.9px, -1.2px);
  }
  78%,
  100% {
    opacity: 0;
    transform: translate(-0.2px, -3.6px);
  }
}

@keyframes ic-leaf-fall {
  0% {
    opacity: 1;
    transform: none;
    animation-timing-function: ease-in-out;
  }
  8% {
    transform: rotate(-5deg);
    animation-timing-function: ease-in-out;
  }
  20% {
    transform: translate(0.6px, 1px) rotate(9deg);
    animation-timing-function: ease-in-out;
  }
  33% {
    opacity: 1;
    transform: translate(-1.8px, 2.8px) rotate(-8deg);
    animation-timing-function: ease-in-out;
  }
  47% {
    opacity: 0;
    transform: translate(0.8px, 4.6px) rotate(10deg);
  }
  48% {
    opacity: 0;
    transform: scale(0.05) rotate(-40deg);
  }
  50% {
    opacity: 1;
    transform: scale(0.08) rotate(-38deg);
    animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1);
  }
  80% {
    transform: scale(1.05) rotate(3deg);
    animation-timing-function: ease-in-out;
  }
  90% {
    transform: scale(0.99) rotate(-1deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes ic-tree-trunk {
  0% {
    transform: none;
    animation-timing-function: ease-out;
  }
  14% {
    transform: scaleY(0.9);
    animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1);
  }
  40% {
    transform: scaleY(1.17);
    animation-timing-function: ease-in-out;
  }
  62% {
    transform: scaleY(0.97);
    animation-timing-function: ease-in-out;
  }
  80% {
    transform: scaleY(1.01);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: none;
  }
}
@keyframes ic-tree-crown {
  0% {
    transform: none;
    animation-timing-function: ease-out;
  }
  14% {
    transform: translateY(0.8px) scale(1.06, 0.92);
    animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1);
  }
  40% {
    transform: translateY(-1.4px) scale(1.1);
    animation-timing-function: ease-in-out;
  }
  62% {
    transform: translateY(0.2px) scale(0.97, 1.02);
    animation-timing-function: ease-in-out;
  }
  80% {
    transform: translateY(-0.1px) scale(1.01);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: none;
  }
}

@keyframes ic-mountain-plant {
  0%,
  8% {
    opacity: 0;
    transform: scaleY(0);
    animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1);
  }
  10% {
    opacity: 1;
  }
  28% {
    transform: scaleY(1.12);
    animation-timing-function: ease-in-out;
  }
  38% {
    transform: scaleY(0.97);
  }
  46% {
    transform: scaleY(1);
  }
  84% {
    opacity: 1;
    transform: scaleY(1);
  }
  100% {
    opacity: 0;
    transform: scaleY(1);
  }
}
@keyframes ic-mountain-flutter {
  0%,
  34% {
    transform: none;
  }
  44% {
    transform: scaleX(0.7) skewY(-6deg);
  }
  54% {
    transform: scaleX(1.05) skewY(4deg);
  }
  64% {
    transform: scaleX(0.8) skewY(-3deg);
  }
  74% {
    transform: none;
  }
}
@keyframes ic-mountain-sun {
  0%,
  22% {
    transform: none;
  }
  40% {
    transform: scale(1.4);
  }
  70% {
    transform: none;
  }
}


/* Charade. At rest every icon is still and ordinary; when the control holding it is hovered
   or focused, the icon acts out its verb once and settles back (nothing loops, nothing moves on
   its own). The trigger is the nearest control (a, button, label, summary, [role=button]) or any
   ancestor marked .ic-host; .ic-play on an ancestor plays every icon inside it at once.
   Transform origins are in the 24-unit grid. */

.ic {
  display: inline-block;
  flex: none;
  vertical-align: middle;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  --spring: linear(0, 0.25 6%, 0.7 13%, 1.05 21%, 1.16 27%, 1.11 34%, 1.01 44%, 0.97 52%, 1 64%, 1);
  --swift: cubic-bezier(0.3, 0.7, 0.2, 1);
}
.ic * {
  transform-box: view-box;
}
/* Parts that only exist while an icon is acting stay out of the picture at rest. */
.ic .i-fx {
  opacity: 0;
}
/* Marks an icon makes (a scribble, a line of text) draw in while it plays. They need
   pathLength="1". */
.ic .i-ink {
  opacity: 0;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

@media (prefers-reduced-motion: reduce) {
  .ic,
  .ic * {
    animation: none !important;
    transition: none !important;
  }
}