/**
 * Wave Background Animation
 * Recreates the concentric ring animation from the CodePen reference.
 */
.wave-background {
    z-index: 0;
}

.wave-background__stage {
    overflow: visible;
}

.wave-background__ring {
    position: absolute;
    top: var(--wave-center-y, 50%);
    left: var(--wave-center-x, 50%);
    width: var(--wave-ring-size, 300px);
    height: var(--wave-ring-size, 300px);
    border-radius: 50%;
    background: var(--wave-ring-color, rgba(255, 255, 255, 0.4));
    opacity: var(--wave-ring-opacity, 1);
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center center;
    animation: wave-background-ring-scale var(--wave-duration, 3s) ease-in-out infinite alternate;
    animation-delay: var(--wave-ring-delay, 0s);
    will-change: transform;
}

@keyframes wave-background-ring-scale {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        transform: translate(-50%, -50%) scale(var(--wave-ring-scale-target, 1.1));
    }
}

@media (prefers-reduced-motion: reduce) {
    .wave-background__ring {
        animation: none;
        transform: translate(-50%, -50%) scale(1);
    }
}

@media (max-width: 767.98px) {
    .wave-background {
        z-index: 2;
    }
}