/* ─────────────────────────────────────────────────────────────────────────────
   Lemon · Character Animation Library
   60 cute idle / reactive animations for the fruit character system.

   Drop this into the live app:
       <link rel="stylesheet" href="animations.css">

   Apply by adding a class to the fruit SVG (or any wrapper element):
       <svg class="lemon-fruit lemon-anim-bob">…</svg>

   ── Naming ────────────────────────────────────────────────────────────────
   .lemon-anim-NAME            applied to the fruit svg (or its container)

   Eye / mouth / arm animations target inner elements by class:
       .lemon-eye, .lemon-eye-l, .lemon-eye-r
       .lemon-mouth
       .lemon-arm, .lemon-arm-r, .lemon-arm-l
   The included Fruits.jsx renders these classes automatically. If hooking
   into your existing 40 SVG characters, add the same classes to the
   matching elements once and every animation below works.

   ── Behavior conventions ──────────────────────────────────────────────────
   - All animations run `infinite` by default so they're safe idle loops.
   - To play a one-shot reaction, add the class then remove on `animationend`.
   - `transform-origin: 60px 95px` (bottom-center of the 120x120 viewBox) is
     set on the svg root so rotations look anchored to the "feet".
   - Animations use `cubic-bezier` easing — feel free to retune timing/easing.
   ──────────────────────────────────────────────────────────────────────── */

/* Base — every fruit gets a sensible transform-origin */
.lemon-fruit {
  transform-origin: 60px 95px;
  transform-box: fill-box;
  will-change: transform;
}
.lemon-eye, .lemon-mouth {
  transform-origin: center;
  transform-box: fill-box;
}
/* Arms & legs keep default SVG transform-box so inline transform-origin
   coordinates (per-fruit shoulder/hip) are interpreted in user-space. */

/* ════════════════════════════════════════════════════════════════════════
   SECTION 1 · GENTLE / IDLE (10)
   ════════════════════════════════════════════════════════════════════════ */

/* 1 · bob — the default warm idle. Gentle vertical lift. */
@keyframes lemon-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.lemon-anim-bob { animation: lemon-bob 2.4s ease-in-out infinite; }

/* 2 · sway — slow rocking left/right */
@keyframes lemon-sway {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
.lemon-anim-sway { animation: lemon-sway 3s ease-in-out infinite; }

/* 3 · wiggle — quick side-to-side wobble */
@keyframes lemon-wiggle {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px) rotate(-2deg); }
  75%      { transform: translateX(3px) rotate(2deg); }
}
.lemon-anim-wiggle { animation: lemon-wiggle 1.4s ease-in-out infinite; }

/* 4 · nod — small head nod */
@keyframes lemon-nod {
  0%, 100% { transform: rotate(0deg); }
  30%      { transform: rotate(6deg); }
  60%      { transform: rotate(-2deg); }
}
.lemon-anim-nod { animation: lemon-nod 1.6s ease-in-out infinite; }

/* 5 · float — gentle hover up-down with slight drift */
@keyframes lemon-float {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(2px, -3px); }
  75%      { transform: translate(-2px, -3px); }
}
.lemon-anim-float { animation: lemon-float 4s ease-in-out infinite; }

/* 6 · breathe — subtle scale in-out */
@keyframes lemon-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}
.lemon-anim-breathe { animation: lemon-breathe 3.6s ease-in-out infinite; }

/* 7 · peek — shy peek forward */
@keyframes lemon-peek {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  50%      { transform: translateY(2px) scale(1.04, 0.96); }
}
.lemon-anim-peek { animation: lemon-peek 2s ease-in-out infinite; }

/* 8 · tippy — off-balance teeter */
@keyframes lemon-tippy {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(8deg); }
}
.lemon-anim-tippy { animation: lemon-tippy 2.2s cubic-bezier(.65,.05,.36,1) infinite; }

/* 9 · drift — slow horizontal saunter */
@keyframes lemon-drift {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(8px); }
}
.lemon-anim-drift { animation: lemon-drift 5s ease-in-out infinite; }

