/**
 * Gradient Background Animation Styles
 */

.wml-gradient-background {
    position: relative;
    width: 100%;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient(40deg, var(--gradient-background-start), var(--gradient-background-end));
    isolation: isolate;
}

.wml-gb-svg-filter {
    display: none;
}

/* Gradients Container */
.wml-gb-gradients-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    filter: url(#wml-gb-blur) blur(40px);
    /* Safari fallback handled via JS or specific media query if needed,
       but standard blur + svg filter usually works reasonably well.
       The React code used a specific Safari check. */
    z-index: 0;
    pointer-events: none;
    /* Ensure clicks pass through to content */
}

/* Safari specific blur (simplified approach) */
@supports (-webkit-backdrop-filter: none) {
    .wml-gb-gradients-container {
        filter: blur(60px);
        /* Stronger blur for Safari if SVG filter fails/is heavy */
    }
}

/* Blobs Common Styles */
.wml-gb-blob {
    position: absolute;
    top: calc(50% - var(--size) / 2);
    left: calc(50% - var(--size) / 2);
    width: var(--size);
    height: var(--size);
    mix-blend-mode: var(--blending-value);
    opacity: 1;
    transform-origin: center center;
}

/* Blob Animations */
/* Animation 1 */
.wml-gb-anim-1 {
    animation: wml-moveVertical 30s ease infinite;
}

/* Animation 2 */
.wml-gb-anim-2 {
    transform-origin: calc(50% - 400px);
    animation: wml-moveInCircle 20s reverse infinite;
}

/* Animation 3 */
.wml-gb-anim-3 {
    transform-origin: calc(50% + 400px);
    animation: wml-moveInCircle 40s linear infinite;
}

/* Animation 4 */
.wml-gb-anim-4 {
    transform-origin: calc(50% - 200px);
    animation: wml-moveHorizontal 40s ease infinite;
    opacity: 0.7;
}

/* Animation 5 */
.wml-gb-anim-5 {
    transform-origin: calc(50% - 800px) calc(50% + 800px);
    animation: wml-moveInCircle 20s ease infinite;
}

/* Interactive Blob */
.wml-gb-interactive {
    background: radial-gradient(circle at center, rgba(var(--pointer-color), 0.8) 0, rgba(var(--pointer-color), 0) 50%) no-repeat;
    width: 100%;
    height: 100%;
    top: -50%;
    left: -50%;
    opacity: 0.7;
    /* Position controlled by JS */
    transition: transform 0.05s linear;
    /* Smooth follow */
}

/* Content Container */
.wml-gb-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    min-height: 100%;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

/* Keyframes */
@keyframes wml-moveHorizontal {
    0% {
        transform: translateX(-50%) translateY(-10%);
    }

    50% {
        transform: translateX(50%) translateY(10%);
    }

    100% {
        transform: translateX(-50%) translateY(-10%);
    }
}

@keyframes wml-moveInCircle {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

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

@keyframes wml-moveVertical {
    0% {
        transform: translateY(-50%);
    }

    50% {
        transform: translateY(50%);
    }

    100% {
        transform: translateY(-50%);
    }
}