/* The badge stays still. Only the two gold pieces and bee enter, once. */
.logo-intro{display:block;overflow:hidden;background:#000}
.logo-intro svg{display:block;width:100%;height:auto;overflow:hidden}
.intro-pieces,.intro-shine{display:none}
.intro-finished{opacity:1}
.logo-intro-running .intro-pieces,.logo-intro-running .intro-shine{display:block}
.logo-intro-running .intro-finished{animation:hub-intro-finish .25s 2.45s both!important}
.logo-intro-running .intro-outer{animation:hub-intro-outer 1.1s cubic-bezier(.16,1,.3,1) both!important}
.logo-intro-running .intro-inner{animation:hub-intro-inner 1.1s .2s cubic-bezier(.16,1,.3,1) both!important}
.logo-intro-running .intro-bee{animation:hub-intro-bee 1.5s 1s cubic-bezier(.18,.65,.25,1) both!important;transform-origin:450px 610px}
.logo-intro-running .intro-wing-upper{animation:hub-intro-wing .12s 1s linear 12 alternate!important;transform-origin:461px 522px}
.logo-intro-running .intro-wing-lower{animation:hub-intro-wing .12s 1s linear 12 alternate-reverse!important;transform-origin:390px 550px}
.logo-intro-running .intro-shine{animation:hub-intro-shine 1.2s 2.7s ease-in-out both!important}
@keyframes hub-intro-outer{from{transform:translateX(120px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes hub-intro-inner{from{transform:translateX(-120px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes hub-intro-bee{0%{transform:translate(-600px,-320px) rotate(-22deg);opacity:0}15%{opacity:1}65%{transform:translate(-90px,-100px) rotate(8deg)}100%{transform:translate(0,0) rotate(0);opacity:1}}
@keyframes hub-intro-wing{from{rotate:-9deg}to{rotate:9deg}}
@keyframes hub-intro-finish{from{opacity:0}to{opacity:1}}
@keyframes hub-intro-shine{0%{transform:translateX(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateX(2200px);opacity:0}}
html:not(.motion-enabled) .intro-pieces,html:not(.motion-enabled) .intro-shine{display:none}
html:not(.motion-enabled) .intro-finished{opacity:1}
.idle-bee-art{display:none}
.motion-enabled.logo-idle-wings .hero-logo{animation:none!important;transform:scale(1)}
.motion-enabled.logo-idle-wings .intro-finished{display:none}
.motion-enabled.logo-idle-wings .idle-bee-art{display:block}
.motion-enabled.logo-idle-wings .idle-wing-upper{transform-origin:461px 522px;animation:hub-idle-flutter .08s ease-in-out 12 alternate!important}
.motion-enabled.logo-idle-wings .idle-wing-lower{transform-origin:390px 550px;animation:hub-idle-flutter .08s ease-in-out 12 alternate-reverse!important}
@keyframes hub-idle-flutter{from{rotate:-14deg}to{rotate:14deg}}