static/css/whale.css

/* =========================================================================
   whale.css — the signature creature (v2: gradient body, water spout)
   The whale SVG markup lives in js/whale.js (WHALE_TEMPLATE) and is injected
   into [data-whale] / [data-whale-return] placeholders. Because it is inline
   in the DOM, every sub-part is targetable here.
   whale.js owns the horizontal scroll-map + vertical bob (transform).
   This file handles the look: gradient periwinkle body, glossy back ridge,
   throat pleats, pink glow halo, animated tail flick, fin wiggle, and the
   cycling water spout above the blowhole.
   All animation hooks are CLASS based (no element ids) so the hero whale and
   the return whale can coexist on one page without id clashes.
   ========================================================================= */

.whale {
  position: absolute;
  top: 26%;                       /* raised slightly into the sky            */
  left: 0;
  width: 440px;                   /* 10% bigger                              */
  /* whale.js sets transform: translate3d(x, bobY, 0) every frame */
  will-change: transform;
  pointer-events: none;
  filter: drop-shadow(0 18px 40px rgba(157, 170, 242, 0.45));
  transition: opacity 0.8s var(--ease-soft);
}
.whale svg,
.whale-return svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;              /* let the spout droplets peek above       */
}

/* The soft pink glow halo behind the whale */
.whale::before {
  content: "";
  position: absolute;
  inset: -18% -22%;
  background: radial-gradient(ellipse at 50% 55%,
              rgba(255, 143, 171, 0.32) 0%,
              rgba(255, 214, 232, 0.18) 45%,
              transparent 72%);
  z-index: -1;
  border-radius: 50%;
}

/* ---- face details (fill set here; bodies use gradient via attribute) -- */
.whale-eye-outer { fill: var(--ink); }
.whale-eye-inner { fill: #fff; }

/* kawaii blush */
.whale-blush { fill: var(--rose); opacity: 0.55; }

/* tiny smile */
.whale-smile {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: 0.7;
}

/* blowhole slit on top of the melon */
.whale-blowhole {
  fill: none;
  stroke: #6E7CC8;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.6;
}

/* glossy back-ridge highlight */
.whale-back {
  fill: none;
  stroke: #DDE3FF;
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 0.5;
}

/* throat pleats under the jaw */
.whale-pleat {
  fill: none;
  stroke: #6E7CC8;
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.22;
}

/* ---- tail flick — gentle rotate around the tail base (class hook) ---- */
.whale-tail {
  transform-box: fill-box;            /* origin relative to tail's own bbox   */
  transform-origin: 0% 50%;            /* pivot at the attachment point (left) */
  animation: tail-flick 3.2s var(--ease-gentle) infinite;
}
@keyframes tail-flick {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(5deg); }
}

/* ---- pectoral fin wiggle ---- */
.whale-fin {
  transform-box: fill-box;
  transform-origin: 12% 18%;          /* pivot near the shoulder              */
  animation: fin-wiggle 3.6s var(--ease-gentle) infinite;
}
@keyframes fin-wiggle {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(3deg); }
}

/* ---- water spout above the blowhole ---- */
/* droplets rise, shrink, and fade on a staggered loop → a breathing spout */
.whale-spout-drop {
  fill: #fff;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: spout-rise 2.8s var(--ease-gentle) infinite;
}
.whale-spout-drop.d1 { animation-delay: 0s; }
.whale-spout-drop.d2 { animation-delay: 0.6s; }
.whale-spout-drop.d3 { animation-delay: 1.2s; }
.whale-spout-drop.d4 { animation-delay: 1.8s; }
@keyframes spout-rise {
  0%   { transform: translateY(6px)  scale(0.6); opacity: 0; }
  25%  { opacity: 0.9; }
  70%  { opacity: 0.6; }
  100% { transform: translateY(-20px) scale(0.35); opacity: 0; }
}

/* the mist puff breathes gently */
.whale-spout-mist {
  animation: spout-mist 2.8s var(--ease-gentle) infinite;
}
@keyframes spout-mist {
  0%, 100% { opacity: 0.25; transform: scale(0.9); }
  40%      { opacity: 0.55; transform: scale(1.08); }
}

/* On narrow screens, shrink the whale so it stays in proportion */
@media (max-width: 640px) {
  .whale { width: 308px; }
}

/* Reduced motion: freeze the tail, fin, and spout; JS freezes the glide */
@media (prefers-reduced-motion: reduce) {
  .whale-tail,
  .whale-fin,
  .whale-spout-drop,
  .whale-spout-mist { animation: none; }
  .whale-spout-drop { opacity: 0; }
}