/**
 * Background Animation 2 - Skewed Gradient with Rotating Texture
 */

.wml-background-animation-2 {
    position: relative;
    width: 100%;
    height: 600px;
    display: flex;
    align-items: center;
    padding-left: 70px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Background with skew and gradient */
.wml-ba2-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

/* Rotating texture pseudo-element */
.wml-ba2-background::after {
    content: '';
    position: absolute;
    top: -400%;
    right: -400%;
    width: var(--texture-size, 800%);
    height: var(--texture-size, 800%);
    background: var(--texture-url, url('https://www.transparenttextures.com/patterns/dark-mosaic.png'));
    opacity: var(--texture-opacity, 0.3);
    animation-name: wml-ba2-rotate;
    animation-duration: var(--animation-duration, 140s);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

/* Rotation Animation */
@keyframes wml-ba2-rotate {
    0% {
        transform: rotateZ(0deg);
    }

    100% {
        transform: rotateZ(360deg);
    }
}

/* Overlay Content */
.wml-ba2-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-ba2-overlay>.brxe-block,
.wml-ba2-overlay>.brxe-container,
.wml-ba2-overlay>.brxe-div {
    width: 100%;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .wml-background-animation-2 {
        padding-left: 30px;
        padding-right: 30px;
    }
}