.brand-mark{position:relative;display:inline-block;line-height:0}
.brand-mark--logo img{object-fit:cover;border-radius:22%;width:100%;height:100%;display:block}
.brand-mark__svg{position:relative;z-index:1;width:100%;height:100%;display:block;overflow:visible}
.brand-mark__aura{position:absolute;left:50%;top:54%;width:132%;height:132%;transform:translate(-50%,-50%) scale(.86);border-radius:50%;background:radial-gradient(circle,rgba(44,99,255,.20) 0%,rgba(91,147,255,.10) 46%,rgba(91,147,255,0) 72%);opacity:0;pointer-events:none;z-index:0}
.brand-mark__dragon{transform-box:fill-box;transform-origin:52% 56%;will-change:transform}
.brand-mark--periodic .brand-mark__dragon{animation:brand-dragon-drift var(--brand-flap-period,6s) ease-in-out infinite}
.brand-mark--periodic .brand-mark__aura{animation:brand-aura-breathe var(--brand-flap-period,6s) ease-in-out infinite}
.brand-mark--loading .brand-mark__dragon{animation:brand-dragon-swim var(--brand-flap-period,1.2s) ease-in-out infinite}
.brand-mark--loading .brand-mark__aura{animation:brand-aura-pulse var(--brand-flap-period,1.2s) ease-in-out infinite}
@keyframes brand-dragon-drift{0%,100%{transform:translateY(-2%) rotate(-1.2deg) scale(1)}50%{transform:translateY(2%) rotate(1.2deg) scale(1.02)}}
@keyframes brand-dragon-swim{0%,100%{transform:translate(-1.5%,1.5%) rotate(-3.2deg) scale(.99)}30%{transform:translate(1.5%,-2.5%) rotate(1.6deg) scale(1.02)}55%{transform:translate(2%,1%) rotate(3.2deg) scale(1.03)}80%{transform:translate(-1%,-1.5%) rotate(-1deg) scale(1.01)}}
@keyframes brand-aura-breathe{0%,100%{opacity:.10;transform:translate(-50%,-50%) scale(.84)}50%{opacity:.26;transform:translate(-50%,-50%) scale(1)}}
@keyframes brand-aura-pulse{0%,100%{opacity:.08;transform:translate(-50%,-50%) scale(.8)}45%{opacity:.4;transform:translate(-50%,-50%) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.brand-mark__dragon,.brand-mark__aura{animation:none!important}}