/* 팀볼트 프렌즈 모션 — 원본 PNG를 통째로 두고 눈꺼풀만 얹는다. 부위를 떼어 움직이는 건 볼티 날개뿐.
   사용법: 위치·크기는 바깥 래퍼가 잡고(--z = zoom 배율), 안쪽 .tvm 은 원본 픽셀 좌표계.
   <div class="mascot" style="--z:.3"><div class="tvm tv-volt"><img class="base" src="/brand/motion/volt.png"><i class="lid l"></i><i class="lid r"></i></div></div>
   볼티: <div class="tvm tv-volty hover"><div class="fly"><img class="wing l" ...><img class="wing r" ...><img class="base" src="volty-body.png"><i class="lid l"></i><i class="lid r"></i></div></div>
   볼티 변형: (기본) 8자 비행 · hover 제자리 호버 · across 가로질러 날기 */
.tvm{position:relative;zoom:var(--z,.3);display:block}
.tvm img,.tvm i{position:absolute;display:block;max-width:none}
.tvm .base{position:relative}
.tvm .lid{border-radius:50%;transform:scaleY(0);transform-origin:50% 50%;animation:tvm-blink 4.6s infinite}
.tvm .lid.r{animation-delay:.02s}
@keyframes tvm-blink{0%,93%{transform:scaleY(0)}95.5%{transform:scaleY(1)}98%{transform:scaleY(0)}}

/* 볼트 753×1000 — 눈 깜빡임 + 아주 약한 숨쉬기 */
.tv-volt{width:753px;height:1000px}
.tv-volt .base{width:753px;animation:tvm-breathe 3.6s ease-in-out infinite;transform-origin:50% 100%}
.tv-volt .lid{background:#FBE0D3;width:46px;height:42px}
.tv-volt .lid.l{left:301px;top:191px}.tv-volt .lid.r{left:407px;top:191px}
.tv-volt.still .base{animation:none}
@keyframes tvm-breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.01)}}

/* 볼트 추가 동작: wink(오른눈 윙크) · nod(끄덕) · blush(볼 붉힘) · bounce(통통) — 모두 실루엣 유지 */
.tv-volt.wink .lid.r{animation:tvm-wink 7.5s infinite}
@keyframes tvm-wink{0%,60%{transform:scaleY(0)}63%,72%{transform:scaleY(1)}75%,100%{transform:scaleY(0)}}
.tv-volt.nod .base{animation:tvm-breathe 3.6s ease-in-out infinite,tvm-nod 6s ease-in-out infinite;transform-origin:50% 90%}
@keyframes tvm-nod{0%,70%,100%{rotate:0deg}78%{rotate:2.5deg}88%{rotate:-2deg}}
.tv-volt .cheek{position:absolute;width:70px;height:40px;border-radius:50%;background:#F9A8A8;opacity:0;top:228px}.tv-volt .cheek.l{left:236px}.tv-volt .cheek.r{left:447px}
.tv-volt.blush .cheek{animation:tvm-blush 8s ease-in-out infinite}
@keyframes tvm-blush{0%,20%,60%,100%{opacity:0}30%,50%{opacity:.75}}
.tv-volt.bounce .base{animation:tvm-bounce 2.4s ease-in-out infinite}
@keyframes tvm-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px) scaleY(1.01)}}

/* 래빗 394×599 — 눈 깜빡임만 */
.tv-rabbit{width:394px;height:599px}
.tv-rabbit .base{width:394px}
.tv-rabbit .lid{background:#fff;width:42px;height:38px;animation-duration:5.2s}
.tv-rabbit .lid.l{left:133px;top:263px}.tv-rabbit .lid.r{left:219px;top:263px}

/* 볼티 314×188 — 날개 뿌리 축 펄럭임 + 비행 */
.tv-volty{width:314px;height:188px}
.tv-volty .fly{position:absolute;left:0;top:0;width:314px;height:188px;animation:tvm-float 3.4s ease-in-out infinite}
.tv-volty .base{width:314px}
.tv-volty .wing{top:24px;width:79px;animation:tvm-flap .42s ease-in-out infinite alternate}
.tv-volty .wing.l{left:9px;transform-origin:100% 55%}.tv-volty .wing.r{left:226px;width:78px;transform-origin:0% 55%;animation-name:tvm-flap-r}
.tv-volty .lid{background:#1B1B1B;width:28px;height:26px}
.tv-volty .lid.l{left:117px;top:84px}.tv-volty .lid.r{left:168px;top:84px}
.tv-volty.hover .fly{animation:tvm-hover 1.8s ease-in-out infinite}
.tv-volty.across .fly{animation:tvm-across 3.2s linear infinite}
@keyframes tvm-flap{from{transform:rotate(-16deg)}to{transform:rotate(22deg)}}
@keyframes tvm-flap-r{from{transform:rotate(16deg)}to{transform:rotate(-22deg)}}
@keyframes tvm-float{0%{transform:translate(0,0) rotate(-3deg)}25%{transform:translate(70px,-34px) rotate(4deg)}50%{transform:translate(0,-60px) rotate(-2deg)}75%{transform:translate(-70px,-26px) rotate(5deg)}100%{transform:translate(0,0) rotate(-3deg)}}
@keyframes tvm-hover{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-26px) rotate(2deg)}}
@keyframes tvm-across{0%{transform:translate(-900px,40px) rotate(6deg)}30%{transform:translate(-300px,-30px) rotate(-4deg)}60%{transform:translate(300px,20px) rotate(6deg)}100%{transform:translate(900px,-40px) rotate(-4deg)}}

@media (prefers-reduced-motion:reduce){.tvm *{animation:none!important}}