/**
 * GroKarna footer mascot — "climb across the wordmark".
 *
 * Loads AFTER assets/css/gk-mascot.css (enqueued with that as a dependency),
 * so these rules win the cascade. gk-mascot.css parks the buddy left of the
 * logo with `animation: none !important`; here we give it a continuous, gentle
 * climbing/swinging journey ACROSS the width of the "GroKarna" wordmark, with a
 * vertical bob, a slight body swing, and the arms reaching up like it's
 * grabbing its way through the letters.
 *
 * The horizontal travel is expressed relative to --gk-wordmark-w, a custom
 * property that gk-footer-mascot.js sets to the rendered logo width. A sensible
 * default keeps things working before/without JS.
 *
 * NOTE: exact per-letter grabbing isn't possible without the wordmark's letter
 * geometry (it's a flat PNG). This is a climbing path sized to the wordmark
 * width — an approximation of "monkey through the letters".
 */

.site-footer .footer-logo {
  --gk-wordmark-w: 200px; /* JS overrides with the real rendered logo width */
}

/* The travelling mascot. Anchored at the horizontal centre of .footer-logo;
   translateX moves it left/right relative to that centre. */
.site-footer .footer-logo .logo-character {
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  width: 56px !important;
  height: 66px !important;
  z-index: 3;
  opacity: 1 !important;
  transform-origin: 50% 60%;
  animation: gk-climb 16s ease-in-out infinite !important;
  will-change: transform;
}

.site-footer .footer-logo .logo-character .gk-mascot {
  width: 56px !important;
  height: 66px !important;
}

/* Horizontal journey across the wordmark + vertical bob + swing.
   z-index alternates so the buddy appears to pass BEHIND the letters on the
   downward dips (wordmark img is z-index:2) and IN FRONT on the raised beats —
   selling the "through the letters" feel without ever covering the text. */
@keyframes gk-climb {
  0%   { transform: translateX(calc(var(--gk-wordmark-w) * -0.50)) translateY(-6px)  rotate(-5deg); z-index: 3; }
  10%  { transform: translateX(calc(var(--gk-wordmark-w) * -0.34)) translateY(9px)   rotate(6deg);  z-index: 1; }
  20%  { transform: translateX(calc(var(--gk-wordmark-w) * -0.20)) translateY(-10px) rotate(-6deg); z-index: 3; }
  30%  { transform: translateX(calc(var(--gk-wordmark-w) * -0.05)) translateY(10px)  rotate(5deg);  z-index: 1; }
  40%  { transform: translateX(calc(var(--gk-wordmark-w) *  0.12)) translateY(-8px)  rotate(-5deg); z-index: 3; }
  50%  { transform: translateX(calc(var(--gk-wordmark-w) *  0.40)) translateY(7px)   rotate(6deg);  z-index: 1; }
  60%  { transform: translateX(calc(var(--gk-wordmark-w) *  0.12)) translateY(-10px) rotate(-6deg); z-index: 3; }
  70%  { transform: translateX(calc(var(--gk-wordmark-w) * -0.05)) translateY(9px)   rotate(5deg);  z-index: 1; }
  80%  { transform: translateX(calc(var(--gk-wordmark-w) * -0.20)) translateY(-8px)  rotate(-5deg); z-index: 3; }
  90%  { transform: translateX(calc(var(--gk-wordmark-w) * -0.34)) translateY(10px)  rotate(6deg);  z-index: 1; }
  100% { transform: translateX(calc(var(--gk-wordmark-w) * -0.50)) translateY(-6px)  rotate(-5deg); z-index: 3; }
}

/* Arms reach up alternately — the "grabbing" motion. Overrides the in-place
   walk swing from gk-mascot.css via higher specificity. */
.site-footer .footer-logo .logo-character .gk-m-arm {
  transform-box: fill-box;
  transform-origin: 50% 12%;
}
.site-footer .footer-logo .logo-character .gk-m-arm-l {
  animation: gk-grab-l 1.1s ease-in-out infinite;
}
.site-footer .footer-logo .logo-character .gk-m-arm-r {
  animation: gk-grab-r 1.1s ease-in-out infinite;
}
@keyframes gk-grab-l {
  0%, 100% { transform: rotate(-44deg); }
  50%      { transform: rotate(8deg); }
}
@keyframes gk-grab-r {
  0%, 100% { transform: rotate(8deg); }
  50%      { transform: rotate(-44deg); }
}

/* Legs give a livelier climbing kick (bigger range than the walk). */
.site-footer .footer-logo .logo-character .gk-m-leg-l {
  animation: gk-climb-leg 1.1s ease-in-out infinite;
}
.site-footer .footer-logo .logo-character .gk-m-leg-r {
  animation: gk-climb-leg 1.1s ease-in-out infinite;
  animation-delay: -0.55s;
}
@keyframes gk-climb-leg {
  0%, 100% { transform: rotate(16deg); }
  50%      { transform: rotate(-16deg); }
}

/* Hover: keep the journey RUNNING (style.css otherwise pauses it) and speed it
   up so the buddy scrambles across faster, grabbing harder. */
.site-footer .footer-logo:hover .logo-character {
  animation-play-state: running !important;
  animation-duration: 9s !important;
}
.site-footer .footer-logo:hover .logo-character .gk-m-arm-l,
.site-footer .footer-logo:hover .logo-character .gk-m-arm-r,
.site-footer .footer-logo:hover .logo-character .gk-m-leg-l,
.site-footer .footer-logo:hover .logo-character .gk-m-leg-r {
  animation-duration: 0.7s;
}

/* Small screens: drop the travelling journey (it's cramped) and simply park
   the buddy just left of the wordmark; its own in-place walk still plays. */
@media (max-width: 767px) {
  .site-footer .footer-logo .logo-character {
    animation: none !important;
    transform: translateX(calc(var(--gk-wordmark-w) * -0.5 - 6px)) !important;
    z-index: 3;
  }
  .site-footer .footer-logo .logo-character .gk-m-arm-l,
  .site-footer .footer-logo .logo-character .gk-m-arm-r,
  .site-footer .footer-logo .logo-character .gk-m-leg-l,
  .site-footer .footer-logo .logo-character .gk-m-leg-r {
    animation: none;
  }
}

/* Accessibility: no motion at all. Park the buddy left of the wordmark. */
@media (prefers-reduced-motion: reduce) {
  .site-footer .footer-logo .logo-character {
    animation: none !important;
    transform: translateX(calc(var(--gk-wordmark-w) * -0.5 - 6px)) !important;
    z-index: 3;
  }
  .site-footer .footer-logo .logo-character .gk-m-arm-l,
  .site-footer .footer-logo .logo-character .gk-m-arm-r,
  .site-footer .footer-logo .logo-character .gk-m-leg-l,
  .site-footer .footer-logo .logo-character .gk-m-leg-r {
    animation: none !important;
  }
}