/**
 * GroKarna footer mascot — "orbit the whole logo".
 *
 * 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 journey
 * all the way AROUND the logo: across the top, down through the hollow of the
 * O, along the right edge, left through the gap between the "GRO" and "KARNA"
 * rows, weaving between the K·A·R·N·A letters, strolling under the baseline,
 * then climbing back up the left side — with a body swing and the arms
 * reaching up like it's grabbing its way around.
 *
 * The path is expressed relative to the logo image's rendered geometry, which
 * gk-footer-mascot.js measures into custom properties:
 *   --gk-wordmark-w  logo width   (horizontal span)
 *   --gk-logo-h      logo height  (vertical span)
 *   --gk-logo-left   image offsetLeft inside .footer-logo
 *   --gk-logo-top    image offsetTop inside .footer-logo
 * Sensible defaults keep things working before/without JS.
 *
 * Waypoints come from an alpha-channel scan of the flat PNG (fractions of the
 * image box): leaf/stem row y 0.10–0.27, GRO row y 0.28–0.66, row gap y
 * 0.66–0.67, KARNA row y 0.67–0.88; KARNA letter x-bands K 0.12–0.25,
 * A 0.27–0.41, R 0.42–0.56, N 0.58–0.74, A 0.75–0.89 (so the walkable letter
 * gaps sit at x ≈ 0.258, 0.417, 0.573, 0.746); the O's transparent hollow
 * centres at ≈ (0.75, 0.41). If the logo art changes, retune the keyframes.
 */

.site-footer .footer-logo {
  --gk-wordmark-w: 200px; /* JS overrides with the real rendered logo width */
  --gk-logo-h: 180px;     /* JS overrides with the real rendered logo height */
  --gk-logo-left: 0px;    /* JS overrides with the image's offsetLeft */
  --gk-logo-top: 56px;    /* JS overrides with the image's offsetTop */
  position: relative; /* establish stacking context for the mascot + wordmark */
}

/* The wordmark image MUST be an explicitly-positioned element with a z-index
   BETWEEN the mascot's two keyframe values (1 and 3). Without this the image
   is static-positioned and always paints under the positioned mascot, so the
   "pass behind" beats never showed and the basket just sat on top. */
.site-footer .footer-logo .main-logo-img {
  position: relative;
  z-index: 2;
}

/* The travelling mascot. Anchored at the logo IMAGE's top-left corner (via
   the JS-measured offsets), so every keyframe below can address a point on
   the artwork as a simple fraction of the image box:
     x: translateX(logo-width  * fx - 50%)   feet centred on fx
     y: translateY(logo-height * fy - 100%)  feet standing on fy
   The -50%/-100% are fractions of the mascot's own 56x66 box. */
.site-footer .footer-logo .logo-character {
  position: absolute !important;
  top: var(--gk-logo-top) !important;
  left: var(--gk-logo-left) !important;
  width: 56px !important;
  height: 66px !important;
  z-index: 3;
  opacity: 1 !important;
  transform-origin: 50% 70%;
  animation: gk-orbit 32s ease-in-out infinite !important;
  will-change: transform;
}

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

/* One full lap around (and through) the logo. z-index flips against the
   wordmark img (z-index:2) so the buddy passes BEHIND the artwork inside the
   O and on the letter dips, and IN FRONT elsewhere. scale() shrinks it in
   the tight spots (O hollow, row gap, letter gaps) so it plausibly fits.

   Leg of the journey, by keyframe:
    0-21%   across the top: G top -> leaf -> stem -> R top -> above the O
   21-31%   drops inside the O's transparent hollow, slips out the right
   31-40%   clings to the O's outer edge, climbs down the right side
   40-56%   scampers right-to-left along the GRO/KARNA row gap
   56-85%   weaves left-to-right between K·A·R·N·A: hops each letter top,
            dips into each gap (K/A, A/R, R/N, N/A)
   85-96%   slides off past the baseline, strolls right-to-left underneath
   96-100%  scrambles up the left side back to the G */
