/**
 * Confluent: Liquid cloud animations (Chad AI)
 * Add class "cloud-animation-container" or "confluent-liquid-clouds" to an Elementor Section or Container
 * (Advanced > CSS Classes) to inject 4 floating clouds behind the content.
 * Page meta controls: Enable, Direction (horizontal/vertical), X/Y position.
 * Internal namespace: chadai-liquid-clouds.
 */

/* Tweakable variables: filter, speed, opacity, blend, per-blob size (1 = default), colour, and blend.
   Blobs by colour: cyan-1, cyan-2, magenta, yellow.
   ---
   Filter settings (applied to all blobs):
   --chadai-liquid-blur:      0 | 10px | 20px | 28px | 40px | 50px  (0 = sharp edges for shape inspection)
   --chadai-liquid-blur-mobile:  blur on viewports ≤768px (default 20px)
   --chadai-liquid-vibrance:  0–3+  (1 = normal, >1 = more vivid, <1 = muted; multiplies with saturation)
   --chadai-liquid-saturation: 0–3+ (1 = normal, >1 = stronger colour, <1 = washed out; multiplies with vibrance)
   ---
   Blend (global or per-blob): none | normal | multiply | screen | overlay | soft-light | hard-light | color-dodge | color-burn | darken | lighten | difference | exclusion | hue | saturation | color | luminosity
   Opacity: 0–1 (controlled only here; SVG filter alpha is 1).
   --chadai-liquid-opacity-home: homepage only; set separately from --chadai-liquid-opacity.
   Fade-in: --chadai-liquid-fade-in-duration: 0 | 400ms | 600ms | 1s  (0 = instant, no fade).
   Start position: --chadai-liquid-*-center-x is horizontal center % (e.g. 20% 40% 60% 80% = spread; 50% = all center).
   --- */
   /* Design ref: deep indigo → magenta → red → orange → yellow → lime; luminous, high saturation */
   .cloud-animation-container,
   .confluent-liquid-clouds {
    --chadai-liquid-blur: 25px;
    --chadai-liquid-blur-mobile: 15px;
    --chadai-liquid-speed: 0.3;
    --chadai-liquid-opacity: 0.52;
    --chadai-liquid-opacity-home: 0.72;
    --chadai-liquid-fade-in-duration: 3000ms;
    --chadai-liquid-vibrance: 2.2;
    --chadai-liquid-saturation: 2.2;
    --chadai-liquid-cyan-1-center-x: 20%;
    --chadai-liquid-cyan-2-center-x: 40%;
    --chadai-liquid-magenta-center-x: 60%;
    --chadai-liquid-yellow-center-x: 80%;
    --chadai-liquid-cyan-1-size: 0.5;
    --chadai-liquid-cyan-2-size: 0.5;
    --chadai-liquid-magenta-size: 1.1;
    --chadai-liquid-yellow-size: 0.7;
    /* Deeper, richer palette: indigo/violet, magenta, red-orange, yellow-lime */
    --chadai-liquid-cyan-1-color: #22FFFF;
    --chadai-liquid-cyan-2-color: #22FFFF;
    --chadai-liquid-magenta-color: #FF00E1;
    --chadai-liquid-yellow-color: #FFD700;
    /* screen = luminous glow on dark; use lighten or overlay if preferred */
    --chadai-liquid-cyan-1-blend: multiply;
    --chadai-liquid-cyan-2-blend: multiply;
    --chadai-liquid-magenta-blend: multiply;
    --chadai-liquid-yellow-blend: multiply;
}


@supports (-webkit-touch-callout: none) {
	.cloud-animation-container,
   .confluent-liquid-clouds {    
		--chadai-liquid-vibrance: 0.8;
    	--chadai-liquid-saturation: 0.8;
	}
}

/* Homepage: use separate opacity variable */
body.is-front-page .cloud-animation-container,
body.is-front-page .confluent-liquid-clouds {
    --chadai-liquid-opacity: var(--chadai-liquid-opacity-home);
}

