.logo-word{display:inline-flex}
.logo-char{display:inline-block;transition:color .3s}
.logo img{transform-origin:50% 80%;transition:filter .35s var(--ease)}
.logo:hover img{filter:none}
.logo.is-playing img{animation:logo-tilt .7s var(--ease)}
.logo.is-playing .logo-char{animation:logo-wave .5s var(--ease) calc(var(--i) * 50ms) both}
.logo:hover .logo-char{color:var(--accent);transition-delay:calc(var(--i) * 50ms)}
@keyframes logo-wave{0%,100%{transform:none}40%{transform:translateY(-5px)}}
@keyframes logo-tilt{0%,100%{transform:none}30%{transform:rotate(-14deg) scale(1.08)}60%{transform:rotate(8deg)}}
@media (prefers-reduced-motion:reduce){
  .logo.is-playing img,.logo.is-playing .logo-char{animation:none}
}