/* How It Works section decorative backgrounds */
.how-it-works-circles::before {
  content: "";
  position: absolute;
  inset: -40% -20% -40% -20%;
  background: repeating-radial-gradient(
    circle at 70% 22%,
    rgba(255, 255, 255, 0.14) 0 1px,
    transparent 1px 40px
  );
  opacity: 0.35;
  pointer-events: none;
}

.how-it-works-circles::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 260px at 15% -10%, rgba(255, 255, 255, 0.16), transparent 62%),
    radial-gradient(900px 260px at 85% 110%, rgba(255, 255, 255, 0.10), transparent 62%);
  pointer-events: none;
  opacity: 0.65;
}

/* Scroll reveal animations */
.scroll-reveal-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.scroll-reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Who Can Join pills pulsating border effect */
@keyframes pillPulse {
  0%, 100% {
    border-color: var(--color-brand-blue-100);
  }
  50% {
    border-color: var(--color-brand-blue-500);
  }
}

.who-can-join-pill {
  animation: pillPulse 3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal-item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .who-can-join-pill {
    animation: none;
  }
}