/* Warm Gradient Blobs Background Plugin Styles */

/* Container */
[data-cb-type="warm-blobs-bg"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.cb-warm-blobs-bg__container {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Floating Gradient Blobs */
.cb-warm-blobs-bg__blob {
    position: absolute;
    filter: blur(var(--blob-blur, 60px));
    opacity: var(--blob-opacity, 0.4);
    animation: cb-blobFloat var(--animation-duration, 20s) ease-in-out infinite,
                cb-fadeIn 1.5s ease-out forwards;
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    will-change: transform, border-radius;
    mix-blend-mode: normal;
}

/* Blob Positions */
.cb-warm-blobs-bg__blob--1 {
    width: var(--blob-size-1, 500px);
    height: var(--blob-size-1, 500px);
    background: var(--blob-gradient-1);
    top: -100px;
    right: -100px;
    animation-delay: 0s;
}

.cb-warm-blobs-bg__blob--2 {
    width: var(--blob-size-2, 450px);
    height: var(--blob-size-2, 450px);
    background: var(--blob-gradient-2);
    bottom: -80px;
    left: -80px;
    animation-delay: -7s;
}

.cb-warm-blobs-bg__blob--3 {
    width: var(--blob-size-3, 400px);
    height: var(--blob-size-3, 400px);
    background: var(--blob-gradient-3);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: -14s;
    animation: cb-blobFloatCenter var(--animation-duration, 20s) ease-in-out infinite,
                cb-fadeIn 1.5s ease-out forwards;
}

.cb-warm-blobs-bg__blob--4 {
    width: var(--blob-size-4, 380px);
    height: var(--blob-size-4, 380px);
    background: var(--blob-gradient-4);
    top: 20%;
    left: 15%;
    animation-delay: -3.5s;
}

.cb-warm-blobs-bg__blob--5 {
    width: var(--blob-size-5, 420px);
    height: var(--blob-size-5, 420px);
    background: var(--blob-gradient-5);
    bottom: 25%;
    right: 20%;
    animation-delay: -10s;
}

/* Blob Float Animation */
@keyframes cb-blobFloat {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    }
    25% {
        transform: translate(40px, -60px) rotate(90deg);
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    50% {
        transform: translate(-30px, 40px) rotate(180deg);
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
    75% {
        transform: translate(60px, 30px) rotate(270deg);
        border-radius: 70% 30% 40% 60% / 40% 70% 60% 30%;
    }
}

/* Center Blob Float Animation */
@keyframes cb-blobFloatCenter {
    0%, 100% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    }
    25% {
        transform: translate(calc(-50% + 30px), calc(-50% - 40px)) rotate(90deg) scale(1.05);
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    50% {
        transform: translate(calc(-50% - 25px), calc(-50% + 30px)) rotate(180deg) scale(0.95);
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
    75% {
        transform: translate(calc(-50% + 40px), calc(-50% + 20px)) rotate(270deg) scale(1.02);
        border-radius: 70% 30% 40% 60% / 40% 70% 60% 30%;
    }
}

/* Fade In Animation */
@keyframes cb-fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: var(--blob-opacity, 0.4);
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .cb-warm-blobs-bg__blob {
        animation: cb-fadeIn 1s ease-out forwards !important;
    }
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .cb-warm-blobs-bg__blob--1,
    .cb-warm-blobs-bg__blob--2,
    .cb-warm-blobs-bg__blob--3,
    .cb-warm-blobs-bg__blob--4,
    .cb-warm-blobs-bg__blob--5 {
        width: 280px !important;
        height: 280px !important;
    }

    .cb-warm-blobs-bg__blob {
        filter: blur(50px);
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    [data-cb-type="warm-blobs-bg"] {
        opacity: 0.2;
    }
}