:root {
  --tw-z-index: 40;
  --tw-size: clamp(4.5rem, 9vw, 8rem);
  --tw-track-height: clamp(5rem, 12vw, 8rem);
  --tw-ground-height: clamp(1.1rem, 3vw, 2rem);
  --tw-duration: 18s;
  --tw-bounce-duration: 2.1s;
  --tw-spin-duration: 2.7s;
  --tw-ground-color: #9f7550;
  --tw-ground-highlight: #d0a071;
  --tw-dust-color: rgba(232, 201, 159, 0.55);
  --tw-shadow-color: rgba(54, 28, 12, 0.2);
}

.tumbleweed-addon {
  position: fixed;
  inset: auto 0 0 0;
  height: var(--tw-track-height);
  overflow: hidden;
  pointer-events: none;
  z-index: var(--tw-z-index);
}

.tumbleweed-addon,
.tumbleweed-addon * {
  box-sizing: border-box;
}

.tumbleweed-plains {
  position: absolute;
  inset: auto 0 0 0;
  height: calc(var(--tw-ground-height) + 1.25rem);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0) 40%,
      rgba(229, 189, 135, 0.18) 40%,
      rgba(229, 189, 135, 0.18) 55%,
      rgba(159, 117, 80, 0.95) 55%,
      rgba(124, 84, 52, 0.98) 100%
    );
  border-top: 1px solid rgba(255, 240, 215, 0.28);
}

.tumbleweed-plains::before,
.tumbleweed-plains::after {
  content: "";
  position: absolute;
  inset: 0;
}

.tumbleweed-plains::before {
  background:
    radial-gradient(circle at 10% 45%, rgba(255, 234, 198, 0.28) 0 0.2rem, transparent 0.24rem),
    radial-gradient(circle at 38% 78%, rgba(255, 234, 198, 0.2) 0 0.15rem, transparent 0.18rem),
    radial-gradient(circle at 67% 52%, rgba(255, 234, 198, 0.24) 0 0.18rem, transparent 0.21rem),
    radial-gradient(circle at 88% 72%, rgba(255, 234, 198, 0.18) 0 0.14rem, transparent 0.17rem);
  opacity: 0.65;
}

.tumbleweed-plains::after {
  background:
    linear-gradient(90deg, transparent 0 16%, rgba(255, 226, 184, 0.16) 20%, transparent 26%),
    linear-gradient(90deg, transparent 0 48%, rgba(255, 226, 184, 0.12) 54%, transparent 61%),
    linear-gradient(90deg, transparent 0 78%, rgba(255, 226, 184, 0.14) 84%, transparent 90%);
  mix-blend-mode: screen;
}

.tumbleweed-runner {
  position: absolute;
  left: 0;
  bottom: calc(var(--tw-ground-height) - (var(--tw-size) * 0.18));
  width: var(--tw-size);
  aspect-ratio: 1;
  animation: tumbleweed-cross var(--tw-duration) linear infinite;
}

.tumbleweed-bob {
  position: relative;
  width: 100%;
  height: 100%;
  animation: tumbleweed-bob var(--tw-bounce-duration) ease-in-out infinite;
}

.tumbleweed-art {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: center;
  animation: tumbleweed-spin var(--tw-spin-duration) linear infinite;
  filter: drop-shadow(0 0.25rem 0.45rem rgba(41, 18, 3, 0.2));
}

.tumbleweed-shadow {
  position: absolute;
  left: 13%;
  right: 13%;
  bottom: 2%;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--tw-shadow-color) 0 48%, rgba(54, 28, 12, 0) 70%);
  transform: translateY(130%) scaleX(0.85);
  animation: tumbleweed-shadow var(--tw-bounce-duration) ease-in-out infinite;
}

@keyframes tumbleweed-cross {
  0% {
    transform: translateX(calc(-1 * var(--tw-size) - 12vw));
  }

  100% {
    transform: translateX(calc(100vw + var(--tw-size) + 12vw));
  }
}

@keyframes tumbleweed-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes tumbleweed-bob {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  25% {
    transform: translateY(-7%) scale(0.995);
  }

  50% {
    transform: translateY(-12%) scale(1.01);
  }

  75% {
    transform: translateY(-5%) scale(0.998);
  }
}

@keyframes tumbleweed-shadow {
  0%,
  100% {
    opacity: 0.3;
    transform: translateY(130%) scaleX(0.86);
  }

  50% {
    opacity: 0.18;
    transform: translateY(138%) scaleX(0.7);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tumbleweed-runner,
  .tumbleweed-bob,
  .tumbleweed-art,
  .tumbleweed-shadow {
    animation-play-state: paused;
  }
}