.adventure-layer {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.adventure-leaf,
.adventure-spark,
.adventure-badge {
  position: absolute;
  opacity: .28;
  animation: drift-adventure 13s ease-in-out infinite;
}

.adventure-leaf {
  width: 24px;
  height: 16px;
  border-radius: 80% 10% 80% 10%;
  background: var(--brand-3);
  box-shadow: 8px 8px 0 rgba(54, 179, 126, .18);
}

.adventure-spark {
  width: 20px;
  height: 20px;
  background: var(--spark);
  clip-path: polygon(50% 0, 61% 34%, 96% 34%, 68% 55%, 79% 91%, 50% 70%, 21% 91%, 32% 55%, 4% 34%, 39% 34%);
  filter: drop-shadow(0 4px 10px rgba(255, 203, 61, .3));
}

.adventure-badge {
  width: 28px;
  height: 28px;
  border: 3px solid var(--brand-2);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 18%, transparent 19%),
    linear-gradient(180deg, rgba(239, 83, 80, .9) 0 48%, rgba(31, 42, 68, .9) 49% 55%, rgba(255, 255, 255, .92) 56%);
}

@keyframes drift-adventure {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  46% {
    transform: translate3d(8px, -18px, 0) rotate(18deg);
  }

  72% {
    transform: translate3d(-10px, -6px, 0) rotate(-10deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .adventure-leaf,
  .adventure-spark,
  .adventure-badge {
    animation: none;
  }
}