/* 10 · wobble — bigger drunken wobble */
@keyframes lemon-wobble {
  0%, 100% { transform: rotate(0) translateX(0); }
  25%      { transform: rotate(-6deg) translateX(-3px); }
  50%      { transform: rotate(0) translateX(0); }
  75%      { transform: rotate(6deg) translateX(3px); }
}
.lemon-anim-wobble { animation: lemon-wobble 2.4s ease-in-out infinite; }

/* ════════════════════════════════════════════════════════════════════════
   SECTION 2 · HAPPY / ENERGY (15)
   ════════════════════════════════════════════════════════════════════════ */

/* 11 · bounce-happy */
@keyframes lemon-bounce-happy {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  40%      { transform: translateY(-12px) scale(0.96, 1.06); }
  60%      { transform: translateY(-12px) scale(0.96, 1.06); }
  80%      { transform: translateY(2px)  scale(1.06, 0.94); }
}
.lemon-anim-bounce-happy { animation: lemon-bounce-happy 1.1s ease-in-out infinite; }

/* 12 · pop — quick burst then settle */
@keyframes lemon-pop {
  0%, 100% { transform: scale(1); }
  20%      { transform: scale(1.18); }
  40%      { transform: scale(0.95); }
  60%      { transform: scale(1.04); }
}
.lemon-anim-pop { animation: lemon-pop 1.2s cubic-bezier(.34,1.56,.64,1) infinite; }

/* 13 · shimmy — shoulder shimmy */
@keyframes lemon-shimmy {
  0%, 100% { transform: translateX(0) rotate(0); }
  20%      { transform: translateX(-2px) rotate(-3deg); }
  40%      { transform: translateX(2px) rotate(3deg); }
  60%      { transform: translateX(-2px) rotate(-3deg); }
  80%      { transform: translateX(2px) rotate(3deg); }
}
.lemon-anim-shimmy { animation: lemon-shimmy 0.7s linear infinite; }

/* 14 · spin — full rotation */
@keyframes lemon-spin {
  0%   { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}
.lemon-anim-spin { animation: lemon-spin 2s linear infinite; transform-origin: center; }

/* 15 · strut — confident swagger */
@keyframes lemon-strut {
  0%, 100% { transform: translateX(0) rotate(0); }
  25%      { transform: translateX(-4px) rotate(-4deg); }
  50%      { transform: translateX(0)    rotate(0); }
  75%      { transform: translateX(4px)  rotate(4deg); }
}
.lemon-anim-strut { animation: lemon-strut 1.3s ease-in-out infinite; }

/* 16 · cheer — jump with energy */
@keyframes lemon-cheer {
  0%, 100% { transform: translateY(0) scale(1,1); }
  40%      { transform: translateY(-18px) scale(0.95,1.08); }
  70%      { transform: translateY(2px)   scale(1.08,0.92); }
}
.lemon-anim-cheer { animation: lemon-cheer 1.4s ease-out infinite; }

/* 17 · dance — combo of sway and bob */
@keyframes lemon-dance {
  0%, 100% { transform: translateY(0)   rotate(-4deg); }
  25%      { transform: translateY(-4px) rotate(4deg); }
  50%      { transform: translateY(0)   rotate(-4deg); }
  75%      { transform: translateY(-4px) rotate(4deg); }
}
.lemon-anim-dance { animation: lemon-dance 1s ease-in-out infinite; }

/* 18 · skip — skipping motion */
@keyframes lemon-skip {
  0%, 100% { transform: translateY(0) translateX(0) rotate(0); }
  30%      { transform: translateY(-10px) translateX(-2px) rotate(-6deg); }
  60%      { transform: translateY(0) translateX(2px) rotate(6deg); }
}
.lemon-anim-skip { animation: lemon-skip 0.9s ease-in-out infinite; }

/* 19 · tumble — forward somersault */
@keyframes lemon-tumble {
  0%   { transform: translateY(0) rotate(0); }
  50%  { transform: translateY(-8px) rotate(180deg); }
  100% { transform: translateY(0) rotate(360deg); }
}
.lemon-anim-tumble { animation: lemon-tumble 2s ease-in-out infinite; transform-origin: center; }

/* 20 · cartwheel — sideways rotation with arc */
@keyframes lemon-cartwheel {
  0%   { transform: translateX(-20px) rotate(0); }
  100% { transform: translateX(20px) rotate(360deg); }
}
.lemon-anim-cartwheel { animation: lemon-cartwheel 2.4s linear infinite; transform-origin: center; }

/* 21 · little-spin — small fast twirl */
@keyframes lemon-little-spin {
  0%, 100% { transform: rotate(0); }
  50%      { transform: rotate(360deg); }
}
.lemon-anim-little-spin { animation: lemon-little-spin 1.4s ease-in-out infinite; transform-origin: center; }

/* 22 · boing — vertical bounce with squash */
@keyframes lemon-boing {
  0%, 100% { transform: translateY(0) scale(1,1); }
  30%      { transform: translateY(-22px) scale(0.92, 1.1); }
  60%      { transform: translateY(0) scale(1.1, 0.88); }
  80%      { transform: translateY(-4px) scale(1,1); }
}
.lemon-anim-boing { animation: lemon-boing 1.6s cubic-bezier(.5,1.8,.5,1) infinite; }

/* 23 · dive — forward dive */
@keyframes lemon-dive {
  0%, 100% { transform: translateX(0) rotate(0); }
  50%      { transform: translateX(14px) rotate(20deg); }
}
.lemon-anim-dive { animation: lemon-dive 1.4s ease-in-out infinite; }

/* 24 · moonwalk — slides backward smoothly */
@keyframes lemon-moonwalk {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-20px); }
}
.lemon-anim-moonwalk { animation: lemon-moonwalk 2.4s cubic-bezier(.33,1,.68,1) infinite; }

