/* Logo square. The geometry never changes: the mark arrives with a short settle,
   and turns a quarter turn on hover or keyboard focus. A square turned 90 degrees
   is the same square, so it always lands exactly where it started. */
.animated-logo{overflow:visible}
.animated-logo #accent{transform-box:fill-box;transform-origin:center}
.animated-logo.logo-arrival #accent{animation:lowpitch-settle .9s cubic-bezier(.22,.7,.2,1) .2s both}
.animated-logo.logo-turn #accent{animation:lowpitch-turn .7s cubic-bezier(.65,0,.35,1)}
@keyframes lowpitch-settle{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes lowpitch-turn{from{transform:rotate(0)}to{transform:rotate(90deg)}}
@media(prefers-reduced-motion:reduce){.animated-logo #accent{animation:none!important}}