/* ═══════════════════════════════════════════════
   KP BUDDY — koi mascot
   Small sibling of the homepage koi. Rendered from
   koi-agent.png (a single image) rather than the
   earlier box-shadow pixel-grid build — the swim
   path, direction-flip, poke-squish, and speech
   bubble all still work exactly as before, since
   none of them cared how the fish itself was drawn.
═══════════════════════════════════════════════ */
:root {
  --kp-glow-1: rgba(255, 80, 60, 0.55);
  --kp-glow-2: rgba(255, 200, 180, 0.50);
}

/* Fixed anchor — bottom-left safe zone, clear of nav/footer/audio. */
.kp-buddy-container {
  position: fixed;
  left: 40px;
  bottom: 20px;
  z-index: 60; /* above content, below .site-header (z-index: 100) */
}

/* ── Vertical float (reference's @keyframes float) + horizontal drift,
   on two different elements so they don't fight over `transform`. ── */
.kp-buddy-float {
  animation: kp-float 3s ease-in-out infinite;
}

@keyframes kp-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.kp-buddy-drift {
  position: relative;
  width: 56px;
  height: 56px;
  animation: kp-drift 5s ease-in-out infinite;
}

@keyframes kp-drift {
  0%   { transform: translateX(0px); }
  50%  { transform: translateX(28px); }
  100% { transform: translateX(0px); }
}

/* Fish faces left by default; flip only the character (not the
   bubble) exactly at the drift's direction change. This is also the
   clickable element (div acting as a button, since the reference
   structure has no button of its own). */
.kp-buddy-fish {
  all: unset;
  display: block;
  position: relative;
  width: 56px;
  height: 56px;
  cursor: pointer;
  touch-action: manipulation;
  animation: kp-flip 5s ease-in-out infinite;
  filter:
    drop-shadow(0 6px 10px rgba(0, 0, 0, 0.25))
    drop-shadow(0 0 10px var(--kp-glow-1))
    drop-shadow(0 0 4px  var(--kp-glow-2));
}

.kp-buddy-fish:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 4px;
  border-radius: 8px;
}

/* koi-agent.png is drawn facing RIGHT by default (scaleX(1)) — eye,
   snout and mouth sit on the right side of the source image, tail on
   the left. kp-drift moves rightward during 0-50%, so THAT half uses
   the natural, unflipped orientation; the 50-100% half (moving left)
   needs the mirrored state to face the direction of travel. */
@keyframes kp-flip {
  0%   { transform: scaleX(1); }
  49%  { transform: scaleX(1); }
  50%  { transform: scaleX(-1); }
  99%  { transform: scaleX(-1); }
  100% { transform: scaleX(1); }
}

/* .kp-fish-shape exists only so the poke-squish has a transform layer
   of its own — .kp-buddy-fish already owns the flip's scaleX, and
   CSS can't combine two `transform` animations on one element. */
.kp-fish-shape {
  position: absolute;
  inset: 0;
}

.kp-fish-shape.is-poked {
  animation: kp-poke 150ms ease-in-out;
}

@keyframes kp-poke {
  0%   { transform: scale(1, 1); }
  35%  { transform: scale(1.16, 0.82); }
  65%  { transform: scale(0.92, 1.1); }
  100% { transform: scale(1, 1); }
}

.kp-fish-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* koi-agent.png is a 64x64 square asset — contain avoids any stretch/distortion at this box size */
  pointer-events: none; /* .kp-buddy-fish itself is the click target */
}

/* ── Speech bubble — same glass-morphism as .site-header (nav):
   identical background tint, blur, saturate, and border values,
   copied exactly rather than approximated. Nav has no border-radius
   of its own (it's a full-bleed bar), so the bubble keeps its own
   14px rounding — there's nothing to match there.
   Lives on .kp-buddy-drift (not .kp-buddy-fish) so it tracks the
   fish's drift position but is never mirrored by the flip. ── */
.kp-buddy-bubble {
  position: absolute;
  left: 0;
  bottom: calc(100% + 14px);
  min-width: 200px;
  max-width: 260px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.12);       /* = .site-header's background */
  backdrop-filter: blur(12px) saturate(1.4);    /* = .site-header's backdrop-filter */
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.20);  /* = .site-header's border */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);   /* = .site-header's box-shadow */
  border-radius: 14px;
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  /* Single font rule for ALL bubble text — set once here so every
     message (intro, fact-bank, poke-count, annoyed) inherits it and
     nothing can drift out of sync per message type again. */
  font-family: var(--f-mono); /* = 'Space Mono', monospace, same as the footer/nav mono text */
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.kp-buddy-bubble::after {
  content: "";
  position: absolute;
  left: 22px;
  top: 100%;
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.20); /* ties to the bubble's own border tone */
  border-bottom: 0;
}

.kp-buddy-bubble.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.kp-buddy-message {
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink); /* was white — the new light glass needs dark text to stay legible */
  margin: 0;
}

.kp-buddy-hint {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted); /* was white at 45% — same "secondary text on light bg" token used elsewhere */
  margin: 8px 0 0;
}

@media (max-width: 480px) {
  .kp-buddy-container { left: 20px; bottom: 14px; }
  .kp-buddy-bubble { max-width: 200px; }
}