/* Fixed background container */
.background {
    position: fixed; /* Fixed relative to the viewport */
    top: 50%;
    left: 50%;
    width: 200vw; /* Increased from 150vw to 200vw */
    height: 200vh; /* Increased from 150vh to 200vh */
    transform: translate(-50%, -50%); /* Center the background */
    z-index: -1; /* Place it behind all other content */
    pointer-events: none; /* Allow interactions to pass through */
    overflow: hidden; /* Prevent children from causing scroll */
}

/* Common styles for all circles */
.circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px; /* Increased from 150px to 200px */
    height: 200px; /* Increased from 150px to 200px */
    border-radius: 50%;
    background: rgba(0,0,0, 0.5); /* White with 0.5 opacity */
    /* background: rgba(255, 255, 255, 0.5); */
    /* box-shadow: 0 0 20px rgba(255, 255, 255, 0.3); */
    transform: translate(-50%, -50%) scale(0.3);
    animation: ripple 6s infinite ease-in-out;
    will-change: transform; /* Optimize for performance */
}

/* Adjust sizes for concentric circles (scaled by 2x) */
.circle1 {
    width: 200px; /* 100px * 2 */
    height: 200px;
    animation-delay: 0s;
}

.circle2 {
    width: 400px; /* 200px * 2 */
    height: 400px;
    animation-delay: 0.2s;
}

.circle3 {
    width: 600px; /* 300px * 2 */
    height: 600px;
    animation-delay: 0.4s;
}

.circle4 {
    width: 800px; /* 400px * 2 */
    height: 800px;
    animation-delay: 0.6s;
}

.circle5 {
    width: 1000px; /* 500px * 2 */
    height: 1000px;
    animation-delay: 0.8s;
    /* border: 10px solid white; */
}

@keyframes ripple {
    0% {
        transform: translate(-50%, -50%) scale(0.3);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
    }

    100% {
        transform: translate(-50%, -50%) scale(0.3);
    }
}

/* Accessibility: Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .circle {
        animation: none;
    }
}

/* Optional: Enhancements */

/* Gradient Background for Circles */
.circle1 {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 100%);
}

.circle2 {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.15) 70%, rgba(255, 255, 255, 0) 100%);
}

.circle3 {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.1) 70%, rgba(255, 255, 255, 0) 100%);
}

.circle4 {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.05) 70%, rgba(255, 255, 255, 0) 100%);
}

.circle5 {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0px 0px 110px 20px rgba(255,255,255,0.2);
}