/**
 * Background Animation 1 - Floating Circles
 */

.wml-background-animation-1 {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* Circles Container */
.wml-ba1-circles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
}

/* Individual Circle */
.wml-ba1-circles li {
    position: absolute;
    display: block;
    list-style: none;
    background: var(--circle-color, rgba(255, 255, 255, 0.2));
    animation: wml-ba1-animate var(--animation-duration, 25s) linear infinite;
    bottom: calc(-1 * var(--circle-size, 150px));
    width: var(--circle-size, 20px);
    height: var(--circle-size, 20px);
    left: var(--circle-left, 25%);
    animation-delay: var(--animation-delay, 0s);
}

/* Animation Keyframes */
@keyframes wml-ba1-animate {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100% {
        transform: translateY(var(--travel-distance, -1000px)) rotate(var(--rotation-angle, 720deg));
        opacity: 0;
        border-radius: var(--border-radius-end, 50%);
    }
}

/* Overlay Content */
.wml-ba1-overlay {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
}

/* Reset for nested Bricks elements */
.wml-ba1-overlay>.brxe-block,
.wml-ba1-overlay>.brxe-container,
.wml-ba1-overlay>.brxe-div {
    width: 100%;
}