/* ============================================================
   Water slime character — pure CSS
   ============================================================ */

/* Stage — full-width track, slime walks across it */
.slime-stage {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 120px);
  overflow: hidden;
}

/* ── Container — horizontal travel ───────────────────────── */
.slime {
  position: absolute;
  bottom: 60px;
  left: 0;
  width: 165px;
  height: 75px;
  filter:
    drop-shadow(0 10px 28px rgba(120, 168, 237, 0.4))
    drop-shadow(0 0 18px rgba(231, 186, 188, 0.25));
  animation: slime-travel 12s linear infinite;
}

/* ── Body — vertical hop (3 per travel cycle) ────────────── */
.slime-body {
  position: absolute;
  bottom: 14px;
  left: 0;
  width: 165px;
  height: 100px;

  background:
    radial-gradient(
      ellipse 38% 30% at 32% 30%,
      rgba(255, 255, 255, 0.80) 0%,
      rgba(255, 255, 255, 0.0)  100%
    ),
    radial-gradient(
      ellipse 20% 18% at 68% 28%,
      rgba(255, 255, 255, 0.60) 0%,
      rgba(255, 255, 255, 0.0)  100%
    ),
    radial-gradient(
      ellipse 10% 9% at 80% 40%,
      rgba(255, 255, 255, 0.50) 0%,
      rgba(255, 255, 255, 0.0)  100%
    ),
    radial-gradient(
      ellipse 55% 35% at 12% 92%,
      #E7BABC 0%,
      transparent 100%
    ),
    linear-gradient(
      135deg,
      #AACAF6 0%,
      #8DB9F0 42%,
      #78A8ED 68%,
      #E7BABC 100%
    );

  border-radius: 65% 94% 73% 57% / 100% 98% 47% 40%;

  box-shadow:
    inset 0 0 18px 4px rgba(231, 186, 188, 0.45),
    inset 0 -6px 12px rgba(120, 168, 237, 0.3);

  /* hop repeats 3× per 5s travel — 5/3 ≈ 1.667s per hop */
  animation: slime-hop 4s ease-in-out infinite;
  transform-origin: center bottom;
}

/* ── Ground shadow ────────────────────────────────────────── */
.slime-shadow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 10px;
  background: radial-gradient(ellipse, rgba(120, 168, 237, 0.2) 0%, transparent 70%);
  border-radius: 50%;
  animation: slime-shadow-hop 4s ease-in-out infinite;
}

/* ============================================================
   Keyframes
   ============================================================ */

/* Horizontal travel — left edge to right edge */
@keyframes slime-travel {
  0%   { transform: translateX(0); }
  100% { transform: translateX(100vw); }
}

/* Vertical hop — shape morphs at every phase */
@keyframes slime-hop {
  0%, 100% {
    transform: translateY(0) scaleX(1) scaleY(1);
    border-radius: 65% 94% 73% 57% / 100% 98% 47% 40%;
  }
  8% {
    transform: translateY(2px) scaleX(1.20) scaleY(0.74);
    border-radius: 44% 88% 24% 52% / 96% 100% 30% 33%;
  }
  18% {
    transform: translateY(-22px) scaleX(0.82) scaleY(1.18) skewX(-6deg);
    border-radius: 42% 70% 65% 38% / 105% 95% 82% 72%;
  }
  32% {
    transform: translateY(-52px) scaleX(0.86) scaleY(1.12) skewX(-3deg);
    border-radius: 48% 76% 70% 44% / 98% 90% 80% 68%;
  }
  47% {
    transform: translateY(-68px) scaleX(1.0) scaleY(1.0) skewX(0deg);
    border-radius: 52% 88% 85% 48% / 92% 96% 80% 54%;
  }
  62% {
    transform: translateY(-50px) scaleX(0.88) scaleY(1.10) skewX(2deg);
    border-radius: 46% 74% 68% 42% / 96% 92% 82% 66%;
  }
  80% {
    transform: translateY(-14px) scaleX(0.84) scaleY(1.16) skewX(3deg);
    border-radius: 40% 68% 62% 36% / 102% 96% 84% 70%;
  }
  91% {
    transform: translateY(0) scaleX(1.26) scaleY(0.72) skewX(0deg);
    border-radius: 68% 85% 85% 65% / 60% 60% 44% 44%;
  }
  96% {
    transform: translateY(-6px) scaleX(1.06) scaleY(0.96);
    border-radius: 56% 82% 80% 52% / 78% 78% 60% 58%;
  }
}

/* Shadow tracks the hop — big on ground, tiny at peak */
@keyframes slime-shadow-hop {
  0%, 100% { transform: translateX(-50%) scaleX(1.14); opacity: 0.85; }
  8%        { transform: translateX(-50%) scaleX(1.20); opacity: 1;    }
  18%       { transform: translateX(-50%) scaleX(0.75); opacity: 0.60; }
  47%       { transform: translateX(-50%) scaleX(0.45); opacity: 0.28; }
  80%       { transform: translateX(-50%) scaleX(0.70); opacity: 0.55; }
  91%       { transform: translateX(-50%) scaleX(1.28); opacity: 1;    }
  96%       { transform: translateX(-50%) scaleX(1.05); opacity: 0.80; }
}

/* ── Jump on demand (add .slime-jumping via JS) ──────────── */
@keyframes slime-jump {
  0%   { transform: scaleX(1)    scaleY(1);    }
  10%  { transform: scaleX(1.15) scaleY(0.75); }
  45%  { transform: translateY(-60px) scaleX(0.87) scaleY(1.18); }
  58%  { transform: translateY(-65px) scaleX(0.87) scaleY(1.18); }
  82%  { transform: scaleX(1.18) scaleY(0.80); }
  92%  { transform: scaleX(0.96) scaleY(1.04); }
  100% { transform: scaleX(1)    scaleY(1);    }
}

/* ── Slide lean (add .slime-sliding via JS) ──────────────── */
@keyframes slime-slide-lean {
  0%, 100% { transform: skewX(0deg);  }
  50%       { transform: skewX(-7deg); }
}