/* Brankas Zy (vault mascot): anatomy, poses, deposit sequence. Poses are classes on svg.vm. */
.vm{overflow:visible;display:block}
.vm *{transform-box:fill-box}
.vm-happy,.vm-mouth-open,.vm-mouth-flat,.vm-bag,.vm-warn,.vm-lens,.vm-sparks{opacity:0}
.vm-body{transform-origin:50% 100%;animation:vm-breathe 3.6s ease-in-out infinite}
.vm-shadow{transform-origin:50% 50%;animation:vm-shadow 3.6s ease-in-out infinite}
.vm-eyes{transform-origin:50% 50%;animation:vm-blink 5.2s infinite}
.vm-knob{transform-origin:50% 50%;animation:vm-dial 7s var(--ease-out) infinite}
.vm-handle{transform-origin:50% 50%;transition:transform var(--t-slow) var(--ease-out)}
.vm-door{transform-origin:0% 50%}
.vm-arm{transform-origin:50% 12%;transition:transform var(--t-slow) var(--ease-spring)}
.vm-brow-l,.vm-brow-r{transform-origin:50% 50%;transition:transform var(--t-med) var(--ease-out)}
.vm-brow-l{transform:rotate(7deg)}.vm-brow-r{transform:rotate(-7deg)}
.vm-pupils{transition:transform var(--t-med) var(--ease-out)}
.vm-warn,.vm-lens,.vm-happy,.vm-mouth-open,.vm-mouth-flat,.vm-mouth,.vm-eyes-o{transition:opacity var(--t-med) var(--ease-out),transform var(--t-slow) var(--ease-spring)}
/* bag: 360 ms (--t-move) keeps its transform inside the 250-400 ms motion window; the rest of Zy keeps the 420 ms spring. */
.vm-bag{transition:opacity var(--t-med) var(--ease-out),transform var(--t-move) var(--ease-spring)}
@keyframes vm-breathe{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-3px) scale(1.012,1.025)}}
@keyframes vm-shadow{0%,100%{transform:scaleX(1);opacity:.45}50%{transform:scaleX(.93);opacity:.34}}
@keyframes vm-blink{0%,91%,97%,100%{transform:scaleY(1)}94%{transform:scaleY(.08)}}
@keyframes vm-dial{0%,62%{transform:rotate(0)}72%{transform:rotate(140deg)}80%{transform:rotate(80deg)}90%,100%{transform:rotate(0)}}

/* holding / receiving the bag */
.vm--hold .vm-bag{opacity:1}
/* bob keeps running in hold and ok (bag visible in both), so hold to ok does not snap the bag 4px; elsewhere the bag is fading out. */
.vm--hold .vm-bag-bob,.vm--ok .vm-bag-bob{animation:vm-bob 2.4s ease-in-out infinite}
.vm--hold .vm-arm-l{transform:rotate(-42deg)}.vm--hold .vm-arm-r{transform:rotate(42deg)}
.vm--hold .vm-pupils{transform:translateY(4px)}
@keyframes vm-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* checking: eyes scan, one brow up, lens */
.vm--check .vm-pupils{animation:vm-scan 2.6s ease-in-out infinite}
.vm--check .vm-brow-r{transform:translateY(-5px) rotate(-14deg)}
.vm--check .vm-lens{opacity:1;animation:vm-lens 2.6s ease-in-out infinite}
.vm--check .vm-arm-r{transform:rotate(-24deg)}
.vm--check .vm-knob{animation:vm-tick 1.3s steps(4) infinite}
@keyframes vm-scan{0%,100%{transform:translateX(-5px)}45%,55%{transform:translateX(5px)}}
@keyframes vm-lens{0%,100%{transform:translate(0,0)}50%{transform:translate(-4px,4px)}}
@keyframes vm-tick{to{transform:rotate(360deg)}}

