.site-header {
  isolation: isolate;
  overflow: visible;
  z-index: 100;
}

.header-inner {
  position: relative;
  z-index: 20;
}

.header-hamster-strip {
  --header-hamster-size: 104px;
  --header-hamster-speed: 12s;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  z-index: 40;
  height: 62px;
  overflow: hidden;
  pointer-events: none;
}

.header-hamster-ground {
  position: absolute;
  right: 0;
  bottom: 6px;
  left: 0;
  height: 1px;
  background: rgba(255, 178, 26, 0.46);
  box-shadow: 0 0 7px rgba(255, 178, 26, 0.24);
}

.header-hamster-runner {
  position: absolute;
  left: 0;
  bottom: 7px;
  width: var(--header-hamster-size);
  height: calc(var(--header-hamster-size) * 0.58);
  transform: translate3d(calc(-1 * var(--header-hamster-size)), 0, 0);
  will-change: transform;
  animation: header-hamster-run-across var(--header-hamster-speed) linear infinite;
}

.header-hamster-image {
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--header-hamster-size);
  height: auto;
  transform-origin: 45% 85%;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.32));
  will-change: transform;
  animation: header-hamster-scurry 0.62s ease-in-out infinite;
}

.header-hamster-shadow {
  position: absolute;
  bottom: -1px;
  left: 20%;
  width: 55%;
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  filter: blur(2px);
  transform-origin: center;
  will-change: transform, opacity;
  animation: header-hamster-shadow 0.62s ease-in-out infinite;
}

@keyframes header-hamster-run-across {
  from {
    transform: translate3d(calc(-1 * var(--header-hamster-size)), 0, 0);
  }

  to {
    transform: translate3d(calc(100vw + var(--header-hamster-size)), 0, 0);
  }
}

@keyframes header-hamster-scurry {
  0%,
  100% {
    transform: translateY(0) rotate(-0.7deg) scaleX(1) scaleY(1);
  }

  16% {
    transform: translateY(-0.9px) rotate(-0.1deg) scaleX(1.012) scaleY(0.992);
  }

  32% {
    transform: translateY(0.5px) rotate(0.6deg) scaleX(0.996) scaleY(1.008);
  }

  50% {
    transform: translateY(-0.8px) rotate(0.1deg) scaleX(1.01) scaleY(0.994);
  }

  68% {
    transform: translateY(0.45px) rotate(0.7deg) scaleX(0.997) scaleY(1.006);
  }

  84% {
    transform: translateY(-0.6px) rotate(0) scaleX(1.008) scaleY(0.996);
  }
}

@keyframes header-hamster-shadow {
  0%,
  100% {
    transform: scaleX(0.98);
    opacity: 0.2;
  }

  32%,
  68% {
    transform: scaleX(0.97);
    opacity: 0.17;
  }

  16%,
  50%,
  84% {
    transform: scaleX(1.01);
    opacity: 0.23;
  }
}

@media (max-width: 767px) {
  .header-hamster-strip {
    --header-hamster-size: 86px;
    --header-hamster-speed: 10.5s;
    bottom: -6px;
    height: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-hamster-runner,
  .header-hamster-image,
  .header-hamster-shadow {
    animation: none;
  }

  .header-hamster-runner {
    right: 22px;
    left: auto;
    transform: none;
  }
}