/* 25 · wiggle-toes — tiny toe wiggle (bottom edge only) */
@keyframes lemon-wiggle-toes {
  0%, 100% { transform: skewX(0); }
  25%      { transform: skewX(2deg); }
  75%      { transform: skewX(-2deg); }
}
.lemon-anim-wiggle-toes { animation: lemon-wiggle-toes 0.6s ease-in-out infinite; transform-origin: 60px 100px; }

/* ════════════════════════════════════════════════════════════════════════
   SECTION 3 · EMOTION-SPECIFIC (15)
   ════════════════════════════════════════════════════════════════════════ */

/* 26 · shiver — nervous tremble */
@keyframes lemon-shiver {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-1.5px); }
  40%      { transform: translateX(1.5px); }
  60%      { transform: translateX(-1.5px); }
  80%      { transform: translateX(1.5px); }
}
.lemon-anim-shiver { animation: lemon-shiver 0.18s linear infinite; }

/* 27 · flop — dramatic sad collapse */
@keyframes lemon-flop {
  0%, 100% { transform: rotate(0) translateY(0); }
  60%      { transform: rotate(-22deg) translateY(8px); }
  80%      { transform: rotate(-18deg) translateY(8px); }
}
.lemon-anim-flop { animation: lemon-flop 2.4s ease-in-out infinite; }

/* 28 · dizzy — wobble in a circle */
@keyframes lemon-dizzy {
  0%   { transform: translate(0,0) rotate(0); }
  25%  { transform: translate(3px,-3px) rotate(15deg); }
  50%  { transform: translate(0,-6px) rotate(0); }
  75%  { transform: translate(-3px,-3px) rotate(-15deg); }
  100% { transform: translate(0,0) rotate(0); }
}
.lemon-anim-dizzy { animation: lemon-dizzy 1.2s ease-in-out infinite; }

/* 29 · twitch — nervous quick jerks */
@keyframes lemon-twitch {
  0%, 96%, 100% { transform: translateX(0); }
  97%           { transform: translateX(-3px) rotate(-4deg); }
  98%           { transform: translateX(3px) rotate(4deg); }
  99%           { transform: translateX(0); }
}
.lemon-anim-twitch { animation: lemon-twitch 3s ease-in-out infinite; }

