.hero-pattern {
    background-color: var(--brand-bg-light);
    background-image: radial-gradient(var(--brand-primary) 0.5px, transparent 0.5px);
    background-size: 20px 20px;
    opacity: 0.5;
}

@keyframes section-bg-drift {
    0% {
        background-position: 32% 56%;
    }
    50% {
        background-position: 68% 44%;
    }
    100% {
        background-position: 32% 56%;
    }
}

.join-hero-bg {
    background-image: url('../images/page-bg.png');
    background-size: cover;
    background-position: 32% 56%;
    background-repeat: no-repeat;
    animation: section-bg-drift 28s ease-in-out infinite;
    will-change: background-position;
}

.join-footer-bg {
    background-image: url('../images/page-bg4.png');
    background-size: cover;
    background-position: 32% 56%;
    background-repeat: no-repeat;
    animation: section-bg-drift 40s ease-in-out infinite;
    will-change: background-position;
}

@media (prefers-reduced-motion: reduce) {
    .join-hero-bg,
    .join-footer-bg {
        animation-duration: 28s;
    }
}