/*
=====================================================
BRAINIUM PREMIUM BRAIN EFFECT - FULL
Desktop container: #mainbrain
Desktop background parent: .elementor-element-4240276
Mobile image widget: #main-brain-mobile
=====================================================
*/

.elementor-element-4240276,
.elementor-element-68cd077 {
    overflow: hidden;
}

/*
=====================================================
DESKTOP BACKGROUND REAL ZOOM
הרקע של המוח נמצא על elementor-element-4240276
=====================================================
*/

@media (min-width: 768px) {
    .elementor-12 .elementor-element.elementor-element-4240276 {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        background-image: none !important;
    }

    .elementor-12 .elementor-element.elementor-element-4240276::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;

        background-image: url("https://ldatabrain.com/wp-content/uploads/2026/03/Group-456-1.png");
        background-repeat: no-repeat;
        background-position: 500px 20px;
        background-size: auto;

        transform-origin: 1040px 410px;
        animation: brainParentBgRealZoom 7.5s ease-in-out infinite;
        will-change: transform, filter;
    }

    .elementor-12 .elementor-element.elementor-element-4240276 > * {
        position: relative;
        z-index: 2;
    }
}

/*
=====================================================
DESKTOP EFFECT LAYER
=====================================================
*/

#mainbrain {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    z-index: 1;
}

#mainbrain .brain-effect-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: min(100%, 720px);
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;

    -webkit-mask-image:
        radial-gradient(
            ellipse 76% 60% at 47% 42%,
            #000 0%,
            #000 54%,
            rgba(0,0,0,0.68) 70%,
            transparent 90%
        ),
        linear-gradient(
            to right,
            #000 0%,
            #000 74%,
            transparent 100%
        ),
        linear-gradient(
            to bottom,
            #000 0%,
            #000 76%,
            transparent 100%
        );

    -webkit-mask-composite: source-in;
    mask-composite: intersect;

    mask-image:
        radial-gradient(
            ellipse 76% 60% at 47% 42%,
            #000 0%,
            #000 54%,
            rgba(0,0,0,0.68) 70%,
            transparent 90%
        ),
        linear-gradient(
            to right,
            #000 0%,
            #000 74%,
            transparent 100%
        ),
        linear-gradient(
            to bottom,
            #000 0%,
            #000 76%,
            transparent 100%
        );
}

#mainbrain .brain-particles-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.78;
    mix-blend-mode: screen;
}

#mainbrain .brain-effect-layer::after {
    content: "";
    position: absolute;
    inset: 12%;
    z-index: 2;
    pointer-events: none;

    background:
        radial-gradient(ellipse at var(--brain-x, 50%) var(--brain-y, 50%),
            rgba(0, 180, 255, 0.11),
            rgba(0, 100, 255, 0.035) 18%,
            transparent 42%
        );

    opacity: 0;
    transition: opacity 0.25s ease;
    mix-blend-mode: screen;
    filter: blur(10px);
}

#mainbrain.is-brain-hover .brain-effect-layer::after {
    opacity: 0.45;
}

#mainbrain.is-brain-clicking .brain-effect-layer::after {
    opacity: 0.65;
}

#mainbrain > .e-con-inner,
#mainbrain > .elementor-container,
#mainbrain > .elementor-widget-wrap,
#mainbrain > *:not(.brain-effect-layer) {
    position: relative;
    z-index: 3;
}

/*
=====================================================
ORGANIC GLOW
=====================================================
*/