/* 30 · hiccup — sudden upward hop with pause */
@keyframes lemon-hiccup {
  0%, 50%, 100% { transform: translateY(0); }
  55%           { transform: translateY(-12px) scale(1.04, 0.96); }
  65%           { transform: translateY(-2px); }
}
.lemon-anim-hiccup { animation: lemon-hiccup 2.4s ease-out infinite; }

/* 31 · inflate — puffs up bigger */
@keyframes lemon-inflate {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}
.lemon-anim-inflate { animation: lemon-inflate 2.8s ease-in-out infinite; }

/* 32 · stomp — stomps foot */
@keyframes lemon-stomp {
  0%, 100% { transform: translateY(0) scale(1,1); }
  40%      { transform: translateY(-4px) scale(1,1); }
  55%      { transform: translateY(2px) scale(1.06, 0.94); }
  65%      { transform: translateY(0) scale(1,1); }
}
.lemon-anim-stomp { animation: lemon-stomp 1.1s ease-out infinite; }

/* 33 · telescope — stretches tall then back */
@keyframes lemon-telescope {
  0%, 100% { transform: scaleY(1) translateY(0); }
  50%      { transform: scaleY(1.18) translateY(-4px); }
}
.lemon-anim-telescope { animation: lemon-telescope 2.4s ease-in-out infinite; }

/* 34 · bow — takes a bow */
@keyframes lemon-bow {
  0%, 100% { transform: rotate(0) translateY(0); }
  50%      { transform: rotate(28deg) translateY(4px); }
}
.lemon-anim-bow { animation: lemon-bow 2.2s ease-in-out infinite; }

/* 35 · sneeze — head pulls back, snaps forward */
@keyframes lemon-sneeze {
  0%, 60%, 100% { transform: translateY(0) translateX(0) rotate(0); }
  68%           { transform: translateY(-4px) rotate(-18deg); }
  74%           { transform: translateX(6px) rotate(14deg) translateY(2px); }
}
.lemon-anim-sneeze { animation: lemon-sneeze 2.6s ease-out infinite; }

/* 36 · belly-laugh — full body shake */
@keyframes lemon-belly-laugh {
  0%, 100% { transform: translate(0,0) rotate(0); }
  10%      { transform: translateY(-3px) rotate(-3deg); }
  20%      { transform: translateY(0)    rotate(3deg); }
  30%      { transform: translateY(-3px) rotate(-3deg); }
  40%      { transform: translateY(0)    rotate(3deg); }
  50%      { transform: translateY(-3px) rotate(-3deg); }
  60%      { transform: translateY(0)    rotate(3deg); }
}
.lemon-anim-belly-laugh { animation: lemon-belly-laugh 1.4s ease-in-out infinite; }

/* 37 · sigh — slow inflate, deflate */
@keyframes lemon-sigh {
  0%, 100% { transform: scale(1,1) translateY(0); }
  30%      { transform: scale(1.08, 1.05) translateY(-2px); }
  60%      { transform: scale(0.96, 0.96) translateY(2px); }
}
.lemon-anim-sigh { animation: lemon-sigh 3.6s ease-in-out infinite; }

/* 38 · tiptoe — sneaking on tippy-toes */
@keyframes lemon-tiptoe {
  0%, 100% { transform: translate(0,0); }
  25%      { transform: translate(4px, -3px); }
  50%      { transform: translate(8px, 0); }
  75%      { transform: translate(4px, -3px); }
}
.lemon-anim-tiptoe { animation: lemon-tiptoe 2.4s ease-in-out infinite; }

/* 39 · gasp — sharp inhale, hold, release */
@keyframes lemon-gasp {
  0%, 100% { transform: scale(1); }
  20%      { transform: scale(1.12); }
  40%      { transform: scale(1.12); }
  60%      { transform: scale(0.96); }
}
.lemon-anim-gasp { animation: lemon-gasp 2.2s ease-out infinite; }

