/* The BEST Collective: the logo mark plays every 20s (driven by mark-motion.js).
   Only transform animates, on the wrapper and on 12 separate <svg> pieces. */
.mk{display:block;position:relative;aspect-ratio:1}
.mk>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;backface-visibility:hidden}
.mk-play{animation:mkturn 2.8s cubic-bezier(.65,0,.35,1);will-change:transform}
.mk-play>.pc{animation:mkbloom 2.8s cubic-bezier(.45,0,.3,1);will-change:transform}
@keyframes mkturn{from{transform:rotate(0deg) translateZ(0)}to{transform:rotate(90deg) translateZ(0)}}
@keyframes mkbloom{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  45%{transform:translate3d(calc(var(--dx) * .16),calc(var(--dy) * .16),0) rotate(calc(var(--r) * .3))}
}
/* where it sits */
.fade-mark{background:none!important}
.fade-mark .mk{width:100%}
.letter .sign .mk{width:46px;flex:none}
@media (prefers-reduced-motion:reduce){.mk-play,.mk-play>.pc{animation:none!important}}