/* ==================================================================
   THE GREEN TURTLES — walking-turtle.css
   ------------------------------------------------------------------
   Standalone styling for the center-stage walking turtle — see
   walking-turtle.js for its click-to-meep behavior.

   Self-contained: the shell/head/leg/tail classes below share names
   (and, deliberately, identical values) with ninja-turtle.css and
   swimming-turtle.css, since all three turtles reuse the same visual
   language. Duplicating them here means this file has no dependency
   on the others loading at all.
   ================================================================== */

.turtle {
  width: 100%;
  max-width: 340px;
  overflow: visible;
}

.shell-base {
  fill: var(--shell-light);
  stroke: var(--shell-dark);
  stroke-width: 3;
}

.shell-pattern path {
  fill: none;
  stroke: var(--shell-dark);
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0.55;
}

.shell-highlight {
  fill: var(--shell-highlight);
  opacity: 0.55;
}

.turtle-head ellipse:first-child {
  fill: var(--skin);
  stroke: var(--skin-dark);
  stroke-width: 3;
}

.leg ellipse {
  fill: var(--skin);
  stroke: var(--skin-dark);
  stroke-width: 3;
}

.pupil {
  fill: #1b4332;
}

.smile {
  fill: none;
  stroke: var(--skin-dark);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.cheek {
  fill: var(--cheek);
  opacity: 0.7;
}

.turtle-tail {
  fill: var(--skin);
  stroke: var(--skin-dark);
  stroke-width: 2;
}

/* ---------------------------------------------------------------
   Walk-cycle animation
   The whole body bobs up/down (walker-body) while diagonal leg
   pairs swing forwards/backwards in opposition, giving a simple
   four-legged walk cycle using only CSS transforms.
------------------------------------------------------------------ */
.turtle-stage {
  margin: 0.4rem 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* .turtle.turtle--walker (not just .turtle--walker): ninja-turtle.css
   also defines a .turtle rule of equal specificity, so which one wins
   here would otherwise depend on file load order in index.html — the
   compound selector settles it by specificity instead, regardless of
   order. */
.turtle.turtle--walker {
  max-width: min(260px, 26vh);
  pointer-events: bounding-box; /* whole silhouette clickable, not just filled pixels */
  cursor: pointer;
}

.walker-shadow {
  fill: rgba(0, 0, 0, 0.18);
  animation: shadow-pulse 1.1s ease-in-out infinite;
}

@keyframes shadow-pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50%      { transform: scale(0.85); opacity: 0.3; }
}

.walker-body {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: walk-bob 1.1s ease-in-out infinite;
}

@keyframes walk-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-4px) rotate(-1deg); }
  50%      { transform: translateY(0) rotate(0deg); }
  75%      { transform: translateY(-4px) rotate(1deg); }
}

/* front-left + back-right swing together; front-right + back-left
   swing in the opposite phase, like a real quadruped gait. */
.turtle--walker .leg {
  transform-box: fill-box;
  transform-origin: 50% 0%;
}

.turtle--walker .leg-front-left,
.turtle--walker .leg-back-right {
  animation: swing-forward 1.1s ease-in-out infinite;
}

.turtle--walker .leg-front-right,
.turtle--walker .leg-back-left {
  animation: swing-back 1.1s ease-in-out infinite;
}

@keyframes swing-forward {
  0%, 100% { transform: rotate(18deg); }
  50%      { transform: rotate(-18deg); }
}

@keyframes swing-back {
  0%, 100% { transform: rotate(-18deg); }
  50%      { transform: rotate(18deg); }
}

.turtle--walker .turtle-head {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: head-bob 1.1s ease-in-out infinite;
}

@keyframes head-bob {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}

@media (max-width: 480px) {
  .turtle.turtle--walker {
    max-width: 260px;
  }
}