/* 40 · shrug — shoulders lift */
@keyframes lemon-shrug {
  0%, 100% { transform: translateY(0) scaleY(1); }
  40%      { transform: translateY(-2px) scaleY(0.94); }
  60%      { transform: translateY(-2px) scaleY(0.94); }
}
.lemon-anim-shrug { animation: lemon-shrug 1.8s ease-in-out infinite; }

/* ════════════════════════════════════════════════════════════════════════
   SECTION 4 · EYES & FACE (8)
   Target inner elements. Apply to fruit; rules cascade down.
   ════════════════════════════════════════════════════════════════════════ */

/* 41 · blink — both eyes close briefly */
@keyframes lemon-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(0.1); }
}
.lemon-anim-blink .lemon-eye { animation: lemon-blink 3.6s ease-in-out infinite; transform-origin: center; }

/* 42 · wink — only right eye closes */
@keyframes lemon-wink {
  0%, 88%, 100% { transform: scaleY(1); }
  92%           { transform: scaleY(0.1); }
}
.lemon-anim-wink .lemon-eye-r { animation: lemon-wink 3s ease-in-out infinite; transform-origin: center; }

/* 43 · heart-eyes — eyes pulse like a beat */
@keyframes lemon-heart-eyes {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(1.4); }
  60%      { transform: scale(0.9); }
  80%      { transform: scale(1.2); }
}
.lemon-anim-heart-eyes .lemon-eye { animation: lemon-heart-eyes 1.4s ease-in-out infinite; }

/* 44 · starry-eyes — slow shimmer scale */
@keyframes lemon-starry-eyes {
  0%, 100% { transform: scale(1) rotate(0); opacity: 1; }
  50%      { transform: scale(1.4) rotate(180deg); opacity: 0.6; }
}
.lemon-anim-starry-eyes .lemon-eye { animation: lemon-starry-eyes 2.2s ease-in-out infinite; }

/* 45 · shake-no — quick horizontal head shake */
@keyframes lemon-shake-no {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}
.lemon-anim-shake-no { animation: lemon-shake-no 0.7s ease-in-out infinite; }

/* 46 · nod-yes — vigorous yes */
@keyframes lemon-nod-yes {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(14deg); }
  50%      { transform: rotate(-4deg); }
  75%      { transform: rotate(10deg); }
}
.lemon-anim-nod-yes { animation: lemon-nod-yes 0.8s ease-in-out infinite; }

/* 47 · look-around — eyes scan side to side */
@keyframes lemon-look-around {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(2px); }
  50%      { transform: translateX(-2px); }
  80%      { transform: translateX(2px); }
}
.lemon-anim-look-around .lemon-eye { animation: lemon-look-around 2.8s ease-in-out infinite; }

/* 48 · doze — eyes droop slowly */
@keyframes lemon-doze {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.4); }
}
.lemon-anim-doze .lemon-eye { animation: lemon-doze 3.6s ease-in-out infinite; transform-origin: center; }

/* ════════════════════════════════════════════════════════════════════════
   SECTION 5 · ARMS (8)
   Arms hang STRAIGHT DOWN from each shoulder at rest. transform-origin is
   set inline per-fruit (the shoulder coords) so rotations pivot correctly
   on every character — no hardcoded coordinates here.
   Angle convention (SVG y-down):
     0deg  = arm hangs down
     -90   = arm extends right (counter-clockwise = up on the right side)
     +90   = arm extends left
     ±180  = arm points straight up
   ════════════════════════════════════════════════════════════════════════ */

/* 49 · wave — right arm raises to side and oscillates */
@keyframes lemon-wave-r {
  0%, 100% { transform: rotate(-75deg); }
  50%      { transform: rotate(-110deg); }
}
.lemon-anim-wave .lemon-arm-r { animation: lemon-wave-r 0.7s ease-in-out infinite; }

/* 50 · wave-both — both arms raise and wave */
@keyframes lemon-wave-l {
  0%, 100% { transform: rotate(75deg); }
  50%      { transform: rotate(110deg); }
}
.lemon-anim-wave-both .lemon-arm-r { animation: lemon-wave-r 0.7s ease-in-out infinite; }
.lemon-anim-wave-both .lemon-arm-l { animation: lemon-wave-l 0.7s ease-in-out infinite; }

