:root{--brand-cycle:10s;--brand-turn:700ms;--brand-ease:cubic-bezier(.22,1,.36,1)}
.brand>svg{flex:none;transform-origin:50% 50%;animation:brand-idle-turn var(--brand-cycle) ease-in-out infinite;transition:transform var(--brand-turn) var(--brand-ease),color var(--motion,250ms)}
.brand:hover>svg,.brand:focus-visible>svg{transform:rotate(120deg);color:var(--accent,#ff5b14)}
.brand:active>svg{transform:rotate(180deg) scale(.92)}
@keyframes brand-idle-turn{0%{rotate:0deg}18%,100%{rotate:360deg}}
@media(prefers-reduced-motion:reduce){.brand>svg,.brand:hover>svg,.brand:focus-visible>svg,.brand:active>svg{animation:none;transform:none;rotate:none;transition:none}}
