/* ============================================================
   Bucky Badger pixel companion — site integration.
   Lives in a fixed-bottom strip that spans the viewport, walks
   horizontally between sections as the user scrolls, and reacts
   with tricks (wave, flex, dance, cheer, pushup) on triggers.
   ============================================================ */

.companion-host {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 220px;
  pointer-events: none;        /* let clicks pass through everywhere... */
  z-index: 90;
  overflow: visible;
}

.companion-stage {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.companion {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  image-rendering: pixelated;
  pointer-events: auto;        /* ...except on Bucky himself */
  cursor: pointer;
  will-change: transform, left;
  transition: left .9s cubic-bezier(.2,.9,.3,1.4);
  animation: companion-bob 2.6s ease-in-out infinite;
}
.companion svg { display: block; }

@keyframes companion-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-3px); }
}

.companion-shadow {
  position: absolute;
  bottom: 6px;
  left: 50%;
  width: 70px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,0.55), transparent);
  transform: translateX(-50%);
  pointer-events: none;
  transition: left .9s cubic-bezier(.2,.9,.3,1.4);
}

/* Speech bubble floats above Bucky. */
.companion-bubble {
  position: absolute;
  left: 50%;
  bottom: 200px;
  font-family: 'Courier New', monospace;
  font-size: .75rem;
  background: rgba(255,255,255,0.94);
  color: #0a1929;
  padding: .3rem .6rem;
  border-radius: 8px;
  transform: translate(-50%, 4px);
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s, transform .25s, left .9s cubic-bezier(.2,.9,.3,1.4);
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.companion-bubble::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: rgba(255,255,255,0.94);
}
.companion-bubble.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Two fist sub-sprites — idle pose sits at mid-sweater height
   at the end of the body sprite's protruding sleeves. */
.fist {
  position: absolute;
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
  pointer-events: none;
  transition: transform .32s cubic-bezier(.3, 1.7, .4, 1);
}
/* Sprite is 20 cols × 30 rows × 6 px = 120w × 180h.
   Hip anchor: y ≈ row 22 = 132 px from top of sprite. */
.fist.left  { left: -6px;  top: 132px; }
.fist.right { left: 108px; top: 132px; }
.companion .fist.left  { transform: translate(-2px, -18px); }
.companion .fist.right { transform: translate(2px, -18px); }
.companion.fists-up .fist.left  { transform: translate(0, -60px); }
.companion.fists-up .fist.right { transform: translate(0, -60px); }

/* ===== Trick animations ===== */

/* PUSHUPS — plank rotation with rep bobs. */
@keyframes companion-pushup {
  0%   { transform: translateX(-50%) translateY(0)    rotate(0); }
  7%   { transform: translateX(-50%) translateY(34px) rotate(-85deg); }
  13%  { transform: translateX(-50%) translateY(42px) rotate(-85deg); }
  19%  { transform: translateX(-50%) translateY(34px) rotate(-85deg); }
  25%  { transform: translateX(-50%) translateY(42px) rotate(-85deg); }
  31%  { transform: translateX(-50%) translateY(34px) rotate(-85deg); }
  37%  { transform: translateX(-50%) translateY(42px) rotate(-85deg); }
  43%  { transform: translateX(-50%) translateY(34px) rotate(-85deg); }
  49%  { transform: translateX(-50%) translateY(42px) rotate(-85deg); }
  55%  { transform: translateX(-50%) translateY(34px) rotate(-85deg); }
  61%  { transform: translateX(-50%) translateY(42px) rotate(-85deg); }
  67%  { transform: translateX(-50%) translateY(34px) rotate(-85deg); }
  85%  { transform: translateX(-50%) translateY(0)    rotate(0); }
  100% { transform: translateX(-50%) translateY(0)    rotate(0); }
}
.companion.pushup {
  animation: companion-pushup 3.4s cubic-bezier(.4,.8,.5,1);
  transform-origin: 50% 50%;
}
.companion.pushup .fist { opacity: 0; }

/* WAVE — gentle body tilt, right fist waggles. */
@keyframes companion-waveTilt {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(0); }
  25%      { transform: translateX(-50%) translateY(-2px) rotate(-5deg); }
  75%      { transform: translateX(-50%) translateY(-2px) rotate(-5deg); }
}
@keyframes companion-waveHand {
  0%, 100% { transform: translate(16px, -70px) rotate(0); }
  25%      { transform: translate(22px, -78px) rotate(18deg); }
  75%      { transform: translate(22px, -78px) rotate(18deg); }
}
.companion.wave {
  animation: companion-waveTilt .55s ease-in-out 4;
  transform-origin: 50% 100%;
}
.companion.wave .fist.right { animation: companion-waveHand .55s ease-in-out 4; }
.companion.wave .fist.left  { transform: translate(0, 0); }

/* FLEX — both fists pulled to temple level, body scale-pulses. */
@keyframes companion-flexPulse {
  0%, 100% { transform: translateX(-50%) translateY(-2px) scale(1, 1); }
  50%      { transform: translateX(-50%) translateY(-4px) scale(1.06, .96); }
}
.companion.flex { animation: companion-flexPulse .38s ease-in-out 5; }
.companion.flex .fist.left  { transform: translate(-10px, -56px) rotate(-30deg); }
.companion.flex .fist.right { transform: translate(10px, -56px) rotate(30deg); }