/* 51 · salute — right arm swings up to forehead and holds */
@keyframes lemon-salute {
  0%, 20%, 100% { transform: rotate(0); }
  40%, 80%      { transform: rotate(-150deg); }
}
.lemon-anim-salute .lemon-arm-r { animation: lemon-salute 2.6s ease-in-out infinite; }

/* 52 · point — right arm extends out horizontally and holds */
@keyframes lemon-point {
  0%, 20%, 100% { transform: rotate(0); }
  40%, 80%      { transform: rotate(-90deg); }
}
.lemon-anim-point .lemon-arm-r { animation: lemon-point 2s ease-in-out infinite; }

/* 53 · flex — right arm curls up muscle pose */
@keyframes lemon-flex {
  0%, 100% { transform: rotate(0); }
  50%      { transform: rotate(-135deg); }
}
.lemon-anim-flex .lemon-arm-r { animation: lemon-flex 1.4s ease-in-out infinite; }

/* 54 · clap — both arms swing inward and meet */
@keyframes lemon-clap-r { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(75deg); } }
@keyframes lemon-clap-l { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-75deg); } }
.lemon-anim-clap .lemon-arm-r { animation: lemon-clap-r 0.5s ease-in-out infinite; }
.lemon-anim-clap .lemon-arm-l { animation: lemon-clap-l 0.5s ease-in-out infinite; }

/* 55 · arms-up — both arms point straight up with slight sway */
@keyframes lemon-arms-up-r { 0%, 100% { transform: rotate(-170deg); } 50% { transform: rotate(-188deg); } }
@keyframes lemon-arms-up-l { 0%, 100% { transform: rotate(170deg); } 50% { transform: rotate(188deg); } }
.lemon-anim-arms-up .lemon-arm-r { animation: lemon-arms-up-r 1.6s ease-in-out infinite; }
.lemon-anim-arms-up .lemon-arm-l { animation: lemon-arms-up-l 1.6s ease-in-out infinite; }

/* 56 · arm-hug — both arms swing across body in a hug, with a gentle sway */
.lemon-anim-arm-hug .lemon-arm-r { transform: rotate(80deg); }
.lemon-anim-arm-hug .lemon-arm-l { transform: rotate(-80deg); }
.lemon-anim-arm-hug { animation: lemon-sway 4s ease-in-out infinite; }

/* ════════════════════════════════════════════════════════════════════════
   SECTION 5b · LEGS — new animations enabled by the cute limbs
   ════════════════════════════════════════════════════════════════════════ */

/* 56a · march — legs lift in alternation */
@keyframes lemon-march-l {
  0%, 50%, 100% { transform: translateY(0) rotate(0); }
  25%           { transform: translateY(-4px) rotate(-10deg); }
}
@keyframes lemon-march-r {
  0%, 50%, 100% { transform: translateY(0) rotate(0); }
  75%           { transform: translateY(-4px) rotate(10deg); }
}
.lemon-anim-march .lemon-leg-l { animation: lemon-march-l 0.7s ease-in-out infinite; }
.lemon-anim-march .lemon-leg-r { animation: lemon-march-r 0.7s ease-in-out infinite; }

/* 56b · kick — right leg kicks forward */
@keyframes lemon-kick {
  0%, 60%, 100% { transform: rotate(0); }
  30%           { transform: rotate(-50deg); }
}
.lemon-anim-kick .lemon-leg-r { animation: lemon-kick 1.4s ease-in-out infinite; }

/* 56c · tap-foot — impatient foot tap */
@keyframes lemon-tap-foot {
  0%, 100% { transform: translateY(0); }
  20%      { transform: translateY(-3px); }
  40%      { transform: translateY(0); }
  60%      { transform: translateY(-3px); }
  80%      { transform: translateY(0); }
}
.lemon-anim-tap-foot .lemon-leg-r { animation: lemon-tap-foot 0.6s ease-in-out infinite; }