@keyframes gk-orbit {
  0%   { transform: translate(calc(var(--gk-wordmark-w) * 0.130 - 50%), calc(var(--gk-logo-h) * 0.290 - 100%)) rotate(-4deg)  scale(1);    z-index: 3; }
  6%   { transform: translate(calc(var(--gk-wordmark-w) * 0.250 - 50%), calc(var(--gk-logo-h) * 0.115 - 100%)) rotate(-8deg)  scale(1);    z-index: 3; }
  11%  { transform: translate(calc(var(--gk-wordmark-w) * 0.400 - 50%), calc(var(--gk-logo-h) * 0.160 - 100%)) rotate(6deg)   scale(1);    z-index: 3; }
  16%  { transform: translate(calc(var(--gk-wordmark-w) * 0.550 - 50%), calc(var(--gk-logo-h) * 0.290 - 100%)) rotate(-5deg)  scale(1);    z-index: 3; }
  21%  { transform: translate(calc(var(--gk-wordmark-w) * 0.750 - 50%), calc(var(--gk-logo-h) * 0.295 - 100%)) rotate(4deg)   scale(1);    z-index: 3; }
  26%  { transform: translate(calc(var(--gk-wordmark-w) * 0.750 - 50%), calc(var(--gk-logo-h) * 0.500 - 100%)) rotate(0deg)   scale(0.62); z-index: 1; }
  31%  { transform: translate(calc(var(--gk-wordmark-w) * 0.870 - 50%), calc(var(--gk-logo-h) * 0.500 - 100%)) rotate(10deg)  scale(0.62); z-index: 1; }
  35%  { transform: translate(calc(var(--gk-wordmark-w) * 0.955 - 50%), calc(var(--gk-logo-h) * 0.520 - 100%)) rotate(6deg)   scale(0.95); z-index: 3; }
  40%  { transform: translate(calc(var(--gk-wordmark-w) * 0.930 - 50%), calc(var(--gk-logo-h) * 0.685 - 100%)) rotate(-6deg)  scale(0.70); z-index: 3; }
  47%  { transform: translate(calc(var(--gk-wordmark-w) * 0.600 - 50%), calc(var(--gk-logo-h) * 0.685 - 100%)) rotate(5deg)   scale(0.58); z-index: 3; }
  53%  { transform: translate(calc(var(--gk-wordmark-w) * 0.300 - 50%), calc(var(--gk-logo-h) * 0.685 - 100%)) rotate(-5deg)  scale(0.58); z-index: 3; }
  56%  { transform: translate(calc(var(--gk-wordmark-w) * 0.150 - 50%), calc(var(--gk-logo-h) * 0.660 - 100%)) rotate(4deg)   scale(0.70); z-index: 3; }
  60%  { transform: translate(calc(var(--gk-wordmark-w) * 0.258 - 50%), calc(var(--gk-logo-h) * 0.830 - 100%)) rotate(0deg)   scale(0.80); z-index: 1; }
  64%  { transform: translate(calc(var(--gk-wordmark-w) * 0.340 - 50%), calc(var(--gk-logo-h) * 0.655 - 100%)) rotate(-6deg)  scale(0.85); z-index: 3; }
  68%  { transform: translate(calc(var(--gk-wordmark-w) * 0.417 - 50%), calc(var(--gk-logo-h) * 0.830 - 100%)) rotate(0deg)   scale(0.80); z-index: 1; }
  72%  { transform: translate(calc(var(--gk-wordmark-w) * 0.490 - 50%), calc(var(--gk-logo-h) * 0.655 - 100%)) rotate(-6deg)  scale(0.85); z-index: 3; }
  76%  { transform: translate(calc(var(--gk-wordmark-w) * 0.573 - 50%), calc(var(--gk-logo-h) * 0.830 - 100%)) rotate(0deg)   scale(0.80); z-index: 1; }
  80%  { transform: translate(calc(var(--gk-wordmark-w) * 0.660 - 50%), calc(var(--gk-logo-h) * 0.655 - 100%)) rotate(-6deg)  scale(0.85); z-index: 3; }
  83%  { transform: translate(calc(var(--gk-wordmark-w) * 0.746 - 50%), calc(var(--gk-logo-h) * 0.830 - 100%)) rotate(0deg)   scale(0.80); z-index: 1; }
  85%  { transform: translate(calc(var(--gk-wordmark-w) * 0.860 - 50%), calc(var(--gk-logo-h) * 0.940 - 100%)) rotate(8deg)   scale(1);    z-index: 3; }
  90%  { transform: translate(calc(var(--gk-wordmark-w) * 0.480 - 50%), calc(var(--gk-logo-h) * 0.965 - 100%)) rotate(-3deg)  scale(1);    z-index: 3; }
  94%  { transform: translate(calc(var(--gk-wordmark-w) * 0.100 - 50%), calc(var(--gk-logo-h) * 0.940 - 100%)) rotate(-8deg)  scale(1);    z-index: 3; }
  97%  { transform: translate(calc(var(--gk-wordmark-w) * 0.040 - 50%), calc(var(--gk-logo-h) * 0.560 - 100%)) rotate(-12deg) scale(0.95); z-index: 3; }
  100% { transform: translate(calc(var(--gk-wordmark-w) * 0.130 - 50%), calc(var(--gk-logo-h) * 0.290 - 100%)) rotate(-4deg)  scale(1);    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 around faster, grabbing harder. */
.site-footer .footer-logo:hover .logo-character {
  animation-play-state: running !important;
  animation-duration: 18s !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.
   (Anchor is now the image's top-left corner, so "just left" is -100% of the
   mascot's own box, standing on the GRO row's midline.) */
@media (max-width: 767px) {
  .site-footer .footer-logo .logo-character {
    animation: none !important;
    transform: translate(calc(-100% - 6px), calc(var(--gk-logo-h) * 0.45 - 100%)) !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: translate(calc(-100% - 6px), calc(var(--gk-logo-h) * 0.45 - 100%)) !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;
  }
}