/* ============================================================
   Vending machine — semi-realistic, interactive.
   Press a button → can drops into the tray (CSS animation).
   Used by: API=버튼 slide, Function Calling=자판기 slide.
   ============================================================ */
.vm-wrap { position: relative; display: inline-block; }

.vm {
  --vm-w: 340px;
  width: var(--vm-w);
  filter: drop-shadow(0 30px 40px rgba(31,36,51,.28));
  user-select: none;
}

/* glass glare sweep */
.vm .glare {
  mix-blend-mode: screen;
  opacity: .5;
  animation: glareSweep 6s var(--ease-out) infinite;
  transform-box: fill-box; transform-origin: center;
}
@keyframes glareSweep {
  0%, 70% { transform: translateX(-8px); opacity: .35; }
  82% { opacity: .65; }
  100% { transform: translateX(8px); opacity: .35; }
}

/* keypad button */
.vm-btn {
  cursor: pointer;
  transition: transform .12s var(--ease-spring), filter .12s;
  transform-box: fill-box; transform-origin: center;
}
.vm-btn:hover { filter: brightness(1.12); }
.vm-btn.pressed { transform: scale(.84); filter: brightness(1.4); }
.vm-btn .btn-led { transition: opacity .2s; }
.vm-btn.pressed .btn-led { opacity: 1; }

/* the dispensed can (SVG group) */
.vm-can {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.vm-can.drop {
  animation: canDrop 1.15s cubic-bezier(.45,.05,.55,.95) forwards;
}
@keyframes canDrop {
  0%   { opacity: 0; transform: translate(0, -150px) rotate(0deg) scale(.7); }
  12%  { opacity: 1; }
  55%  { transform: translate(6px, 150px) rotate(190deg) scale(.85); }   /* fall to tray */
  70%  { transform: translate(6px, 120px) rotate(185deg) scale(.85); }   /* bounce up */
  84%  { transform: translate(6px, 150px) rotate(182deg) scale(.85); }
  92%  { transform: translate(6px, 138px) rotate(180deg) scale(.85); }
  100% { opacity: 1; transform: translate(6px, 150px) rotate(180deg) scale(.85); }
}

/* AI finger cursor (Function Calling) */
.vm-finger {
  transform-box: fill-box; transform-origin: top left;
  opacity: 0; transition: opacity .3s;
}
.vm-finger.go {
  opacity: 1;
  animation: fingerPick 1.2s var(--ease-out) forwards;
}
@keyframes fingerPick {
  0%   { transform: translate(70px, 30px) scale(1); }
  55%  { transform: translate(0,0) scale(1); }
  65%  { transform: translate(0,0) scale(.9); }       /* press */
  75%  { transform: translate(0,0) scale(1); }
  100% { transform: translate(40px, 50px) scale(1); opacity: 0; }
}

/* "쿵" tray flash when can lands */
.vm-tray-glow {
  opacity: 0;
  transform-box: fill-box; transform-origin: center;
}
.vm-tray-glow.flash { animation: trayFlash .5s var(--ease-out) 1; }
@keyframes trayFlash {
  0% { opacity: 0; transform: scale(.6); }
  40% { opacity: .9; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.3); }
}

/* speech callout near machine */
.vm-callout {
  position: absolute;
  background: #fff; border: 3px solid var(--ink);
  border-radius: var(--r-md); padding: 12px 18px;
  font-size: 18px; font-weight: 800; box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(10px) scale(.9);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-spring);
}
.vm-callout.show { opacity: 1; transform: none; }