/* Aangan — the things on the carpet (js/49-goods.js)
   ===========================================================================
   Owner 2026-08-02: "add more accessories on the carpet... a chai cup and
   saucer, some [tea] time snacks - parle G, khari, etc., A juice, coconut
   with straw, Few lakhotis around, A radio, etc."

   THE LAYER IS TRANSPARENT TO TOUCH AND THE PROPS ARE NOT. That one line is
   the whole safety story: a swipe that starts anywhere on the mat still
   reaches the mat, because only the 40-60px prop boxes take pointer events.
   z-index sits the layer at 2 — over the carpet canvas (0) and under the
   trick pile (5), so a thrown card passes over the chai and never under it. */

#matGoods{position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:inherit;overflow:hidden}
#matGoods .mg{position:absolute;transform-origin:50% 92%;
  background:none;border:0;padding:0;margin:0;cursor:pointer;
  pointer-events:auto;-webkit-tap-highlight-color:transparent;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
#matGoods .mg svg{width:100%;height:auto;display:block}
#matGoods .mg:active{transform:scale(.94)}

/* ---- the idle life. Every one of these is SLOW and SMALL on purpose.
   Something twitching in the corner of a card table pulls the eye away from
   the hand, and the hand is the game. Steam is the only thing that loops. --- */
#matGoods .mg svg .stm{animation:gdSteam 3.4s ease-in-out infinite;opacity:.55;
  transform-origin:50% 100%}
#matGoods .mg svg .stm:nth-of-type(2){animation-duration:4.1s;animation-delay:-1.2s}
#matGoods .mg svg .stm:nth-of-type(3){animation-duration:3.8s;animation-delay:-2.3s}
@keyframes gdSteam{
  0%  {opacity:0;   transform:translateY(3px) scaleY(.7)}
  35% {opacity:.65; transform:translateY(0)   scaleY(1)}
  100%{opacity:0;   transform:translateY(-6px) scaleY(1.25)}
}

/* ---- the taps. One-shot, and every one of them REMOVES itself by ending on
   the idle state, because a one-shot class that is never taken off freezes
   the element — that trap has already cost this project a frozen shopkeeper
   and a frozen frog. The JS strips and re-adds the class per tap. ---------- */
#matGoods .mg.gd-sway{animation:gdSway .7s cubic-bezier(.3,.7,.4,1)}
@keyframes gdSway{30%{transform:rotate(-7deg)}62%{transform:rotate(4deg)}100%{transform:rotate(0)}}

#matGoods .mg.gd-roll{animation:gdRoll .8s cubic-bezier(.3,.7,.4,1)}
@keyframes gdRoll{45%{transform:translateX(11px) rotate(120deg)}100%{transform:translateX(0) rotate(360deg)}}

#matGoods .mg.gd-steam{animation:gdSip .8s ease}
@keyframes gdSip{35%{transform:translateY(-4px) rotate(-5deg)}100%{transform:translateY(0) rotate(0)}}

/* the radio does not sway — a radio on the floor does not move, it plays. The
   dial needle jumps instead, which is the one part of it that would. */
#matGoods .mg.gd-buzz{animation:gdBuzz .55s ease}
@keyframes gdBuzz{0%,100%{transform:translateX(0)}
  20%{transform:translateX(-1.2px)}45%{transform:translateX(1.2px)}70%{transform:translateX(-.6px)}}

@media (prefers-reduced-motion: reduce){
  #matGoods .mg svg .stm{animation:none;opacity:.45}
  #matGoods .mg.gd-sway,#matGoods .mg.gd-roll,
  #matGoods .mg.gd-steam,#matGoods .mg.gd-buzz{animation:none}
}