/**
 * Chad AI: Rainbow Gradient Overlay
 * Add class to Elementor Section/Container (Advanced > CSS Classes):
 *   .confluent-rainbow-about   .confluent-rainbow-people   .confluent-rainbow-brand
 *   .confluent-rainbow-business   .confluent-rainbow-careers
 * Internal namespace: chadai.
 */

/* Tweakable variables: fade duration, blend mode, opacity, blur (no directional motion) */
:root {
    --chadai-rainbow-duration: 5s;
    --chadai-rainbow-blend-mode: color;
    --chadai-rainbow-opacity: 0.2;
    --chadai-rainbow-opacity-strong: 0.5;
    --chadai-rainbow-blur: 45px;
    --chadai-rainbow-blur-mobile: 30px;
}

/* ============================================
   KEYFRAMES (fade in place only)
   ============================================ */

/* Opacity only: 0 → 100% over keyframe %, shared by all sections */
@keyframes chadai-rainbow-fade-in {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 0.2;
    }
    15% {
        opacity: 0.5;
    }
    30% {
        opacity: 0.75;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes chadai-rainbow-fade-in {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 0.2;
    }
    15% {
        opacity: 0.5;
    }
    30% {
        opacity: 0.75;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

/* Brands: drift to the right (overlay on right side) */
@keyframes chadai-rainbow-drift-right {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(8%);
    }
}

@-webkit-keyframes chadai-rainbow-drift-right {
    0%, 100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    50% {
        -webkit-transform: translateX(8%);
        transform: translateX(8%);
    }
}

/* Alternative: soft opacity pulse (optional) */
@keyframes chadai-rainbow-breathe {
    0%, 100% {
        opacity: 0.9;
    }
    50% {
        opacity: 1;
    }
}

/* ============================================
   ABOUT US BANNER – .confluent-rainbow-about
   ============================================ */

.confluent-rainbow-about {
    position: relative;
    overflow: hidden;
}

.confluent-rainbow-about::after {
    content: "";
    position: absolute;
    top: 0%;
    left: 45%;
    width: 27%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(
        to bottom,
        hsl(180.63, 100%, 50.1%) 0%,
        hsl(120, 70.09%, 26.58%) 20%,
        hsl(55, 95%, 55%) 40%,
        hsl(0, 85%, 52%) 60%,
        hsl(280, 70%, 48%) 80%,
        hsl(220, 78%, 52%) 100%
    );
    opacity: 0;
    mix-blend-mode: var(--chadai-rainbow-blend-mode, color);
    filter: blur(var(--chadai-rainbow-blur, 45px));
    will-change: transform, opacity;
    animation: none !important;
    -webkit-animation: none !important;
}

body.animations-ready .confluent-rainbow-about::after,
body.animations-ready .confluent-rainbow-about.e-con-boxed::after,
body.animations-ready .confluent-rainbow-about.e-lazyloaded::after {
    animation: chadai-rainbow-fade-in var(--chadai-rainbow-duration, 5s) ease-in-out forwards !important;
    -webkit-animation: chadai-rainbow-fade-in var(--chadai-rainbow-duration, 5s) ease-in-out forwards !important;
}

.confluent-rainbow-about .e-con-inner,
.confluent-rainbow-about .e-con-inner > * {
    position: relative;
    z-index: 1;
}

/* ============================================
   PEOPLE & CULTURE BANNER – .confluent-rainbow-people
   ============================================ */

.confluent-rainbow-people {
    position: relative;
    overflow: hidden;
}

.confluent-rainbow-people::after {
    content: "";
    position: absolute;
    top: 0%;
    left: 35%;
    width: 27%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(
        to bottom,
        hsl(180.63, 100%, 50.1%) 0%,
        hsl(120, 70.09%, 26.58%) 20%,
        hsl(55, 95%, 55%) 40%,
        hsl(0, 85%, 52%) 60%,
        hsl(280, 70%, 48%) 80%,
        hsl(220, 78%, 52%) 100%
    );
    opacity: 0;
    mix-blend-mode: var(--chadai-rainbow-blend-mode, color);
    filter: blur(var(--chadai-rainbow-blur, 45px));
    will-change: transform, opacity;
    animation: none !important;
    -webkit-animation: none !important;
}

body.animations-ready .confluent-rainbow-people::after,
body.animations-ready .confluent-rainbow-people.e-con-boxed::after,
body.animations-ready .confluent-rainbow-people.e-lazyloaded::after {
    animation: chadai-rainbow-fade-in var(--chadai-rainbow-duration, 5s) ease-in-out forwards !important;
    -webkit-animation: chadai-rainbow-fade-in var(--chadai-rainbow-duration, 5s) ease-in-out forwards !important;
}

.confluent-rainbow-people .e-con-inner,
.confluent-rainbow-people .e-con-inner > * {
    position: relative;
    z-index: 1;
}

/* ============================================
   BRANDS BANNER – .confluent-rainbow-brand
   ============================================ */

.confluent-rainbow-brand {
    position: relative;
    overflow: hidden;
}

.confluent-rainbow-brand::after {
    content: "";
    position: absolute;
    top: 30%;
    right: 0;
    left: auto;
    width: 70%;
    height: 40%;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(
        to right,
        hsl(239.3, 100%, 19.59%) 33%,
        hsl(280, 65%, 42%) 42%,
        hsl(314.28, 85%, 50%) 62%,
        hsl(31.32, 100%, 50%) 72%,
        hsl(57.34, 100%, 50%) 100%
    );
    opacity: 0;
    mix-blend-mode: var(--chadai-rainbow-blend-mode, color);
    filter: blur(var(--chadai-rainbow-blur, 45px));
    will-change: transform, opacity;
    animation: none !important;
    -webkit-animation: none !important;
}

body.animations-ready .confluent-rainbow-brand::after,
body.animations-ready .confluent-rainbow-brand.e-con-boxed::after,
body.animations-ready .confluent-rainbow-brand.e-lazyloaded::after {
    animation: chadai-rainbow-fade-in var(--chadai-rainbow-duration, 5s) ease-in-out forwards !important;
    -webkit-animation: chadai-rainbow-fade-in var(--chadai-rainbow-duration, 5s) ease-in-out forwards !important;
}

.confluent-rainbow-brand .e-con-inner,
.confluent-rainbow-brand .e-con-inner > * {
    position: relative;
    z-index: 1;
}

/* ============================================
   BUSINESS BANNER – .confluent-rainbow-business
   ============================================ */

.confluent-rainbow-business {
    position: relative;
    overflow: hidden;
}

.confluent-rainbow-business::after {
    content: "";
    position: absolute;
    top: 30%;
    right: 0;
    left: auto;
    width: 70%;
    height: 40%;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(
        to right,
        hsl(239.3, 100%, 19.59%) 28%,
        hsl(280, 65%, 42%) 38%,
        hsl(314.28, 85%, 50%) 52%,
        hsl(31.32, 100%, 50%) 65%,
        hsl(57.34, 100%, 50%) 82%,
        hsl(120, 70%, 38%) 100%
    );
    opacity: 0;
    mix-blend-mode: var(--chadai-rainbow-blend-mode, color);
    filter: blur(var(--chadai-rainbow-blur, 45px));
    will-change: transform, opacity;
    animation: none !important;
    -webkit-animation: none !important;
}

body.animations-ready .confluent-rainbow-business::after,
body.animations-ready .confluent-rainbow-business.e-con-boxed::after,
body.animations-ready .confluent-rainbow-business.e-lazyloaded::after {
    animation: chadai-rainbow-fade-in var(--chadai-rainbow-duration, 5s) ease-in-out forwards !important;
    -webkit-animation: chadai-rainbow-fade-in var(--chadai-rainbow-duration, 5s) ease-in-out forwards !important;
}

.confluent-rainbow-business .e-con-inner,
.confluent-rainbow-business .e-con-inner > * {
    position: relative;
    z-index: 1;
}

/* ============================================
   CAREERS BANNER – .confluent-rainbow-careers
   ============================================ */

.confluent-rainbow-careers {
    position: relative;
    overflow: hidden;
}

.confluent-rainbow-careers::after {
    content: "";
    position: absolute;
    top: 30%;
    left: 0;
    right: auto;
    width: 70%;
    height: 40%;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(
        to right,
        hsl(239.3, 100%, 19.59%) 33%,
        hsl(280, 65%, 42%) 42%,
        hsl(314.28, 85%, 50%) 62%,
        hsl(31.32, 100%, 50%) 72%,
        rgb(255, 244, 0) 100%
    );
    opacity: 0;
    mix-blend-mode: var(--chadai-rainbow-blend-mode, color);
    filter: blur(var(--chadai-rainbow-blur, 45px));
    will-change: transform, opacity;
    animation: none !important;
    -webkit-animation: none !important;
}

body.animations-ready .confluent-rainbow-careers::after,
body.animations-ready .confluent-rainbow-careers.e-con-boxed::after,
body.animations-ready .confluent-rainbow-careers.e-lazyloaded::after {
    animation: chadai-rainbow-fade-in var(--chadai-rainbow-duration, 5s) ease-in-out forwards !important;
    -webkit-animation: chadai-rainbow-fade-in var(--chadai-rainbow-duration, 5s) ease-in-out forwards !important;
}

.confluent-rainbow-careers .e-con-inner,
.confluent-rainbow-careers .e-con-inner > * {
    position: relative;
    z-index: 1;
}

/* ============================================
   SHARED: Reduced motion & mobile
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .confluent-rainbow-about::after,
    .confluent-rainbow-people::after,
    .confluent-rainbow-brand::after,
    .confluent-rainbow-business::after,
    .confluent-rainbow-careers::after {
        animation: none !important;
        -webkit-animation: none !important;
        will-change: auto;
        filter: blur(var(--chadai-rainbow-blur-mobile, 30px));
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .confluent-rainbow-about::after,
    .confluent-rainbow-people::after,
    .confluent-rainbow-brand::after,
    .confluent-rainbow-business::after,
    .confluent-rainbow-careers::after {
        filter: blur(var(--chadai-rainbow-blur-mobile, 30px));
    }
}