/* 56d · run-in-place — legs alternate fast */
@keyframes lemon-run-l { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-20deg); } }
@keyframes lemon-run-r { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(20deg); } }
.lemon-anim-run-in-place .lemon-leg-l { animation: lemon-run-l 0.35s ease-in-out infinite; }
.lemon-anim-run-in-place .lemon-leg-r { animation: lemon-run-r 0.35s ease-in-out infinite reverse; }

/* ════════════════════════════════════════════════════════════════════════
   SECTION 6 · DECORATIVE EFFECTS (4)
   These rely on pseudo-elements on a container wrapping the fruit, so apply
   the class to a parent element with `position: relative`.
   ════════════════════════════════════════════════════════════════════════ */

/* Shared host setup */
.lemon-anim-sparkle,
.lemon-anim-heart-pop,
.lemon-anim-zzz,
.lemon-anim-bubble {
  position: relative;
  display: inline-block;
}
.lemon-anim-sparkle::before,
.lemon-anim-sparkle::after,
.lemon-anim-heart-pop::before,
.lemon-anim-zzz::before,
.lemon-anim-bubble::before {
  content: "";
  position: absolute;
  pointer-events: none;
  font-family: serif;
  z-index: 2;
}

/* 57 · sparkle — sparkles burst around */
.lemon-anim-sparkle::before {
  content: "✦";
  font-size: 18px; color: #F5D880;
  top: 8%; left: 6%;
  animation: lemon-sparkle-a 1.6s ease-in-out infinite;
}
.lemon-anim-sparkle::after {
  content: "✧";
  font-size: 14px; color: #C7B6E0;
  bottom: 12%; right: 8%;
  animation: lemon-sparkle-b 1.6s ease-in-out infinite 0.4s;
}
@keyframes lemon-sparkle-a {
  0%, 100% { opacity: 0; transform: scale(0.6) rotate(0); }
  50%      { opacity: 1; transform: scale(1.2) rotate(60deg); }
}
@keyframes lemon-sparkle-b {
  0%, 100% { opacity: 0; transform: scale(0.5) rotate(0); }
  50%      { opacity: 1; transform: scale(1.1) rotate(-50deg); }
}

/* 58 · heart-pop — heart floats up */
.lemon-anim-heart-pop::before {
  content: "♥";
  font-size: 20px; color: #E8907E;
  top: 0; left: 50%;
  animation: lemon-heart-float 2s ease-out infinite;
}
@keyframes lemon-heart-float {
  0%   { opacity: 0; transform: translate(-50%, 12px) scale(0.6); }
  30%  { opacity: 1; transform: translate(-50%, -4px) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -36px) scale(0.7); }
}

/* 59 · zzz — sleep z's drift up */
.lemon-anim-zzz::before {
  content: "z";
  font-size: 22px; color: #8A8071; font-style: italic;
  top: 12%; right: 4%;
  animation: lemon-zzz 2.2s ease-out infinite;
}
@keyframes lemon-zzz {
  0%   { opacity: 0; transform: translate(0, 8px) rotate(0); }
  25%  { opacity: 1; transform: translate(2px, 0) rotate(8deg); }
  100% { opacity: 0; transform: translate(8px, -24px) rotate(20deg); }
}

/* 60 · bubble — a thought bubble floats up */
.lemon-anim-bubble::before {
  content: "○";
  font-size: 16px; color: #C7B6E0;
  top: 10%; left: 8%;
  animation: lemon-bubble 2.4s ease-out infinite;
}
@keyframes lemon-bubble {
  0%   { opacity: 0; transform: translate(0, 8px) scale(0.4); }
  30%  { opacity: 1; transform: translate(-4px, 0) scale(1); }
  100% { opacity: 0; transform: translate(-10px, -28px) scale(1.2); }
}

/* ════════════════════════════════════════════════════════════════════════
   Reduced motion — respect user preference
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .lemon-fruit,
  .lemon-eye, .lemon-mouth, .lemon-arm,
  [class*="lemon-anim-"] {
    animation: none !important;
  }
}