/* Aangan — the reactions, animated (js/50-emoji.js)
   ===========================================================================
   Six faces drawn in SVG, moved from here. Owner 2026-08-02 chose in-house
   over importing the Lottie pack, so this is where the life comes from.

   SIZED IN `em` ON PURPOSE. The tray sets 32px, the bubble over a seat 46px,
   the spectator cheer 38px — three numbers that were tuned against real
   screens and that I have no business re-picking. `1em` inherits whichever
   one applies and the drawing lands exactly where the glyph did. */

.emo{width:1em;height:1em;display:block;overflow:visible}

/* ---- 😂 the face bounces, the tears squirt sideways -------------------- */
.emo-laugh .e-body{transform-origin:32px 34px;animation:emoJoy 1.15s ease-in-out infinite}
@keyframes emoJoy{
  0%,100%{transform:translateY(0) rotate(0) scale(1)}
  25%    {transform:translateY(-1.6px) rotate(-4deg) scale(1.04)}
  60%    {transform:translateY(1.2px) rotate(3deg) scale(.98)}
}
.emo-laugh .e-tearL,.emo-laugh .e-tearR{animation:emoSquirtL 1.15s ease-out infinite}
.emo-laugh .e-tearR{animation-name:emoSquirtR}
@keyframes emoSquirtL{
  0%  {opacity:0; transform:translate(6px,0) scale(.4)}
  25% {opacity:1; transform:translate(0,-1px) scale(1)}
  100%{opacity:0; transform:translate(-7px,7px) scale(.85)}
}
@keyframes emoSquirtR{
  0%  {opacity:0; transform:translate(-6px,0) scale(.4)}
  25% {opacity:1; transform:translate(0,-1px) scale(1)}
  100%{opacity:0; transform:translate(7px,7px) scale(.85)}
}

/* ---- 😊 breathes, and the cheeks warm with it ------------------------- */
.emo-smile .e-body{transform-origin:32px 34px;animation:emoBreathe 2.4s ease-in-out infinite}
@keyframes emoBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.emo-smile .e-cheekL,.emo-smile .e-cheekR{animation:emoBlush 2.4s ease-in-out infinite}
@keyframes emoBlush{0%,100%{opacity:.55}50%{opacity:.88}}

/* ---- 😢 one tear, running ------------------------------------------- */
.emo-sad .e-tilt{transform-origin:32px 34px;animation:emoDroop 3s ease-in-out infinite}
@keyframes emoDroop{0%,100%{transform:rotate(0)}50%{transform:rotate(-3.5deg)}}
.emo-sad .e-run{animation:emoRun 2.6s ease-in infinite}
@keyframes emoRun{
  0%  {opacity:0; transform:translateY(-3px) scale(.5)}
  20% {opacity:1; transform:translateY(0) scale(1)}
  75% {opacity:1; transform:translateY(15px) scale(.95)}
  100%{opacity:0; transform:translateY(21px) scale(.7)}
}

/* ---- 😭 the wail: the face shakes, both tears fall -------------------- */
.emo-cry .e-shake{transform-origin:32px 34px;animation:emoWail .5s ease-in-out infinite}
@keyframes emoWail{
  0%,100%{transform:translateX(0) scale(1)}
  30%    {transform:translateX(-1.3px) scale(1.02)}
  70%    {transform:translateX(1.3px) scale(1.02)}
}
.emo-cry .e-fallL,.emo-cry .e-fallR{animation:emoFall .95s linear infinite}
.emo-cry .e-fallR{animation-delay:-.42s}
/* THE TEAR STOPS AT THE JAW. Falling 15px it ran off the chin and hung in
   the corner of the box as a grey smudge — and at tray size that smudge lands
   on the neighbouring button, because the svg is overflow:visible so the
   laughing face's tears can squirt outside its circle. 8px keeps every drop
   on the cheek it belongs to. */
@keyframes emoFall{
  0%  {opacity:0; transform:translateY(-3px) scaleY(.6)}
  18% {opacity:1; transform:translateY(0) scaleY(1)}
  78% {opacity:1; transform:translateY(6px) scaleY(1.15)}
  100%{opacity:0; transform:translateY(8px) scaleY(1.2)}
}

/* ---- ❤️ lub-DUB, not a throb ----------------------------------------- */
.emo-heart .e-beat{transform-origin:32px 34px;animation:emoBeat 1.25s ease-in-out infinite}
@keyframes emoBeat{
  0%,100%{transform:scale(1)}
  14%    {transform:scale(1.14)}
  26%    {transform:scale(1.01)}
  38%    {transform:scale(1.09)}
  55%    {transform:scale(1)}
}

/* ---- 😏 the brow does the work --------------------------------------- */
.emo-smirk .e-lean{transform-origin:32px 34px;animation:emoLean 2.8s ease-in-out infinite}
@keyframes emoLean{0%,100%{transform:rotate(0)}45%{transform:rotate(3deg)}}
.emo-smirk .e-browR{transform-origin:43px 18px;animation:emoBrow 2.8s ease-in-out infinite}
@keyframes emoBrow{0%,100%{transform:translateY(0)}40%{transform:translateY(-1.8px)}}
.emo-smirk .e-lids{transform-origin:32px 29px;animation:emoNarrow 2.8s ease-in-out infinite}
@keyframes emoNarrow{0%,100%{transform:scaleY(1)}40%{transform:scaleY(.78)}}

/* ---- the tray, the seat bubble, the cheer ----------------------------- */
/* the tray buttons were sized for a glyph and need a box now that they hold
   a block-level <svg>; the font-size stays as the size source */
.reacttray button{display:grid;place-items:center}
.reactfx .emo,.cheerfx .emo{margin:0 auto}
#reactSeatBtn .emo{width:1em;height:1em}

/* THE FACE ON THE BUTTON DOES NOT ANIMATE. It sits on the mat for the whole
   hand, and something moving in the corner of a card table pulls the eye away
   from the cards — the same reason the goods on the carpet only breathe steam
   and nothing else. It comes alive when the tray opens. */
#reactSeatBtn .emo *{animation:none !important}

@media (prefers-reduced-motion: reduce){
  .emo *{animation:none !important}
  /* the tears are drawn mid-flight, so with motion off they must not be left
     hanging in the air */
  .emo-laugh .e-tearL,.emo-laugh .e-tearR,
  .emo-cry .e-fallL,.emo-cry .e-fallR,
  .emo-sad .e-run{opacity:.9}
}