/* ============================================================
   Guy · sprite-sheet mascot
   4-frame walk cycle (images/guy-walk.png, 2080×800 → 520×800/frame)
   Walks along section edges, faces cursor when idle, hops on click.
   ============================================================ */

#guy-sprite {
  position: absolute;
  top: 0; left: 0;
  width: 74px;
  height: 114px;            /* 74 / (520/800) */
  z-index: 60;              /* above paper, below nav (1000) */
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  transition: opacity .5s var(--ease, ease);
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
}
#guy-sprite.guy-loaded { opacity: 1; }
#guy-sprite:focus { outline: none; }
#guy-sprite:focus-visible .guy-body { outline: 2px solid var(--primary, #1e68ff); outline-offset: 4px; border-radius: 6px; }

/* The actual sprite frame */
.guy-body {
  width: 100%; height: 100%;
  background-image: url('../images/guy-walk.png');
  background-repeat: no-repeat;
  background-size: 400% 100%;
  background-position: 0% 50%;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 6px 10px rgba(13,13,13,.18));
}
#guy-sprite.facing-left .guy-body { transform: scaleX(-1); }

/* Soft contact shadow */
#guy-sprite::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 4px;
  width: 56%; height: 9px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(13,13,13,.22), transparent 70%);
  border-radius: 50%;
  z-index: -1;
  transition: transform .3s ease, opacity .3s ease;
}

/* ── Walk cycle (only while traveling) ── */
@keyframes guyWalk {
  0%   { background-position-x: 0%; }
  25%  { background-position-x: 33.333%; }
  50%  { background-position-x: 66.667%; }
  75%  { background-position-x: 100%; }
  100% { background-position-x: 0%; }
}
#guy-sprite.walking .guy-body { animation: guyWalk .62s steps(1, end) infinite; }
#guy-sprite.facing-left.walking .guy-body { animation: guyWalk .62s steps(1, end) infinite; }

/* ── Idle bob + occasional sway when standing still ── */
@keyframes guyIdleBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.5px); }
}
#guy-sprite.idle .guy-body { animation: guyIdleBob 2.6s ease-in-out infinite; }
#guy-sprite.idle.facing-left .guy-body { animation: guyIdleBob 2.6s ease-in-out infinite; }
/* keep flip while bobbing */
#guy-sprite.facing-left.idle .guy-body { transform: scaleX(-1); animation: guyIdleBobL 2.6s ease-in-out infinite; }
@keyframes guyIdleBobL {
  0%, 100% { transform: scaleX(-1) translateY(0); }
  50%      { transform: scaleX(-1) translateY(-1.5px); }
}

/* ── Hop on click / section change ── */
#guy-sprite.hopping .guy-body { animation: guyHop .72s var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1)); }
#guy-sprite.hopping.facing-left .guy-body { animation: guyHopL .72s var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1)); }
@keyframes guyHop {
  0%   { transform: translateY(0) scaleY(1); }
  18%  { transform: translateY(0) scaleY(.86) scaleX(1.08); }
  45%  { transform: translateY(-46px) scaleY(1.08) scaleX(.95); }
  70%  { transform: translateY(-10px) scaleY(1); }
  85%  { transform: translateY(0) scaleY(.9) scaleX(1.05); }
  100% { transform: translateY(0) scaleY(1); }
}
@keyframes guyHopL {
  0%   { transform: scaleX(-1) translateY(0); }
  18%  { transform: scaleX(-1.08) translateY(0) scaleY(.86); }
  45%  { transform: scaleX(-.95) translateY(-46px) scaleY(1.08); }
  70%  { transform: scaleX(-1) translateY(-10px); }
  85%  { transform: scaleX(-1.05) translateY(0) scaleY(.9); }
  100% { transform: scaleX(-1) translateY(0); }
}
#guy-sprite.hopping::after { transform: translateX(-50%) scale(.5); opacity: .5; }

/* Speech bubble on click */
.guy-bubble {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -6px) scale(.7);
  margin-bottom: 4px;
  background: var(--text, #0d0d0d);
  color: var(--bg, #f3eddf);
  font-family: var(--mono, monospace);
  font-size: 10px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease, ease), transform .3s var(--ease-spring, ease);
}
.guy-bubble::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--text, #0d0d0d);
}
#guy-sprite.talking .guy-bubble { opacity: 1; transform: translate(-50%, 0) scale(1); }

@media (max-width: 768px) {
  #guy-sprite { width: 52px; height: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  #guy-sprite .guy-body { animation: none !important; }
  #guy-sprite { transition: opacity .3s ease; }
}