/* ==========================================================================
   DOD Bot — the Curious Sidekick.
   Floating bottom-right robot: cursor-tracking eyes, scroll lean,
   per-section reactions with a speech bubble and a held item.
   ========================================================================== */

#dodbot {
  position: fixed; left: 0; top: 0; z-index: 900;
  width: 96px; pointer-events: none;
  filter: drop-shadow(0 18px 22px rgba(42, 18, 88, .28));
  will-change: transform;
}
#dodbot * { box-sizing: border-box; }

/* Whole bot floats gently */
.dodbot__rig {
  position: relative; width: 100%;
  animation: dodbotFloat 4.2s ease-in-out infinite;
  will-change: transform;
}
@keyframes dodbotFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* Body tilts with scroll velocity + per-perch pose (JS sets --lean / --rot) */
.dodbot__body {
  position: relative;
  transform: rotate(calc((var(--lean, 0) + var(--rot, 0)) * 1deg));
  transition: transform .25s cubic-bezier(.22,.61,.36,1);
  pointer-events: auto; cursor: pointer;
}
.dodbot__body svg { display: block; width: 100%; height: auto; }

/* Eyes — JS moves pupils via --ex / --ey */
.dodbot__pupils { transform: translate(calc(var(--ex, 0) * 1px), calc(var(--ey, 0) * 1px)); transition: transform .12s linear; }

/* Blink — scale the eye whites shut */
.dodbot--blink .dodbot__eyes { animation: dodbotBlink .18s ease-in-out; }
@keyframes dodbotBlink {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(.08); }
}
.dodbot__eyes { transform-origin: 50% 52%; }

/* Antenna glow pulse */
.dodbot__antennaTip { animation: dodbotPulse 2.6s ease-in-out infinite; transform-origin: center; }
@keyframes dodbotPulse {
  0%, 100% { opacity: .75; }
  50%      { opacity: 1; }
}

/* Waving arm (hero greeting + click) */
.dodbot__armR { transform-origin: 82% 30%; }
.dodbot--wave .dodbot__armR { animation: dodbotWave .9s ease-in-out 2; }
@keyframes dodbotWave {
  0%, 100% { transform: rotate(0deg); }
  30%      { transform: rotate(-42deg); }
  60%      { transform: rotate(-16deg); }
  80%      { transform: rotate(-38deg); }
}

/* Click spin */
.dodbot--spin .dodbot__rig { animation: dodbotSpin .85s cubic-bezier(.34,1.4,.44,1) 1; }
@keyframes dodbotSpin {
  0%   { transform: rotate(0) scale(1); }
  55%  { transform: rotate(360deg) scale(1.12); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Held item — emoji the bot holds up per section */
.dodbot__item {
  position: absolute; left: -26px; bottom: 26px;
  font-size: 26px; line-height: 1;
  opacity: 0; transform: translateY(10px) scale(.6) rotate(-14deg);
  transition: opacity .4s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.34,1.5,.5,1);
  pointer-events: none;
}
#dodbot.has-item .dodbot__item { opacity: 1; transform: translateY(0) scale(1) rotate(-8deg); }

/* Speech bubble */
.dodbot__bubble {
  position: absolute; right: 8px; bottom: calc(100% + 14px);
  min-width: 150px; max-width: 220px;
  background: #fff; color: var(--ink, #151819);
  font-family: "Host Grotesk", "Inter", sans-serif; font-size: 13.5px; font-weight: 500;
  line-height: 1.35; padding: 10px 14px; border-radius: 14px 14px 4px 14px;
  border: 1px solid rgba(126, 63, 214, .18);
  box-shadow: 0 14px 34px -18px rgba(42, 18, 88, .45);
  opacity: 0; transform: translateY(8px) scale(.92); transform-origin: bottom right;
  transition: opacity .35s cubic-bezier(.22,.61,.36,1), transform .45s cubic-bezier(.34,1.4,.5,1);
  pointer-events: none;
}
.dodbot__bubble::after {
  content: ""; position: absolute; right: 16px; top: 100%;
  border: 7px solid transparent; border-top-color: #fff;
}
#dodbot.talking .dodbot__bubble { opacity: 1; transform: translateY(0) scale(1); }
.dodbot__bubble b { color: var(--purple, #7e3fd6); }

/* When the bot is on the left half of the screen, the bubble opens rightward */
#dodbot.dodbot--flip .dodbot__bubble {
  right: auto; left: 8px;
  border-radius: 14px 14px 14px 4px;
  transform-origin: bottom left;
}
#dodbot.dodbot--flip .dodbot__bubble::after { right: auto; left: 16px; }
/* held item swaps to the right hand when flipped */
#dodbot.dodbot--flip .dodbot__item { left: auto; right: -26px; transform: translateY(10px) scale(.6) rotate(14deg); }
#dodbot.dodbot--flip.has-item .dodbot__item { transform: translateY(0) scale(1) rotate(8deg); }

/* Mobile: smaller and tighter so it never covers content */
@media (max-width: 760px) {
  #dodbot { width: 68px; right: 14px; bottom: 16px; }
  .dodbot__bubble { font-size: 12px; min-width: 120px; max-width: 170px; }
  .dodbot__item { font-size: 20px; left: -18px; }
}

@media (prefers-reduced-motion: reduce) {
  .dodbot__rig, .dodbot__antennaTip { animation: none !important; }
  .dodbot__body { transform: none !important; }
}