/* Tijgerbrood Skipping: native SVG/CSS animation. No CSS outside .tb-skipping. */
.tb-skipping {
  --tb-step: .8s;
  --tb-ease: cubic-bezier(.65, 0, .35, 1);
  --tb-ring-radius: 58px;
  --tb-ring-scale: .31;
  --tb-petal-ease: cubic-bezier(.56, 1.31, .42, 1);
  position: relative;
  display: block;
  width: 100%;
  isolation: isolate;
}
.tb-skipping__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 482 / 438;
  overflow: visible;
}
.tb-skipping__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  position: relative;
  z-index: 1;
}
.tb-skipping__svg * { transform-box: fill-box; }
.tb-skipping__glow {
  position: absolute;
  inset: -12%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(
    ellipse 30% 35% at 13% 34%,
    rgb(255 255 255 / .92) 0%,
    rgb(0 255 136 / .8) 22%,
    rgb(0 255 200 / .53) 50%,
    rgb(123 86 255 / .28) 72%,
    transparent 100%
  );
  mix-blend-mode: screen;
  transform-origin: 13% 34%;
}

/* Original running motion reconstructed from Skipping.astro in the chat. */
.tb-skipping .wand-pose {
  transform-box: view-box;
  transform-origin: 110px 230px;
  transition: transform .35s ease;
}
.tb-skipping.is-magic .wand-pose { transform: rotate(12deg); }
.tb-skipping .duo {
  transform-origin: bottom center;
  animation: tb-body-bounce var(--tb-step) var(--tb-ease) var(--tb-step) infinite;
}
.tb-skipping .floor {
  transform-origin: top center;
  animation: tb-floor var(--tb-step) var(--tb-ease) var(--tb-step) infinite alternate;
}
.tb-skipping .leg {
  transform-origin: top right;
  animation: tb-leg-stride calc(2 * var(--tb-step)) var(--tb-ease) infinite;
}
.tb-skipping .leg-tim-r,
.tb-skipping .leg-joep-r {
  animation-delay: var(--tb-step);
  animation-direction: alternate;
}
.tb-skipping .leg-joep-r .inner { translate: 25% 0; }
.tb-skipping .leg-tim-r .inner  { translate: 100% -20%; }
.tb-skipping .leg-tim-l .inner  { translate: 75% -20%; }
.tb-skipping .flower-hand {
  animation: tb-shirt calc(2 * var(--tb-step))
    cubic-bezier(.68, -.6, .32, 1.6) infinite alternate-reverse;
}
.tb-skipping .flower-top {
  transform-origin: bottom center;
  animation: tb-flower-wobble var(--tb-step)
    cubic-bezier(.68, -.6, .32, 1.6) var(--tb-step) infinite alternate-reverse;
}
.tb-skipping .flower-bot {
  transform-origin: top center;
  animation: tb-flower-wobble var(--tb-step)
    cubic-bezier(.68, -.6, .32, 1.6) var(--tb-step) infinite alternate-reverse;
}
.tb-skipping .peace {
  /* The original forearm closes inside the sleeve at x338, y144–160. Keep
   * that attachment fixed while the hand waves with the rest of the body. */
  transform-box: view-box;
  transform-origin: 338px 152px;
  animation: tb-peace calc(4 * var(--tb-step)) ease-in-out var(--tb-step) infinite alternate;
}
.tb-skipping .head {
  transform-origin: bottom center;
}
.tb-skipping .head.joep {
  animation: tb-head-bob calc(var(--tb-step) / 2) ease-in-out
    var(--tb-step) infinite alternate-reverse;
}
.tb-skipping .head.tim {
  animation: tb-head-bob calc(var(--tb-step) / 2) ease-in-out
    calc(var(--tb-step) * 1.1) infinite alternate-reverse;
}
.tb-skipping .head.joep image {
  transform-origin: bottom center;
  animation: tb-headshake calc(2 * var(--tb-step)) ease-in-out infinite alternate-reverse;
}
.tb-skipping .head.tim image {
  transform-origin: bottom center;
  animation: tb-headshake calc(1.5 * var(--tb-step)) ease-in-out infinite alternate;
}

