/* 업스킬 로고 마크 — views/compo/brandMark.ejs. 부모의 .brand-hover에 hover/focus 시 모션 */
.brand-mark {display:block;flex:none;overflow:visible}
.brand-mark * {transform-box:fill-box;transform-origin:center}
.brand-mark .bm-tile {transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.brand-mark .bm-arrow-line {stroke-dasharray:1;stroke-dashoffset:0}
.brand-word b {display:inline-block;font-weight:inherit;transition:color .25s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.brand-hover:is(:hover,:focus-visible) .bm-tile {transform:rotate(-8deg) scale(1.04)}
.brand-hover:is(:hover,:focus-visible) .bm-u {animation:bm-hop .6s cubic-bezier(.34,1.56,.64,1)}
.brand-hover:is(:hover,:focus-visible) .bm-arrow-line {animation:bm-draw .5s .12s cubic-bezier(.22,1,.36,1) backwards}
.brand-hover:is(:hover,:focus-visible) .bm-arrow-head {animation:bm-shoot .7s .12s cubic-bezier(.34,1.56,.64,1) backwards}
.brand-hover:is(:hover,:focus-visible) .brand-word b {color:#df2858;transform:translateY(-2px)}
@keyframes bm-hop {0%,100%{transform:translateY(0)}40%{transform:translateY(-2.5px) scaleY(1.06)}70%{transform:translateY(.5px) scaleY(.96)}}
@keyframes bm-draw {from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes bm-shoot {0%{opacity:0;transform:translate(-4px,4px) scale(.4)}60%{opacity:1;transform:translate(1.5px,-1.5px) scale(1.15)}100%{transform:translate(0,0) scale(1)}}
@media(prefers-reduced-motion:reduce){.brand-mark *,.brand-word b {animation:none!important;transition:none!important}}