/* success: happy eyes, hop, bag handed out */
.vm--ok .vm-eyes-o,.vm--ok .vm-mouth{opacity:0}
.vm--ok .vm-happy,.vm--ok .vm-mouth-open{opacity:1}
.vm--ok .vm-body{animation:vm-hop 2.4s var(--ease-out) infinite}
.vm--ok .vm-shadow{animation:vm-hopshadow 2.4s var(--ease-out) infinite}
.vm--ok .vm-sparks{opacity:1}
.vm--ok .vm-sparks path{transform-origin:50% 50%;animation:vm-twinkle 1.6s ease-in-out infinite}
.vm--ok .vm-sparks .s2{animation-delay:.4s}.vm--ok .vm-sparks .s3{animation-delay:.8s}
.vm--ok .vm-arm-r{transform:rotate(-72deg)}
.vm--ok .vm-bag{opacity:1;transform:translate(74px,-30px) scale(.62)}
.vm--ok .vm-brow-l{transform:translateY(-4px) rotate(-4deg)}.vm--ok .vm-brow-r{transform:translateY(-4px) rotate(4deg)}
@keyframes vm-hop{0%,40%,100%{transform:translateY(0) scale(1,1)}12%{transform:translateY(0) scale(1.04,.95)}24%{transform:translateY(-12px) scale(.98,1.03)}34%{transform:translateY(0) scale(1.03,.97)}}
@keyframes vm-hopshadow{0%,40%,100%{transform:scaleX(1)}24%{transform:scaleX(.8)}}
@keyframes vm-twinkle{0%,100%{transform:scale(.4);opacity:.2}50%{transform:scale(1);opacity:1}}

/* warning: stop hand, stern brows, locked handle, badge */
.vm--warn .vm-mouth{opacity:0}.vm--warn .vm-mouth-flat{opacity:1}
.vm--warn .vm-brow-l{transform:translateY(3px) rotate(16deg)}.vm--warn .vm-brow-r{transform:translateY(3px) rotate(-16deg)}
.vm--warn .vm-arm-r{transform:rotate(-158deg)}
.vm--warn .vm-handle{transform:rotate(45deg)}
.vm--warn .vm-warn{opacity:1;animation:vm-pulse 1.8s ease-in-out infinite}
.vm--warn .vm-body{animation:vm-shake 3.2s ease-in-out infinite}
.vm--warn .vm-knob{animation:none}
@keyframes vm-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
@keyframes vm-shake{0%,86%,100%{transform:translateX(0)}89%{transform:translateX(-3px)}92%{transform:translateX(3px)}95%{transform:translateX(-2px)}}

/* deposit: door swings open, bag goes in, door shuts, dial locks, vault smiles.
   Runs once. Start time set with --vm-t (default .2s). */
.vm--deposit .vm-door{animation:vm-door 1.6s var(--vm-t,.2s) var(--ease-out) both}
.vm--deposit .vm-bag{animation:vm-in 1.1s var(--vm-t,.2s) var(--ease-out) both}
.vm--deposit .vm-knob{animation:vm-lock 900ms calc(var(--vm-t,.2s) + 1.6s) var(--ease-out) both}
.vm--deposit .vm-handle{animation:vm-lock2 600ms calc(var(--vm-t,.2s) + 1.7s) var(--ease-spring) both}
.vm--deposit .vm-eyes-o{animation:vm-hide 1.4s calc(var(--vm-t,.2s) + 2.2s) both}
.vm--deposit .vm-happy{animation:vm-show 1.4s calc(var(--vm-t,.2s) + 2.2s) both}
.vm--deposit .vm-arm-l{animation:vm-wave 900ms calc(var(--vm-t,.2s) + 2.3s) var(--ease-spring) both}
@keyframes vm-door{0%{transform:scaleX(1)}25%,60%{transform:scaleX(.1)}100%{transform:scaleX(1)}}
@keyframes vm-in{0%{opacity:0;transform:translate(-90px,-40px) scale(.7)}30%{opacity:1;transform:translate(-30px,-50px) scale(.7)}70%{opacity:1;transform:translate(0,-18px) scale(.55)}100%{opacity:0;transform:translate(0,-18px) scale(.3)}}
@keyframes vm-lock{0%{transform:rotate(0)}60%{transform:rotate(300deg)}100%{transform:rotate(270deg)}}
@keyframes vm-lock2{from{transform:rotate(0)}to{transform:rotate(45deg)}}
@keyframes vm-hide{0%{opacity:1}12%,82%{opacity:0}100%{opacity:1}}
@keyframes vm-show{0%{opacity:0}12%,82%{opacity:1}100%{opacity:0}}
@keyframes vm-wave{0%{transform:rotate(0)}50%{transform:rotate(-120deg)}100%{transform:rotate(0)}}
.vm-phone{opacity:0;transition:opacity var(--t-med) var(--ease-out)}
.vm--ok .vm-phone{opacity:1}