@keyframes tb-leg-stride {
  0%   { transform: translateY(0) rotate(0deg); animation-timing-function: ease-in-out; }
  33%  { transform: translateY(-2%) rotate(-70deg); animation-timing-function: ease-in; }
  66%  { transform: translateY(5%) rotate(-55deg); animation-timing-function: ease-out; }
  100% { transform: translateY(0) rotate(0deg); }
}
@keyframes tb-body-bounce {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(0, 4%); animation-timing-function: ease-in; }
  66% { transform: translate(2%, 7%); animation-timing-function: ease-out; }
}
@keyframes tb-floor {
  0%   { translate: 10% 40%; rotate: -10deg; scale: 1 1; }
  100% { translate: -10% 60%; rotate: 15deg; scale: 1.05 1.75; }
}
@keyframes tb-shirt {
  0% { transform: translateY(6%) rotate(-6deg); }
  100% { transform: translateY(-3%) rotate(6deg); }
}
@keyframes tb-flower-wobble {
  0% { translate: 0 5%; rotate: 3deg; }
  100% { translate: 0 -2.5%; rotate: -10deg; }
}
@keyframes tb-head-bob {
  0% { transform: translateY(-2.5%); }
  100% { transform: translateY(0); }
}
@keyframes tb-headshake {
  0% { transform: rotate(-3deg) translateY(0); }
  100% { transform: rotate(5deg) translateY(-5%); }
}
@keyframes tb-peace {
  0% { transform: rotate(-25deg); }
  100% { transform: rotate(20deg); }
}

/* Magic-wand flower: original paths duplicated into eight independent petals. */
.tb-skipping .leaf {
  transform-box: fill-box;
  transform-origin: center;
  animation: tb-orbit 8s linear infinite paused;
}
.tb-skipping .leafgroup {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .9s var(--tb-petal-ease);
  transition-delay: 0ms;
}
.tb-skipping.is-magic .leafgroup {
  transform: rotate(var(--tb-angle)) translateX(var(--tb-ring-radius)) scale(var(--tb-ring-scale));
  transition-delay: var(--tb-delay);
}
.tb-skipping.is-magic .leaf { animation-play-state: running; }
@keyframes tb-orbit { to { transform: rotate(360deg); } }

.tb-skipping.is-magic .tb-skipping__glow {
  animation: tb-magic-glow 2s ease-in-out infinite alternate;
}
@keyframes tb-magic-glow {
  0% { opacity: .75; transform: scale(.9); }
  100% { opacity: 1; transform: scale(1.3, .95); }
}
/* Do not filter the entire root SVG: browsers rasterise that filter against its
 * viewport and clip the rotated floor/petals. The glow is a separate layer. */

/* Static distortion filter is opt-in. Not animated per frame, for Safari/CPU cost. */
.tb-skipping.is-magic.tb-skipping--distort .leaf {
  /* Filter URL injected by JS after per-instance SVG IDs have been namespaced. */
}

/* The controller owns every instance, including standalone mounts. */
.tb-skipping:not([data-motion="running"]) *,
.tb-skipping:not([data-motion="running"]) .tb-skipping__svg {
  animation-play-state: paused !important;
}
/* Transitions do not obey animation-play-state. Avoid petal movement while the
 * illustration is paused, offscreen, or waiting for its controller. */
.tb-skipping:not([data-motion="running"]) :is(.leafgroup, .wand-pose) { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .tb-skipping .tb-skipping__svg *,
  .tb-skipping .tb-skipping__svg,
  .tb-skipping .tb-skipping__glow {
    animation: none !important;
    transition: none !important;
  }
  .tb-skipping.is-magic .leafgroup { transform: none; }
  .tb-skipping.is-magic .tb-skipping__glow { opacity: .2; }
}