/* Section: background image (home banner); override in Elementor if needed */
.cloud-animation-container,
.confluent-liquid-clouds {
    position: relative;
    overflow: visible;
    background-image: url(https://confluent.devstagingbeta.co.za/wp-content/uploads/2026/01/confluent-home-banner-background.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Vertical mode: clip so rotated blobs do not overlap the section below */
.cloud-animation-container:has(.chadai-liquid-direction-vertical),
.confluent-liquid-clouds:has(.chadai-liquid-direction-vertical) {
    overflow: hidden;
}

/* Section needs a stacking context so clouds and content layer correctly */
.cloud-animation-container,
.confluent-liquid-clouds {
    isolation: auto;
}

.cloud-animation-container .elementor-container,
.cloud-animation-container .elementor-widget-wrap,
.cloud-animation-container .elementor-section-content-top,
.confluent-liquid-clouds .elementor-container,
.confluent-liquid-clouds .elementor-widget-wrap,
.confluent-liquid-clouds .elementor-section-content-top {
    position: relative;
    z-index: 2;
}

/* Clouds container: above section background, behind content; overflow hidden so blobs don't affect page width.
   Position shift via --chadai-cloud-pos-x / --chadai-cloud-pos-y (0–100, default 50 = center). */
.chadai-liquid-clouds-wrap {
    position: absolute;
    inset: 0;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
    transform: translate(
        calc((var(--chadai-cloud-pos-x, 50) - 50) * 1%),
        calc((var(--chadai-cloud-pos-y, 50) - 50) * 1%)
    ) scaleX(var(--chadai-cloud-flip, 1));
}

/* Filter: blur (0 = sharp), then vibrance + saturation. Fade-in is combined with float animation per blob below. */
.chadai-liquid-clouds-wrap svg {
    position: absolute;
    display: block;
    will-change: transform;
    opacity: 0;
    overflow: visible;
    filter: blur(var(--chadai-liquid-blur, 28px)) saturate(var(--chadai-liquid-vibrance, 1)) saturate(var(--chadai-liquid-saturation, 1));
}

@keyframes chadai-liquid-fade-in {
    to {
        opacity: var(--chadai-liquid-opacity, 1);
    }
}

/* Blobs start spread (center-x vars), then float side-to-side; size vars scale from center; per-blob blend. */
/* Cyan (first shape) – starts left */
.chadai-liquid-blob-1 {
    mix-blend-mode: var(--chadai-liquid-cyan-1-blend);
    width: calc(142.5% * var(--chadai-liquid-cyan-1-size, 1));
    height: calc(63% * var(--chadai-liquid-cyan-1-size, 1));
    left: calc(var(--chadai-liquid-cyan-1-center-x, 20%) - 71.25% * var(--chadai-liquid-cyan-1-size, 1));
    top: calc(60% - 31.5% * var(--chadai-liquid-cyan-1-size, 1));
    animation: chadai-liquid-fade-in var(--chadai-liquid-fade-in-duration, 600ms) ease-out forwards, chadai-float-blob-1 calc(22s / var(--chadai-liquid-speed, 1)) ease-in-out infinite;
}

/* Cyan (second shape) – starts left-of-center */
.chadai-liquid-blob-2 {
    mix-blend-mode: var(--chadai-liquid-cyan-2-blend);
    width: calc(138% * var(--chadai-liquid-cyan-2-size, 1));
    height: calc(57% * var(--chadai-liquid-cyan-2-size, 1));
    left: calc(var(--chadai-liquid-cyan-2-center-x, 40%) - 69% * var(--chadai-liquid-cyan-2-size, 1));
    top: calc(64% - 28.5% * var(--chadai-liquid-cyan-2-size, 1));
    animation: chadai-liquid-fade-in var(--chadai-liquid-fade-in-duration, 600ms) ease-out forwards, chadai-float-blob-2 calc(18s / var(--chadai-liquid-speed, 1)) ease-in-out infinite;
}

/* Magenta – starts right-of-center */
.chadai-liquid-blob-3 {
    mix-blend-mode: var(--chadai-liquid-magenta-blend);
    width: calc(132% * var(--chadai-liquid-magenta-size, 1));
    height: calc(60% * var(--chadai-liquid-magenta-size, 1));
    left: calc(var(--chadai-liquid-magenta-center-x, 60%) - 66% * var(--chadai-liquid-magenta-size, 1));
    top: calc(62% - 30% * var(--chadai-liquid-magenta-size, 1));
    animation: chadai-liquid-fade-in var(--chadai-liquid-fade-in-duration, 600ms) ease-out forwards, chadai-float-blob-3 calc(24s / var(--chadai-liquid-speed, 1)) ease-in-out infinite;
}

/* Yellow – starts right */
.chadai-liquid-blob-4 {
    mix-blend-mode: var(--chadai-liquid-yellow-blend);
    width: calc(135% * var(--chadai-liquid-yellow-size, 1));
    height: calc(60% * var(--chadai-liquid-yellow-size, 1));
    left: calc(var(--chadai-liquid-yellow-center-x, 80%) - 67.5% * var(--chadai-liquid-yellow-size, 1));
    top: calc(63% - 30% * var(--chadai-liquid-yellow-size, 1));
    animation: chadai-liquid-fade-in var(--chadai-liquid-fade-in-duration, 600ms) ease-out forwards, chadai-float-blob-4 calc(20s / var(--chadai-liquid-speed, 1)) ease-in-out infinite;
}

/* Left/right crossing motion with slight random Y for natural feel */
@keyframes chadai-float-blob-1 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(18%, 1%) scale(1.02);
    }
    50% {
        transform: translate(-20%, -1%) scale(0.98);
    }
    75% {
        transform: translate(12%, 2%) scale(1.01);
    }
}

