/* ==================================================================
   THE GREEN TURTLES — ninja-turtle.css
   ------------------------------------------------------------------
   Standalone styling for the ninja turtle at the bottom of the
   screen — see ninja-turtle.js for eye tracking, click-to-meep, and
   the mask-color/weapon cycle.

   Self-contained: the shell/head/leg/pupil/smile classes below share
   names (and, deliberately, identical values) with walking-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;
}

.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;
}

/* ---------------------------------------------------------------
   Idle animation, mask, weapons
   This turtle doesn't walk — it stands guard with a gentle idle
   breathing motion, while its mask tails flutter as if caught in a
   breeze.
------------------------------------------------------------------ */
/* Row layout, not column: the two clam shells (shell-clamp.css) are
   also children here, one on each side of the ninja turtle.
   flex-end bottom-aligns all three so they read as standing on the
   same sand line despite their different heights; the clams' own
   fixed width (not this container) is what keeps them a constant
   size regardless of viewport width. */
.ninja-zone {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: 0.75rem;
  padding-bottom: 0.5rem;
}

/* .turtle.turtle--ninja (not just .turtle--ninja): walking-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--ninja {
  max-width: min(220px, 22vh);
  pointer-events: bounding-box; /* whole silhouette clickable, not just filled pixels */
  cursor: pointer;
}

.ninja-body {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: idle-breathe 2.6s ease-in-out infinite;
}

@keyframes idle-breathe {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.03); }
}

/* Exactly one of these is shown at a time — ninja-turtle.js toggles
   display directly, kept in sync with the mask color cycle. */
.ninja-weapon {
  display: none;
}

.turtle--ninja .leg {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: idle-shuffle 2.6s ease-in-out infinite;
}

.turtle--ninja .leg-front-right,
.turtle--ninja .leg-back-left {
  animation-delay: 1.3s;
}

@keyframes idle-shuffle {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}

.mask-band {
  fill: var(--mask-color);
  stroke: var(--mask-dark);
  stroke-width: 2;
}

.mask-eye-hole {
  fill: #1b1b1b;
}

/* Scoped under .turtle--ninja (rather than a bare .ninja-pupil
   selector) so this reliably wins over the plain .pupil rule above
   regardless of which order walking-turtle.css/swimming-turtle.css
   happen to load in — specificity, not source order, decides it. */
.turtle--ninja .ninja-pupil {
  fill: #ffffff;
}

.mask-tail {
  fill: var(--mask-color);
  stroke: var(--mask-dark);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: 90% 50%;
  animation: flutter 1.8s ease-in-out infinite;
}

.mask-tail-right {
  transform-origin: 10% 50%;
  animation-delay: 0.3s;
}

@keyframes flutter {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-10deg); }
}

@media (max-width: 480px) {
  .turtle.turtle--ninja {
    max-width: 210px;
  }
}