/* DANCE — Jump Around side-to-side hip tilt. */
@keyframes companion-danceTilt {
  0%, 100% { transform: translateX(-50%) rotate(0)    translateY(0); }
  25%      { transform: translateX(-50%) rotate(-9deg) translateY(-3px); }
  50%      { transform: translateX(-50%) rotate(0)    translateY(0); }
  75%      { transform: translateX(-50%) rotate(9deg)  translateY(-3px); }
}
.companion.dance {
  animation: companion-danceTilt .85s ease-in-out 3;
  transform-origin: 50% 100%;
}

/* CHEER — three rapid hops. */
@keyframes companion-cheerHop {
  0%   { transform: translateX(-50%) translateY(0)     scale(1, 1); }
  30%  { transform: translateX(-50%) translateY(-20px) scale(.95, 1.05); }
  65%  { transform: translateX(-50%) translateY(0)     scale(1.05, .95); }
  100% { transform: translateX(-50%) translateY(0)     scale(1, 1); }
}
.companion.cheer { animation: companion-cheerHop .42s ease-out 3; }

/* CODING — persistent state. Laptop fades in, fists snap to the
   keyboard and alternate-tap. Triggered when devtools opens. */
.companion .laptop {
  position: absolute;
  left: 50%;
  top: 100px;
  width: 64px;
  height: 48px;
  transform: translateX(-50%) scale(.7);
  opacity: 0;
  transition: opacity .25s, transform .3s cubic-bezier(.3, 1.7, .4, 1);
  pointer-events: none;
  image-rendering: pixelated;
  z-index: 1;
}
.companion.coding .laptop {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
@keyframes companion-codingIdle {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-1px); }
}
.companion.coding { animation: companion-codingIdle 3s ease-in-out infinite; }
.companion.coding .fist { transition: none; z-index: 2; }
@keyframes companion-typeLeftKey {
  0%, 100% { transform: translate(42px, 2px); }
  50%      { transform: translate(42px, -4px); }
}
@keyframes companion-typeRightKey {
  0%, 100% { transform: translate(-42px, -4px); }
  50%      { transform: translate(-42px, 2px); }
}
.companion.coding .fist.left  { animation: companion-typeLeftKey  .28s ease-in-out infinite; }
.companion.coding .fist.right { animation: companion-typeRightKey .28s ease-in-out infinite; }

/* Respect reduced-motion: kill the bob loop and trick animations. */
@media (prefers-reduced-motion: reduce) {
  .companion,
  .companion.wave,
  .companion.flex,
  .companion.dance,
  .companion.cheer,
  .companion.pushup {
    animation: none;
  }
  .companion { transition: none; }
  .companion-shadow,
  .companion-bubble { transition: opacity .15s; }
}

/* Small screens: scale Bucky down so he doesn't dominate. */
@media (max-width: 640px) {
  .companion-host { height: 170px; }
  .companion { transform: translateX(-50%) scale(.75); transform-origin: 50% 100%; }
  .companion-bubble { bottom: 160px; font-size: .7rem; }
}

/* ===== Treats ===== */

@keyframes bite-hop {
  0%   { transform: translateX(-50%) translateY(0); }
  40%  { transform: translateX(-50%) translateY(-6px); }
  100% { transform: translateX(-50%) translateY(0); }
}

.companion.bite-hop {
  animation: bite-hop 250ms ease-out;
}

@keyframes sip-tilt {
  0%   { transform: translateX(-50%) rotate(0); }
  50%  { transform: translateX(-50%) rotate(-10deg); }
  100% { transform: translateX(-50%) rotate(0); }
}

.companion.tilt {
  animation: sip-tilt 250ms ease-in-out;
  transform-origin: 50% 90%;
}

.treat-tray {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 91; /* above .companion-host (z-index: 90); bubble lives inside the host's stacking context so it still paints above */
  display: flex;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(13, 13, 13, 0.55);
  backdrop-filter: blur(4px);

  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 250ms ease-out, transform 250ms ease-out;
}

.treat-tray--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.treat-tray--busy {
  opacity: 0.45;
  pointer-events: none;
}

.treat-btn {
  width: 32px;
  height: 40px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.treat-btn:focus-visible {
  outline: 2px solid #FFC52F;
  outline-offset: 2px;
}

.treat-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 360px) {
  .treat-tray { display: none; }
}

.treat-sprite {
  position: absolute;
  bottom: 114px; /* all treats land at Bucky's mouth height so eat/sip
                    gestures read as actually consuming the thing, not
                    pecking the floor. */
  pointer-events: none;
  transform: translate(-50%, -120px);
  transition: transform 380ms cubic-bezier(0.4, 1, 0.6, 1);
  z-index: 8; /* below the tray, with Bucky's strip */
}

.treat-sprite--landed {
  transform: translate(-50%, 0);
}