/* =========================================================
   Angle Buddy — the little Angle "A" that runs about the site.
   Loaded by assets/js/mascot.js. Pure CSS animation; the JS only
   decides *where* it goes. Disabled entirely for reduced-motion.
   ========================================================= */

.ab-wrap {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
  contain: layout paint;
}
.ab-wrap--run {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 0;
  overflow: visible;
  contain: none;
}
.ab-wrap--run .ab { top: auto; bottom: 4px; }

.ab {
  --ab-size: 64px;
  --ab-ink: var(--ink, #15151a);
  position: absolute;
  left: 0; top: 0;
  width: var(--ab-size);
  height: calc(var(--ab-size) * 1.18);
  transform-origin: 50% 100%;
  will-change: transform;
}
.ab svg { width: 100%; height: 100%; overflow: visible; display: block; }
.ab .ab-body { fill: var(--ab-ink); }
.ab .ab-limb { stroke: var(--ab-ink); stroke-width: 6; stroke-linecap: round; fill: none; }
.ab .ab-eye  { fill: #fff; }
.ab .ab-pupil{ fill: var(--ab-ink); }
.ab .ab-foot { fill: var(--ab-ink); }

/* Facing: default faces right. */
.ab.ab--left { transform: scaleX(-1); }

/* ---- Running -------------------------------------------- */
.ab-wrap--run .ab { pointer-events: auto; cursor: pointer; }
.ab--running .ab-core { animation: ab-bob .32s ease-in-out infinite; transform-origin: 50% 100%; }
.ab--running .ab-leg-l { animation: ab-leg .32s ease-in-out infinite; }
.ab--running .ab-leg-r { animation: ab-leg .32s ease-in-out infinite reverse; }
.ab--running .ab-arm-l { animation: ab-arm .32s ease-in-out infinite reverse; }
.ab--running .ab-arm-r { animation: ab-arm .32s ease-in-out infinite; }
/* Limb pivots are set inline on each <g> in the SVG (transform-origin). */

@keyframes ab-bob {
  0%,100% { transform: translateY(0) rotate(6deg); }
  50%     { transform: translateY(-5px) rotate(6deg); }
}
@keyframes ab-leg {
  0%   { transform: rotate(-38deg); }
  50%  { transform: rotate(38deg); }
  100% { transform: rotate(-38deg); }
}
@keyframes ab-arm {
  0%   { transform: rotate(32deg); }
  50%  { transform: rotate(-32deg); }
  100% { transform: rotate(32deg); }
}

/* Jump when tapped */
.ab--jump .ab-core { animation: ab-jump .55s cubic-bezier(.3,1.4,.5,1) 1; }
@keyframes ab-jump {
  0%   { transform: translateY(0) scale(1,1); }
  20%  { transform: translateY(2px) scale(1.15,.85); }
  55%  { transform: translateY(-36px) scale(.92,1.1) rotate(-8deg); }
  100% { transform: translateY(0) scale(1,1); }
}

/* ---- Peeking -------------------------------------------- */
.ab--peek .ab-pupil { animation: ab-look 2.4s ease-in-out infinite; }
@keyframes ab-look {
  0%,20%  { transform: translate(0,0); }
  35%,55% { transform: translate(-3px,-1px); }
  70%,90% { transform: translate(3px,1px); }
  100%    { transform: translate(0,0); }
}
.ab--peek .ab-arm-r { transform: rotate(-70deg); }
.ab--peek.ab--wave .ab-arm-r { animation: ab-wave .5s ease-in-out 4; }
@keyframes ab-wave {
  0%,100% { transform: rotate(-70deg); }
  50%     { transform: rotate(-110deg); }
}

/* Slide transitions handled by JS via inline transform + this easing */
.ab--slide { transition: transform .55s cubic-bezier(.2,.8,.2,1); }

/* Small screens: keep it out of the way */
@media (max-width: 575.98px) { .ab { --ab-size: 46px; } }

@media (prefers-reduced-motion: reduce) {
  .ab-wrap { display: none !important; }
}