#mainbrain .brain-center-glow,
.mobile-brain-effect-layer .brain-center-glow {
    position: absolute;
    left: 15%;
    top: 11%;
    width: 58%;
    height: 58%;
    z-index: 4;
    pointer-events: none;
    opacity: 0.62;
    mix-blend-mode: screen;
    overflow: hidden;

    border-radius: 38% 62% 48% 52% / 44% 38% 62% 56%;

    clip-path: polygon(
        14% 18%,
        72% 4%,
        94% 36%,
        82% 78%,
        38% 96%,
        4% 66%
    );

    -webkit-mask-image:
        linear-gradient(
            115deg,
            transparent 0%,
            rgba(0,0,0,0.25) 14%,
            #000 34%,
            #000 62%,
            rgba(0,0,0,0.42) 78%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            115deg,
            transparent 0%,
            rgba(0,0,0,0.25) 14%,
            #000 34%,
            #000 62%,
            rgba(0,0,0,0.42) 78%,
            transparent 100%
        );

    animation: brainOrganicFloat 7.8s ease-in-out infinite;
}

#mainbrain .brain-center-glow::before,
.mobile-brain-effect-layer .brain-center-glow::before {
    content: "";
    position: absolute;
    left: 8%;
    top: 18%;
    width: 86%;
    height: 46%;

    background:
        linear-gradient(
            105deg,
            transparent 0%,
            rgba(0, 110, 255, 0.06) 22%,
            rgba(80, 190, 255, 0.20) 46%,
            rgba(180, 240, 255, 0.26) 52%,
            rgba(0, 150, 255, 0.12) 64%,
            transparent 100%
        );

    filter: blur(17px);
    opacity: 0.72;
    transform: rotate(-12deg) scaleX(1.25);
    animation: brainOrganicPulse 5.4s ease-in-out infinite;
}

#mainbrain .brain-center-glow::after,
.mobile-brain-effect-layer .brain-center-glow::after {
    content: "";
    position: absolute;
    top: -35%;
    left: -70%;
    width: 34%;
    height: 170%;

    background:
        linear-gradient(
            110deg,
            transparent 0%,
            rgba(80, 190, 255, 0.00) 24%,
            rgba(100, 210, 255, 0.20) 43%,
            rgba(225, 250, 255, 0.42) 50%,
            rgba(0, 145, 255, 0.16) 58%,
            transparent 78%
        );

    filter: blur(13px);
    transform: rotate(13deg);
    opacity: 0;
    animation: brainOrganicSweep 8.2s cubic-bezier(.45,.05,.2,1) infinite;
}

/*
=====================================================
MOBILE
=====================================================
*/

#main-brain-mobile {
    position: relative;
    overflow: visible;
    isolation: isolate;
}

#main-brain-mobile img {
    position: relative;
    z-index: 1;
    display: block;
}

.mobile-brain-effect-layer {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    mix-blend-mode: screen;
    transform-origin: 50% 45%;

    -webkit-mask-image:
        radial-gradient(
            ellipse 80% 60% at 50% 43%,
            #000 0%,
            #000 52%,
            rgba(0,0,0,0.72) 68%,
            transparent 90%
        );

    mask-image:
        radial-gradient(
            ellipse 80% 60% at 50% 43%,
            #000 0%,
            #000 52%,
            rgba(0,0,0,0.72) 68%,
            transparent 90%
        );
}

.mobile-brain-effect-layer canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.88;
}

.mobile-brain-effect-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;

    background:
        radial-gradient(circle at var(--mobile-brain-x, 50%) var(--mobile-brain-y, 50%),
            rgba(0, 180, 255, 0.24),
            rgba(0, 95, 255, 0.08) 18%,
            transparent 42%
        );

    opacity: 0;
    transition: opacity 0.22s ease;
    mix-blend-mode: screen;
}

#main-brain-mobile.is-mobile-brain-touch .mobile-brain-effect-layer::after,
#main-brain-mobile.is-mobile-brain-hover .mobile-brain-effect-layer::after {
    opacity: 0.9;
}

@media (max-width: 1024px) {
    #mainbrain .brain-effect-layer {
        width: min(100%, 700px);
    }

    #mainbrain .brain-particles-canvas {
        opacity: 0.7;
    }
}

