.animated-logo {
  position: relative;
  flex: 0 0 auto;
  display: block;
  width: 156px;
  height: 82px;
  color: transparent;
  text-decoration: none;
}

.logo-stage {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.logo-wordmark {
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 156px;
  height: auto;
}

.logo-kangaroo {
  --kangaroo-ground: 37px;
  /* Leave a 14px gap before the wordmark throughout the first two hops. */
  --kangaroo-launch-x: -124px;
  /* Use the extra left margin on wide screens without clipping on mobile. */
  --kangaroo-stride: clamp(10px, calc(25vw - 362px), 34px);
  position: absolute;
  left: calc(50% - 32px);
  bottom: 37px;
  width: 64px;
  height: auto;
  opacity: 1;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}

.animated-logo.is-hopping .logo-kangaroo {
  animation: bluesky-kangaroo-hop 2.03846s steps(1, end) .12s both;
}

.home-logo-lockup { position: relative; flex: 0 0 auto; }
.animated-logo { cursor: pointer; }

@keyframes bluesky-kangaroo-hop {
  /* First hop: longer forward travel, higher arc and a stronger spring. */
  0% { transform: translate(calc(var(--kangaroo-launch-x) - var(--kangaroo-stride) * 2), var(--kangaroo-ground)) scale(.9); }
  5% { transform: translate(calc(var(--kangaroo-launch-x) - var(--kangaroo-stride) * 2), var(--kangaroo-ground)) scale(.94, .78); }
  8% { transform: translate(calc(var(--kangaroo-launch-x) - var(--kangaroo-stride) * 1.85), calc(var(--kangaroo-ground) - 24px)) rotate(4deg) scale(.88, .98); }
  12% { transform: translate(calc(var(--kangaroo-launch-x) - var(--kangaroo-stride) * 1.5), calc(var(--kangaroo-ground) - 44px)) rotate(7deg) scale(.9); }
  17% { transform: translate(calc(var(--kangaroo-launch-x) - var(--kangaroo-stride) * 1.15), calc(var(--kangaroo-ground) - 22px)) rotate(-3deg) scale(.9, .96); }
  22% { transform: translate(calc(var(--kangaroo-launch-x) - var(--kangaroo-stride)), var(--kangaroo-ground)) scale(.94, .78); }
  25% { transform: translate(calc(var(--kangaroo-launch-x) - var(--kangaroo-stride)), var(--kangaroo-ground)) scale(.9); }
  /* Second hop: another full stride, followed by a pause before the logo. */
  30% { transform: translate(calc(var(--kangaroo-launch-x) - var(--kangaroo-stride)), var(--kangaroo-ground)) scale(.94, .78); }
  35% { transform: translate(calc(var(--kangaroo-launch-x) - var(--kangaroo-stride) * .85), calc(var(--kangaroo-ground) - 28px)) rotate(4deg) scale(.88, 1.02); }
  40% { transform: translate(calc(var(--kangaroo-launch-x) - var(--kangaroo-stride) * .5), calc(var(--kangaroo-ground) - 50px)) rotate(7deg) scale(.9); }
  45% { transform: translate(calc(var(--kangaroo-launch-x) - var(--kangaroo-stride) * .15), calc(var(--kangaroo-ground) - 24px)) rotate(-3deg) scale(.9, .98); }
  50% { transform: translate(var(--kangaroo-launch-x), var(--kangaroo-ground)) scale(.9, .78); }
  53% { transform: translate(var(--kangaroo-launch-x), var(--kangaroo-ground)) scale(.9); }
  /* Final jump onto the logo; the existing resting position preserves the gap. */
  58% { transform: translate(var(--kangaroo-launch-x), var(--kangaroo-ground)) scale(.9, .78); }
  64% { transform: translate(calc(var(--kangaroo-launch-x) * .86), -3px) rotate(-2deg) scale(.94); }
  72% { transform: translate(calc(var(--kangaroo-launch-x) * .52), -16px) rotate(4deg) scale(.96); }
  80% { transform: translate(calc(var(--kangaroo-launch-x) * .23), -20px) rotate(3deg) scale(.98); }
  88% { transform: translate(calc(var(--kangaroo-launch-x) * .08), -8px) rotate(1deg); }
  94% { transform: translate(-1px, 0); }
  98%, 100% { transform: translate(0, 0); }
}

@media (max-width: 620px) {
  .animated-logo { width: 132px; height: 70px; }
  .logo-wordmark { width: 132px; }
  .logo-kangaroo { --kangaroo-ground: 32px; --kangaroo-launch-x: -107.5px; left: calc(50% - 27.5px); bottom: 32px; width: 55px; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-kangaroo {
    opacity: 1;
    animation: none;
    transform: none;
  }
}