/* ==================================================================
   THE GREEN TURTLES — crab.css
   ------------------------------------------------------------------
   Standalone styling for the crab visitor: a character that walks in
   from the right every so often, stands guard by a clam for about a
   minute, then leaves again — see crab.js for the walk-cycle
   scheduling, cursor-proximity reactions and click handling. Its
   markup is built entirely by crab.js, so nothing in index.html
   references these classes directly.
   ------------------------------------------------------------------
   Table of contents:
     1. Positioning & walk transition
     2. Body, eyes, legs
     3. Claws & knife
     4. Fleeing state
   ================================================================== */

/* ---------------------------------------------------------------
   1. Positioning & walk transition
   Fixed to the viewport (not nested inside .page or .background),
   so it isn't affected by their pointer-events/z-index rules and
   sits above everything by default. The walk in/out is just this
   one element's transform sliding between "off past the right edge"
   and "resting" — crab.js drives it by setting style.transform (and
   style.transitionDuration, since entering/leaving/fleeing all move
   at different speeds) rather than toggling CSS animation classes,
   the same transition-based approach used for the clam lids.
------------------------------------------------------------------ */
.crab {
  position: fixed;
  left: 72%;
  bottom: clamp(6px, 2vh, 20px);
  width: clamp(90px, 11vw, 150px);
  z-index: 2;
  transform: translateX(130vw);
  transition: transform 3.2s ease-in-out;
  cursor: pointer;
}

.crab-art {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  animation: crab-bob 0.6s ease-in-out infinite;
}

@keyframes crab-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* ---------------------------------------------------------------
   2. Body, eyes, legs
------------------------------------------------------------------ */
.crab-body {
  fill: #e8613b;
  stroke: #a83f1c;
  stroke-width: 3;
}

.crab-shell-lines {
  fill: none;
  stroke: #a83f1c;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.5;
}

.crab-eye-stalk {
  fill: none;
  stroke: #a83f1c;
  stroke-width: 4;
  stroke-linecap: round;
}

/* Mood: neutral by default. .crab.suspicious (cursor in point-and-
   track range) narrows the eyes; .crab.angry (cursor in slashing
   range) narrows them further, reddens the pupils and reveals the
   furrowed eyebrows below. Pupil position itself is set by crab.js
   via cx/cy attributes (see lookEyesAt), independent of these
   transform/color changes. */
.crab-eye {
  fill: #fff;
  stroke: #a83f1c;
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: transform 0.2s ease;
}

.crab.suspicious .crab-eye,
.crab.suspicious .crab-pupil {
  transform: scaleY(0.55);
}

.crab.angry .crab-eye,
.crab.angry .crab-pupil {
  transform: scaleY(0.35);
}

/* transform-box/origin match .crab-eye above — scaling stays centered
   on wherever the pupil currently is, since crab.js moves it around
   via cx/cy (a different mechanism, so the two never fight). */
.crab-pupil {
  fill: #1b1b1b;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: transform 0.2s ease, fill 0.2s ease;
}

.crab.angry .crab-pupil {
  fill: #c0281a;
}

.crab-brow {
  fill: none;
  stroke: #7a1f10;
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.crab.angry .crab-brow {
  opacity: 1;
}

.crab-leg {
  fill: none;
  stroke: #a83f1c;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: crab-scuttle 0.6s ease-in-out infinite;
}

.crab-leg-2 { animation-delay: 0.1s; }
.crab-leg-3 { animation-delay: 0.2s; }
.crab-leg-4 { animation-delay: 0.05s; }
.crab-leg-5 { animation-delay: 0.15s; }
.crab-leg-6 { animation-delay: 0.25s; }

@keyframes crab-scuttle {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(8deg); }
}

/* ---------------------------------------------------------------
   3. Claws & knife
   The knife-wielding claw's rotation is driven entirely by crab.js
   via inline style.transform (see aimAt() and the slash() one-shot
   Web Animations API swipe) — this transition just smooths every
   change, including snapping back to neutral (an empty inline style)
   once the cursor moves far away again.
------------------------------------------------------------------ */
.crab-claw {
  fill: #d9532a;
  stroke: #a83f1c;
  stroke-width: 3;
}

.crab-claw-left {
  transform-box: fill-box;
  transform-origin: 100% 50%;
  animation: crab-pinch 2.6s ease-in-out infinite;
}

@keyframes crab-pinch {
  0%, 85%, 100% { transform: rotate(0deg); }
  92%           { transform: rotate(-6deg); }
}

.crab-knife-arm {
  transform-box: view-box;
  transform-origin: 175px 88px;
  transition: transform 0.15s ease-out;
}

.crab-knife-blade {
  fill: #d7dadf;
  stroke: #8a919c;
  stroke-width: 1.5;
}

.crab-knife-handle {
  fill: #5c3a21;
}

/* ---------------------------------------------------------------
   4. Fleeing state
   Applied by crab.js while it's making its fast exit after being
   clicked rapidly — same walk machinery, just a quicker bob/scuttle.
------------------------------------------------------------------ */
.crab.fleeing .crab-art {
  animation-duration: 0.22s;
}

.crab.fleeing .crab-leg {
  animation-duration: 0.25s;
}