@media (max-width: 767px) {
    #mainbrain .brain-effect-layer {
        width: 100%;
    }

    #mainbrain .brain-effect-layer::after {
        display: none;
    }

    #main-brain-mobile img {
        transform-origin: 50% 45%;
        animation: realMobileBrainBreath 7s ease-in-out infinite;
        will-change: transform, filter;
    }

    #main-brain-mobile .mobile-brain-effect-layer {
        animation: realMobileBrainBreathLayer 7s ease-in-out infinite;
        will-change: transform;
    }

    .mobile-brain-effect-layer .brain-center-glow {
        left: 18%;
        top: 17%;
        width: 70%;
        height: 34%;
        opacity: 0.54;

        border-radius: 28% 72% 42% 58% / 46% 32% 68% 54%;

        clip-path: polygon(
            12% 28%,
            68% 6%,
            92% 34%,
            76% 74%,
            34% 92%,
            2% 64%
        );
    }

    .mobile-brain-effect-layer .brain-center-glow::before {
        height: 38%;
        filter: blur(13px);
        opacity: 0.56;
        transform: rotate(-14deg) scaleX(1.35);
    }

    .mobile-brain-effect-layer .brain-center-glow::after {
        width: 28%;
        filter: blur(11px);
        animation-duration: 9.4s;
    }
}

@media (min-width: 768px) {
    .mobile-brain-effect-layer {
        display: none !important;
    }
}

/*
=====================================================
KEYFRAMES
=====================================================
*/

@keyframes brainParentBgRealZoom {
    0%, 100% {
        transform: scale(1) translate3d(0, 0, 0);
        filter: brightness(1);
    }

    40% {
        transform: scale(1.025) translate3d(4px, -3px, 0);
        filter: brightness(1.025);
    }

    70% {
        transform: scale(1.01) translate3d(-1px, 1px, 0);
        filter: brightness(1.01);
    }
}

@keyframes realMobileBrainBreath {
    0%, 100% {
        transform: scale(1) translate3d(0, 0, 0);
        filter: brightness(1);
    }

    42% {
        transform: scale(1.04) translate3d(0, -3px, 0);
        filter: brightness(1.045);
    }

    72% {
        transform: scale(1.018) translate3d(1px, 1px, 0);
        filter: brightness(1.02);
    }
}

@keyframes realMobileBrainBreathLayer {
    0%, 100% {
        transform: scale(1) translate3d(0, 0, 0);
    }

    42% {
        transform: scale(1.04) translate3d(0, -3px, 0);
    }

    72% {
        transform: scale(1.018) translate3d(1px, 1px, 0);
    }
}

@keyframes brainOrganicFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(-2deg) scale(0.96);
        opacity: 0.38;
    }

    38% {
        transform: translate3d(12px, -8px, 0) rotate(3deg) scale(1.08);
        opacity: 0.72;
    }

    68% {
        transform: translate3d(-7px, 7px, 0) rotate(-4deg) scale(1.02);
        opacity: 0.50;
    }
}

@keyframes brainOrganicPulse {
    0%, 100% {
        opacity: 0.32;
        transform: rotate(-12deg) scaleX(1.05) scaleY(0.9);
    }

    48% {
        opacity: 0.78;
        transform: rotate(-12deg) scaleX(1.45) scaleY(1.12);
    }
}

@keyframes brainOrganicSweep {
    0% {
        left: -70%;
        opacity: 0;
    }

    12% {
        opacity: 0.48;
    }

    44% {
        opacity: 0.74;
    }

    58% {
        left: 125%;
        opacity: 0;
    }

    100% {
        left: 125%;
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .elementor-12 .elementor-element.elementor-element-4240276::before,
    #main-brain-mobile img,
    #main-brain-mobile .mobile-brain-effect-layer,
    #mainbrain .brain-center-glow,
    .mobile-brain-effect-layer .brain-center-glow,
    #mainbrain .brain-center-glow::before,
    #mainbrain .brain-center-glow::after,
    .mobile-brain-effect-layer .brain-center-glow::before,
    .mobile-brain-effect-layer .brain-center-glow::after {
        animation: none !important;
    }
}