/**
 * Confluent: Smooth Flowing Blob Animation (Chad AI)
 * Add class to Elementor Image widget (Advanced > CSS Classes):
 *   confluent-colourblob-magenta   confluent-colourblob-yellow
 * Internal namespace: chadai.
 */

/* ============================================
   OVERRIDE ELEMENTOR ANIMATIONS (class-based)
   ============================================ */

.confluent-colourblob-magenta.animated-slow.animated.zoomInLeft,
.confluent-colourblob-magenta.animated.zoomInLeft,
.confluent-colourblob-magenta.zoomInLeft,
.confluent-colourblob-magenta[data-settings*="zoomInLeft"],
.confluent-colourblob-magenta.elementor-widget-image,
.confluent-colourblob-magenta.blob-animation-ready.animated.zoomInLeft,
.confluent-colourblob-yellow.elementor-widget-image,
.confluent-colourblob-yellow[data-settings] {
    animation: none !important;
    -webkit-animation: none !important;
}

/* ============================================
   SMOOTH CONFLUENT ANIMATIONS
   ============================================ */
   
/* Magenta (purple) blob - Gentle flow, scales to 2x at 100%, starts at 0 opacity */
@keyframes confluent-flow-magenta {
    0% { 
           transform: translate(0, 0) rotate(0deg) scale(1);
           opacity: 0;
           filter: blur(60px);
       }
   20% {
           transform: translate(15px, -10px) rotate(3deg) scale(1.04);
           opacity: 0.2;
           filter: blur(58px);
       }
       40% { 
           transform: translate(-8px, -18px) rotate(-2deg) scale(0.98);
           opacity: 0.4;
           filter: blur(62px);
       }
       60% { 
           transform: translate(18px, -8px) rotate(4deg) scale(1.02);
           opacity: 0.78;
           filter: blur(59px);
       }
       80% { 
           transform: translate(8px, -14px) rotate(-1deg) scale(1.5);
           opacity: 0.74;
           filter: blur(61px);
       }
       100% { 
           transform: translate(0, 0) rotate(0deg) scale(2);
           opacity: 0.7;
           filter: blur(60px);
       }
   }
   
   /* Yellow blob - Complementary gentle flow, starts at 0 opacity */
   @keyframes confluent-flow-yellow {
       0% { 
           transform: translate(0, 0) rotate(0deg) scale(0.4);
           opacity: 0;
           filter: blur(60px);
       }
       25% { 
           transform: translate(-12px, 14px) rotate(-3deg) scale(1.05);
           opacity: 0;
           filter: blur(57px);
       }
       45% { 
           transform: translate(10px, 18px) rotate(2deg) scale(0.97);
           opacity: 0.4;
           filter: blur(63px);
       }
       65% { 
           transform: translate(-15px, 10px) rotate(-4deg) scale(1.03);
           opacity:0.78;
           filter: blur(58px);
       }
       85% { 
           transform: translate(6px, 16px) rotate(1deg) scale(1.01);
           opacity: 0.74;
           filter: blur(62px);
       }
       100% { 
           transform: translate(0, 0) rotate(0deg) scale(1);
           opacity: 0.7;
           filter: blur(60px);
       }
   }
   

/* Magenta blob */
.confluent-colourblob-magenta {
    animation: confluent-flow-magenta 20s ease-in-out both !important;
    -webkit-animation: confluent-flow-magenta 20s ease-in-out both !important;
    will-change: transform, opacity !important;
    transform-origin: center center !important;
    perspective: 1000px !important;
    -webkit-perspective: 1000px !important;
    transform-style: preserve-3d !important;
    -webkit-transform-style: preserve-3d !important;
}

/* Yellow blob */
.confluent-colourblob-yellow {
    animation: confluent-flow-yellow 20s ease-in-out both !important;
    -webkit-animation: confluent-flow-yellow 20s ease-in-out both !important;
    will-change: transform, opacity !important;
    transform-origin: center center !important;
    perspective: 1000px !important;
    -webkit-perspective: 1000px !important;
    transform-style: preserve-3d !important;
    -webkit-transform-style: preserve-3d !important;
}

/* Ensure images inside blob widgets don't inherit animation */
.confluent-colourblob-magenta img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    scale: 1.37;
    transform: none !important;
    animation: none !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .confluent-colourblob-magenta,
    .confluent-colourblob-yellow {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
    .confluent-colourblob-magenta {
        transform: scale(2) !important;
    }
}
   
/* ============================================
   MOBILE
   ============================================ */

@media (max-width: 768px) {
    @keyframes confluent-flow-magenta {
           0% { 
               transform: translate(0, 0) scale(1);
               opacity: 0;
               filter: blur(50px);
           }
           50% { 
               transform: translate(8px, -6px) scale(1.02);
               opacity: 0.65;
               filter: blur(48px);
           }
           100% { 
               transform: translate(0, 0) scale(2);
               opacity: 0.6;
               filter: blur(50px);
           }
    }
    @keyframes confluent-flow-yellow {
        0% { 
               transform: translate(0, 0) scale(1);
               opacity: 0;
               filter: blur(50px);
           }
           50% { 
               transform: translate(-8px, 6px) scale(1.03);
               opacity: 0.6;
               filter: blur(48px);
           }
           100% {
               transform: translate(0, 0) scale(1);
               opacity: 0.55;
               filter: blur(50px);
           }
    }
}