/* ==================================================================
   THE GREEN TURTLES — shell-clamp.css
   ------------------------------------------------------------------
   Standalone styling for the two clam shells that flank the ninja
   turtle (see .ninja-zone in ninja-turtle.css, and the markup in
   index.html) — see shell-clamp.js for the click-to-snap-shut-then-
   reopen behavior.
   ================================================================== */

/* Clam shells wiggle in place and their pearl softly pulses, like
   the shell is glinting in the light. Fixed width (not a percentage
   or vw unit) so they stay a constant size and never stretch,
   regardless of viewport width — flex-shrink: 0 keeps .ninja-zone's
   flexbox from squeezing them to make room for the ninja turtle. */
.clam {
  width: 85px;
  height: auto;
  flex-shrink: 0;
  overflow: visible;

  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: clam-wiggle 3.2s ease-in-out infinite;

  /* bounding-box makes the whole shell clickable, not just the
     pixels directly over a filled path; .clam otherwise inherits
     pointer-events: none from .page (see style.css), same as the
     rest of the page content that isn't individually opted back in. */
  pointer-events: bounding-box;
  cursor: pointer;
}

.clam-2 {
  animation-delay: 0.6s;
}

@media (max-width: 480px) {
  .clam {
    width: 60px;
  }
}

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

.shell-ridges path {
  fill: none;
  stroke: rgba(0, 0, 0, 0.18);
  stroke-width: 2;
  stroke-linecap: round;
}

/* The lid rests permanently rotated 180deg around the shell's top
   hinge point, so it's fully flipped open above the base by default.
   Closing is a shape morph, not a rotation: shell-clamp.js just
   toggles .closed, and the `d` transition below animates the lid
   path to that same shape rotated 180deg again (hand-computed — see
   the comment in index.html), which lands back at the shape's
   original orientation once the constant 180deg transform is
   reapplied — flush against the base, like a real clamshell hinge.

   transform-box is view-box (not fill-box) specifically so that hinge
   stays put: fill-box ties transform-origin to the element's *own
   current* rendered bounding box, which changes shape as `d` morphs
   (the open shape spans a region above the hinge, the closed one a
   region below it), so the pivot itself would drift mid-transition
   instead of staying anchored — view-box + an absolute coordinate
   pins it to a literal point in the SVG that never moves, matching
   how a real shell hinges, and needs no compensating translate. */
.clam-lid {
  transform-box: view-box;
  transform: rotate(-180deg);
}

.clam-lid-1 {
  transform-origin: 430px 120px;
}

.clam-lid-2 {
  transform-origin: 780px 132px;
}

.clam-lid .shell-body {
  transition: d 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.clam-lid-1 .shell-body {
  d: path("M375 205 Q375 135 430 120 Q485 135 485 205 Q430 220 375 205 Z");
}

.clam-lid-1.closed .shell-body {
  d: path("M485 35 Q485 105 430 120 Q375 105 375 35 Q430 20 485 35 Z");
}

.clam-lid-2 .shell-body {
  d: path("M735 208 Q735 145 780 132 Q825 145 825 208 Q780 222 735 208 Z");
}

.clam-lid-2.closed .shell-body {
  d: path("M825 56 Q825 119 780 132 Q735 119 735 56 Q780 42 825 56 Z");
}

.clam-pearl {
  fill: #fffdf5;
  animation: pulse-pearl 2s ease-in-out infinite;
}

.clam-2 .clam-pearl {
  animation-delay: 0.5s;
}

@keyframes pulse-pearl {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}