@keyframes chadai-float-blob-2 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(-22%, -2%) scale(1.02);
    }
    66% {
        transform: translate(15%, 1%) scale(0.99);
    }
}

@keyframes chadai-float-blob-3 {
    0%, 100% {
        transform: translate(-8%, 0) scale(1);
    }
    30% {
        transform: translate(20%, 1%) scale(1.01);
    }
    60% {
        transform: translate(-18%, -1%) scale(0.98);
    }
    85% {
        transform: translate(5%, 2%) scale(1);
    }
}

@keyframes chadai-float-blob-4 {
    0%, 100% {
        transform: translate(5%, 0) scale(1);
    }
    40% {
        transform: translate(-18%, 2%) scale(0.99);
    }
    70% {
        transform: translate(14%, -1%) scale(1.02);
    }
}

/* Vertical mode: rotate the whole wrap -90deg so horizontal blob motion becomes up/down on screen.
   Blobs keep the same horizontal keyframes (translateX); no size reduction. */
.chadai-liquid-direction-vertical.chadai-liquid-clouds-wrap {
    transform: translate(
        calc((var(--chadai-cloud-pos-x, 50) - 50) * 1%),
        calc((var(--chadai-cloud-pos-y, 50) - 50) * 1%)
    ) rotate(-90deg) scaleX(var(--chadai-cloud-flip, 1));
    transform-origin: center center;
    width: 100%;
    height: 100%;
}

/* Reuse horizontal float keyframes – in rotated wrap, X motion = vertical on screen */
.chadai-liquid-direction-vertical .chadai-liquid-blob-1 {
    left: calc(var(--chadai-liquid-cyan-1-center-x, 20%) - 71.25% * var(--chadai-liquid-cyan-1-size, 1));
    top: calc(60% - 31.5% * var(--chadai-liquid-cyan-1-size, 1));
    animation: chadai-liquid-fade-in var(--chadai-liquid-fade-in-duration, 600ms) ease-out forwards, chadai-float-blob-1 calc(22s / var(--chadai-liquid-speed, 1)) ease-in-out infinite;
}

.chadai-liquid-direction-vertical .chadai-liquid-blob-2 {
    left: calc(var(--chadai-liquid-cyan-2-center-x, 40%) - 69% * var(--chadai-liquid-cyan-2-size, 1));
    top: calc(64% - 28.5% * var(--chadai-liquid-cyan-2-size, 1));
    animation: chadai-liquid-fade-in var(--chadai-liquid-fade-in-duration, 600ms) ease-out forwards, chadai-float-blob-2 calc(18s / var(--chadai-liquid-speed, 1)) ease-in-out infinite;
}

.chadai-liquid-direction-vertical .chadai-liquid-blob-3 {
    left: calc(var(--chadai-liquid-magenta-center-x, 60%) - 66% * var(--chadai-liquid-magenta-size, 1));
    top: calc(62% - 30% * var(--chadai-liquid-magenta-size, 1));
    animation: chadai-liquid-fade-in var(--chadai-liquid-fade-in-duration, 600ms) ease-out forwards, chadai-float-blob-3 calc(24s / var(--chadai-liquid-speed, 1)) ease-in-out infinite;
}

.chadai-liquid-direction-vertical .chadai-liquid-blob-4 {
    left: calc(var(--chadai-liquid-yellow-center-x, 80%) - 67.5% * var(--chadai-liquid-yellow-size, 1));
    top: calc(63% - 30% * var(--chadai-liquid-yellow-size, 1));
    animation: chadai-liquid-fade-in var(--chadai-liquid-fade-in-duration, 600ms) ease-out forwards, chadai-float-blob-4 calc(20s / var(--chadai-liquid-speed, 1)) ease-in-out infinite;
}

/* Mobile: different blur amount (e.g. lighter for performance or softer look) */
@media (max-width: 768px) {
    .chadai-liquid-clouds-wrap svg {
        filter: blur(var(--chadai-liquid-blur-mobile, 20px)) saturate(var(--chadai-liquid-vibrance, 1)) saturate(var(--chadai-liquid-saturation, 1));
    }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .chadai-liquid-clouds-wrap svg {
        animation: none !important;
        opacity: var(--chadai-liquid-opacity, 1);
    }
}