/**
 * GroKarna animated mascot — independent limb motion.
 * Each <g> in the SVG has its own keyframe so the buddy genuinely walks:
 * legs alternate, arms swing opposite, the body bobs with the steps, the
 * eyes blink, and the leaf sways. Respects prefers-reduced-motion.
 */

.gk-mascot {
  display: inline-block;
  line-height: 0;
  overflow: visible;
}
.gk-mascot-svg { overflow: visible; display: block; }

/* Whole body bob (sync'd to a 2-step walk cycle) */
.gk-m-body {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: gk-m-bob 0.72s ease-in-out infinite;
}
@keyframes gk-m-bob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  25%      { transform: translateY(-5px) rotate(0deg); }
  50%      { transform: translateY(0) rotate(1.5deg); }
  75%      { transform: translateY(-5px) rotate(0deg); }
}

/* Legs walk — each pivots at the hip, opposite phase. Pivot is the TOP of
   the leg rect (y≈150 in the 0..236 viewBox = ~63.5%) so the foot swings,
   not the hip. Kept to ±11deg so the stance stays tidy at small sizes. */
.gk-m-leg { transform-box: fill-box; transform-origin: 50% 0%; }
.gk-m-leg-l { animation: gk-m-step 0.72s ease-in-out infinite; }
.gk-m-leg-r { animation: gk-m-step 0.72s ease-in-out infinite; animation-delay: -0.36s; }
@keyframes gk-m-step {
  0%, 100% { transform: rotate(11deg); }
  50%      { transform: rotate(-11deg); }
}

/* Arms swing — opposite to the leg on the same side (natural gait) */
.gk-m-arm { transform-box: fill-box; transform-origin: 50% 12%; }
.gk-m-arm-l { animation: gk-m-swing-l 0.72s ease-in-out infinite; animation-delay: -0.36s; }
.gk-m-arm-r { animation: gk-m-swing-r 0.72s ease-in-out infinite; }
@keyframes gk-m-swing-l {
  0%, 100% { transform: rotate(-18deg); }
  50%      { transform: rotate(14deg); }
}
@keyframes gk-m-swing-r {
  0%, 100% { transform: rotate(18deg); }
  50%      { transform: rotate(-14deg); }
}

/* Blink */
.gk-m-eyes { animation: gk-m-blink 4s infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes gk-m-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(0.1); }
}

/* Pupils dart side to side for a touch of life */
.gk-m-pupil { animation: gk-m-look 5s ease-in-out infinite; }
@keyframes gk-m-look {
  0%, 40%, 100% { transform: translateX(0); }
  55%, 75%      { transform: translateX(-3px); }
}

/* Leaf sway */
.gk-m-leaf { transform-box: fill-box; transform-origin: 90% 90%; animation: gk-m-leaf 2.2s ease-in-out infinite; }
@keyframes gk-m-leaf {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(8deg); }
}

/* Shadow breathes with the bob */
.gk-m-shadow { animation: gk-m-shadow 0.72s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes gk-m-shadow {
  0%, 50%, 100% { transform: scaleX(1); opacity: .22; }
  25%, 75%      { transform: scaleX(0.82); opacity: .14; }
}

/* Wave on hover (right arm gives a big friendly wave, legs pause) */
.gk-mascot:hover .gk-m-arm-r { animation: gk-m-wave 0.5s ease-in-out infinite; transform-origin: 50% 12%; }
@keyframes gk-m-wave {
  0%, 100% { transform: rotate(-30deg); }
  50%      { transform: rotate(-70deg); }
}

@media (prefers-reduced-motion: reduce) {
  .gk-m-body, .gk-m-leg, .gk-m-arm, .gk-m-eyes, .gk-m-pupil, .gk-m-leaf, .gk-m-shadow {
    animation: none !important;
  }
}

/* ---------------------------------------------------------------------------
 * Footer placement. style.css gives .logo-character an absolute "adventure"
 * fly-around animation built for the old flat PNG. With the SVG (whose own
 * limbs animate in place) we park the buddy in a fixed friendly spot above
 * the wordmark and let the SVG do the motion. Loads after style.css so wins.
 * ------------------------------------------------------------------------- */
.footer-logo {
  position: relative;
  padding-top: 56px; /* headroom so the buddy standing above isn't clipped */
}
.footer-logo .logo-character {
  animation: none !important;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-118px); /* sit just left of the wordmark */
  width: 56px;
  height: 66px;
  z-index: 4;
}
.footer-logo .logo-character .gk-mascot { width: 56px !important; height: 66px !important; }
@media (max-width: 600px) {
  .footer-logo .logo-character { transform: translateX(-70px); }
}

/* The footer mascot peeks/waves a little harder on logo hover */
.footer-logo:hover .gk-m-body { animation-duration: 0.5s; }