/* ==================================================================
   THE GREEN TURTLES — swimming-turtle.css
   ------------------------------------------------------------------
   Standalone styling for the 4 background swimming turtles — see
   swimming-turtle.js for depth randomization and the click-to-boost
   behavior.

   Self-contained: the shell/head/pupil/smile/tail classes below
   share names (and, deliberately, identical values) with
   walking-turtle.css and ninja-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.
   ================================================================== */

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

.pupil {
  fill: #1b4332;
}

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

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

/* ---------------------------------------------------------------
   Swim cycle + parallax
   4 turtles drift across the screen at all times, painted first
   inside .background (see index.html) so the sand, bubbles,
   sparkles and all real page content sit in front of them — they're
   behind everything but the plain gradient itself. Each one's
   opacity, size, vertical lane and swim speed are randomized by
   swimming-turtle.js from a single "depth" value (0 = shallow/near,
   1 = deep/far), so it reads as genuine parallax rather than just
   fading — deeper turtles are also smaller and slower.
------------------------------------------------------------------ */
.swimming-turtles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.swim-turtle {
  position: absolute;
  left: 0;
  top: 20%;
  width: 100px;
  opacity: 0.6;
  animation-name: swim-ltr;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 24s;
  cursor: pointer;
}

/* swimming-turtle.js toggles this class at random to send roughly
   half the turtles right-to-left instead of left-to-right. */
.swim-turtle.direction-rtl {
  animation-name: swim-rtl;
}

.swim-turtle-art {
  display: block;
  width: 100%;
  height: auto;
}

.direction-rtl .swim-turtle-art {
  transform: scaleX(-1);
}

@keyframes swim-ltr {
  from { transform: translateX(-25vw); }
  to   { transform: translateX(125vw); }
}

@keyframes swim-rtl {
  from { transform: translateX(125vw); }
  to   { transform: translateX(-25vw); }
}

/* A subtle glow while a swimming turtle is speed-boosted. */
.swim-turtle.boosted {
  filter: brightness(1.15) drop-shadow(0 0 6px rgba(255, 255, 255, 0.55));
}

/* Gentle up/down undulation, independent of the horizontal swim
   animation above (they're on different elements, so the transforms
   don't clash). */
.swim-body {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: swim-bob 2.4s ease-in-out infinite;
}

@keyframes swim-bob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-6px) rotate(1.5deg); }
}

.swim-flipper {
  fill: var(--skin);
  stroke: var(--skin-dark);
  stroke-width: 2.5;
  transform-box: fill-box;
  transform-origin: 80% 20%;
  animation: sway 1.8s ease-in-out infinite;
}

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

.swim-flipper-back {
  animation-delay: 0.3s;
}

.swim-flipper-front-top {
  animation-delay: 0.15s;
}

/* Tiny plankton flecks at swim-turtle-1's mouth only (see
   index.html) — sits outside the #use shadow tree, so it needs its
   own copy of the body's bob animation to stay lined up with the
   mouth through the bob cycle instead of drifting out of sync. */
.plankton circle {
  fill: #b6e35c;
  opacity: 0.85;
}

.plankton {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: swim-bob 2.4s ease-in-out infinite;
}

/* Fading trail bubble spawned by swimming-turtle.js via
   TurtlesAnimations.spawnFx — lands in the shared .fx-layer (see
   style.css). */
.trail-bubble {
  position: fixed;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.15));
  animation: trail-fade 0.8s ease-out forwards;
}

@keyframes trail-fade {
  0%   { transform: translateY(0) scale(1); opacity: 0.75; }
  100% { transform: translateY(-18px) scale(0.4); opacity: 0; }
}