/* Living Menu engine · character rig, looping part motion and effects.
   Theme-agnostic: motion names (tail, fin, wing…) are the vocabulary. */

.lm-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 30;
}

.lm-char {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.lm-char.is-tappable { pointer-events: auto; cursor: pointer; }
.lm-char.is-static { position: relative; }

.lm-flip, .lm-drift, .lm-anatomy {
  position: absolute;
  inset: 0;
}
.lm-flip { transition: transform .35s ease; }
.lm-flip.is-flipped { transform: scaleY(-1); }

.lm-part { position: absolute; transform-origin: 50% 50%; }
.lm-bleed { position: absolute; }
.lm-part img {
  display: block;
  max-width: none;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

/* Looping motion, timed from the Figma 8-second swimming study.
   --cycle sets the swim speed; the tail beats eight times per cycle. */
.lm-char { --cycle: 8s; }
.lm-anatomy { animation: lm-body var(--cycle) ease-in-out infinite; transform-origin: 50% 50%; }
.lm-part--tail { animation: lm-tail calc(var(--cycle) / 8) ease-in-out infinite; }
.lm-part--fin  { animation: lm-fin var(--cycle) ease-in-out infinite; }
.lm-part--wing { animation: lm-wing calc(var(--cycle) / 40) linear infinite; }

@keyframes lm-body {
  0%   { transform: translateY(0)    rotate(1deg); }
  25%  { transform: translateY(-5px) rotate(0deg); }
  50%  { transform: translateY(0)    rotate(-1deg); }
  75%  { transform: translateY(5px)  rotate(0deg); }
  100% { transform: translateY(0)    rotate(1deg); }
}
@keyframes lm-tail {
  0%, 100% { transform: rotate(3deg); }
  50%      { transform: rotate(-3deg); }
}
@keyframes lm-fin {
  0%, 50%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-4deg); }
  75% { transform: rotate(4deg); }
}
@keyframes lm-wing {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(.35); }
}

/* A hurried fish swishes harder, not just faster. */
.lm-char.is-dashing .lm-part--tail { animation-name: lm-tail-hard; }
@keyframes lm-tail-hard {
  0%, 100% { transform: rotate(9deg); }
  50%      { transform: rotate(-9deg); }
}

/* Hero drift from the Figma prototype (instance-level motion). */
.lm-drift { animation: lm-drift var(--drift-cycle, 8s) ease-in-out infinite; }
@keyframes lm-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(var(--drift-x, 15px), var(--drift-y, -8px)) rotate(var(--drift-r, 2deg)); }
}

/* Effects */
.lm-effect { position: absolute; pointer-events: none; transform: translate(-50%, -84%); }
.lm-effect svg { display: block; width: 100%; height: auto; overflow: visible; }

/* What a dish does when a character chooses it */
.lm-chosen { position: relative; }
.lm-ripples { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lm-ripples span {
  position: absolute;
  left: var(--rx, 50%);
  top: var(--ry, 50%);
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 1.5px solid rgba(255, 249, 238, .9);
  border-radius: 50%;
  animation: lm-ripple 1.6s cubic-bezier(.2,.6,.3,1) forwards;
}
.lm-ripples span:nth-child(2) { animation-delay: .22s; }
.lm-ripples span:nth-child(3) { animation-delay: .44s; }
@keyframes lm-ripple {
  from { transform: scale(.2); opacity: 1; }
  to   { transform: scale(6); opacity: 0; }
}

/* Paused (tab hidden, user turned motion off) */
.lm-paused .lm-anatomy,
.lm-paused .lm-part,
.lm-paused .lm-drift,
.lm-char.is-offscreen .lm-anatomy,
.lm-char.is-offscreen .lm-part,
.lm-char.is-offscreen .lm-drift { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .lm-anatomy, .lm-part, .lm-drift, .lm-flip { animation: none !important; transition: none !important; }
}